move member removing closer to place it's being triggered

and wait for removing to finish (show a spinner)
kobotoolbox · Dec 2, 2024 · c4b8947 · c4b8947
1 parent fd6d4a7
commit c4b8947
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/jsapp/js/account/organization/MemberActionsDropdown.tsx b/jsapp/js/account/organization/MemberActionsDropdown.tsx
@@ -12,7 +12,6 @@ import {useSession} from 'jsapp/js/stores/useSession';
 import {getSimpleMMOLabel} from './organization.utils';
 import envStore from 'jsapp/js/envStore';
 import subscriptionStore from 'jsapp/js/account/subscriptionStore';
-import {useRemoveOrganizationMember} from './membersQuery';
 
 // Constants and types
 import {OrganizationUserRole} from './organizationQuery';
@@ -38,7 +37,6 @@ export default function MemberActionsDropdown(
   {orgId, username, currentUserRole}: MemberActionsDropdownProps
 ) {
   const session = useSession();
-  const removeMember = useRemoveOrganizationMember(orgId);
   const [isRemoveModalVisible, setIsRemoveModalVisible] = useState(false);
 
   // Wait for session
@@ -76,11 +74,11 @@ export default function MemberActionsDropdown(
     <>
       {isRemoveModalVisible &&
         <MemberRemoveModal
+          orgId={orgId}
           username={username}
           isRemovingSelf={isAdminRemovingSelf}
-          onConfirm={() => {
+          onConfirmDone={() => {
             setIsRemoveModalVisible(false);
-            removeMember.mutateAsync(username);
           }}
           onCancel={() => setIsRemoveModalVisible(false)}
         />

diff --git a/jsapp/js/account/organization/MemberRemoveModal.tsx b/jsapp/js/account/organization/MemberRemoveModal.tsx
@@ -10,6 +10,8 @@ import KoboModalFooter from 'jsapp/js/components/modals/koboModalFooter';
 import {getSimpleMMOLabel} from './organization.utils';
 import envStore from 'jsapp/js/envStore';
 import subscriptionStore from 'jsapp/js/account/subscriptionStore';
+import {useRemoveOrganizationMember} from './membersQuery';
+import {notify} from 'alertifyjs';
 
 export const REMOVE_SELF_TEXT = {
   title: t('Leave this ##team/org##'),
@@ -36,9 +38,10 @@ function replacePlaceholders(text: string, username: string, mmoLabel: string) {
 }
 
 interface MemberRemoveModalProps {
+  orgId: string;
   username: string;
   isRemovingSelf: boolean;
-  onConfirm: () => void;
+  onConfirmDone: () => void;
   onCancel: () => void;
 }
 
@@ -51,12 +54,14 @@ interface MemberRemoveModalProps {
  */
 export default function MemberRemoveModal(
   {
+    orgId,
     username,
     isRemovingSelf,
-    onConfirm,
+    onConfirmDone,
     onCancel,
   }: MemberRemoveModalProps
 ) {
+  const removeMember = useRemoveOrganizationMember(orgId);
   const mmoLabel = getSimpleMMOLabel(
     envStore.data,
     subscriptionStore.activeSubscriptions[0],
@@ -97,8 +102,17 @@ export default function MemberRemoveModal(
         <Button
           type='danger'
           size='m'
-          onClick={onConfirm}
+          onClick={async () => {
+            try {
+              removeMember.mutateAsync(username);
+            } catch (error) {
+              notify('Failed to remove member', 'error');
+            } finally {
+              onConfirmDone();
+            }
+          }}
           label={confirmButtonLabel}
+          isPending={removeMember.isPending}
         />
       </KoboModalFooter>
     </KoboModal>