From dd7680769f5122db2569347982d9d83289d2f094 Mon Sep 17 00:00:00 2001
From: Felix Thape <felix.thape@gmail.com>
Date: Sat, 5 Aug 2023 19:16:50 +0200
Subject: [PATCH] fix: fix OrganizationDetails showing wrong data and endlessly
 loading invites

---
 .../components/OrganisationInvitationList.tsx |   4 +-
 .../components/layout/OrganizationDetails.tsx | 101 +++++++++---------
 tasks/mutations/organization_mutations.ts     |   2 +-
 3 files changed, 55 insertions(+), 52 deletions(-)

diff --git a/tasks/components/OrganisationInvitationList.tsx b/tasks/components/OrganisationInvitationList.tsx
index 320381ad..2cbac1b2 100644
--- a/tasks/components/OrganisationInvitationList.tsx
+++ b/tasks/components/OrganisationInvitationList.tsx
@@ -89,8 +89,8 @@ export const OrganisationInvitationList = ({
 
   return (
     <LoadingAndErrorComponent
-      isLoading={isLoading && context.state.organizationID !== undefined}
-      hasError={isError && context.state.organizationID !== undefined}
+      isLoading={isLoading && !!context.state.organizationID}
+      hasError={isError && !!context.state.organizationID}
       errorProps={{ classname: tw('border-b-2 border-gray-500 rounded-xl') }}
       loadingProps={{ classname: tw('border-2 border-gray-500 rounded-xl') }}
     >
diff --git a/tasks/components/layout/OrganizationDetails.tsx b/tasks/components/layout/OrganizationDetails.tsx
index 53f86f93..82ff8246 100644
--- a/tasks/components/layout/OrganizationDetails.tsx
+++ b/tasks/components/layout/OrganizationDetails.tsx
@@ -108,58 +108,61 @@ export const OrganizationDetail = ({
   }))
 
   return (
-  <div className={tw('flex flex-col py-4 px-6')}>
-    <ConfirmDialog
-      title={translation.deleteConfirmText}
-      description={translation.dangerZoneText}
-      isOpen={isShowingConfirmDialog}
-      onCancel={() => setIsShowingConfirmDialog(false)}
-      onBackgroundClick={() => setIsShowingConfirmDialog(false)}
-      onConfirm={() => {
-        setIsShowingConfirmDialog(false)
-        deleteMutation.mutate(contextState.organizationID)
-      }}
-      confirmType="negative"
-    />
-    <ColumnTitle title={translation.organizationDetail}/>
-    <div className={tw('flex flex-col gap-y-4 max-w-[500px]')}>
-      <OrganizationForm
-        organizationForm={organizationForm}
-        isShowingErrorsDirectly={!isCreatingNewOrganization}
-        onChange={(organizationForm, shouldUpdate) => {
-          setOrganizationForm(organizationForm)
-          if (shouldUpdate) {
-            updateMutation.mutate(organizationForm.organization)
-          }
+    <div
+      key={contextState.organizationID}
+      className={tw('flex flex-col py-4 px-6')}
+    >
+      <ConfirmDialog
+        title={translation.deleteConfirmText}
+        description={translation.dangerZoneText}
+        isOpen={isShowingConfirmDialog}
+        onCancel={() => setIsShowingConfirmDialog(false)}
+        onBackgroundClick={() => setIsShowingConfirmDialog(false)}
+        onConfirm={() => {
+          setIsShowingConfirmDialog(false)
+          deleteMutation.mutate(contextState.organizationID)
         }}
+        confirmType="negative"
       />
-      {!isCreatingNewOrganization && (
-        <OrganizationMemberList />
-      )}
-      <OrganisationInvitationList
-        onChange={setOrganizationInvites}
-        invitations={isCreatingNewOrganization ? organizationInvites : undefined}
-        organizationID={contextState.organizationID}
-      />
-      <div className={tw('flex flex-row justify-end')}>
-        <Button
-          className={tw('w-auto')}
-          onClick={() => isCreatingNewOrganization ? createMutation.mutate(organizationForm.organization) : updateMutation.mutate(organizationForm.organization)}
-          disabled={!organizationForm.isValid}>
-          {isCreatingNewOrganization ? translation.create : translation.update}
-        </Button>
-      </div>
-      <div className={tx('flex flex-col justify-start', { hidden: isCreatingNewOrganization })}>
-        <Span type="subsectionTitle">{translation.dangerZone}</Span>
-        <Span type="description">{translation.dangerZoneText}</Span>
-        <button
-          onClick={() => setIsShowingConfirmDialog(true)}
-          className={tw('text-hw-negative-400 font-bold text-left')}
-        >
-          {translation.deleteOrganization}
-        </button>
+      <ColumnTitle title={translation.organizationDetail}/>
+      <div className={tw('flex flex-col gap-y-4 max-w-[500px]')}>
+        <OrganizationForm
+          organizationForm={organizationForm}
+          isShowingErrorsDirectly={!isCreatingNewOrganization}
+          onChange={(organizationForm, shouldUpdate) => {
+            setOrganizationForm(organizationForm)
+            if (shouldUpdate) {
+              updateMutation.mutate(organizationForm.organization)
+            }
+          }}
+        />
+        {!isCreatingNewOrganization && (
+          <OrganizationMemberList />
+        )}
+        <OrganisationInvitationList
+          onChange={setOrganizationInvites}
+          invitations={isCreatingNewOrganization ? organizationInvites : undefined}
+          organizationID={contextState.organizationID}
+        />
+        <div className={tw('flex flex-row justify-end')}>
+          <Button
+            className={tw('w-auto')}
+            onClick={() => isCreatingNewOrganization ? createMutation.mutate(organizationForm.organization) : updateMutation.mutate(organizationForm.organization)}
+            disabled={!organizationForm.isValid}>
+            {isCreatingNewOrganization ? translation.create : translation.update}
+          </Button>
+        </div>
+        <div className={tx('flex flex-col justify-start', { hidden: isCreatingNewOrganization })}>
+          <Span type="subsectionTitle">{translation.dangerZone}</Span>
+          <Span type="description">{translation.dangerZoneText}</Span>
+          <button
+            onClick={() => setIsShowingConfirmDialog(true)}
+            className={tw('text-hw-negative-400 font-bold text-left')}
+          >
+            {translation.deleteOrganization}
+          </button>
+        </div>
       </div>
     </div>
-  </div>
   )
 }
diff --git a/tasks/mutations/organization_mutations.ts b/tasks/mutations/organization_mutations.ts
index f1f288f8..d38681d8 100644
--- a/tasks/mutations/organization_mutations.ts
+++ b/tasks/mutations/organization_mutations.ts
@@ -345,9 +345,9 @@ export const useInviteMemberMutation = (organizationID: string, callback: (invit
       const res = await organizationService.inviteMember(req, getAuthenticatedGrpcMetadata())
 
       if (!res.getId()) {
-        // TODO some check whether request was successful
         console.error('InviteMember failed')
       }
+
       callback(res.getId())
       return res.toObject()
     },