move removing logic closer to place it's being triggered

jsapp/js/account/organization/MemberActionsDropdown.tsx

@@ -12,6 +12,7 @@ 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';
@@ -20,23 +21,24 @@ import {OrganizationUserRole} from './organizationQuery';
 import styles from './memberActionsDropdown.module.scss';
 
 interface MemberActionsDropdownProps {
+  orgId: string;
   /** Target member username. */
   username: string;
   /**
    * The role of the currently logged in user, i.e. the role of the user that
    * wants to do the actions (not the role of the target member).
    */
   currentUserRole: OrganizationUserRole;
-  onRequestRemove: (username: string) => void;
 }
 
 /**
  * A dropdown with all actions that can be taken towards an organization member.
  */
 export default function MemberActionsDropdown(
-  {username, currentUserRole, onRequestRemove}: MemberActionsDropdownProps
+  {orgId, username, currentUserRole}: MemberActionsDropdownProps
 ) {
   const session = useSession();
+  const removeMember = useRemoveOrganizationMember(orgId);
   const [isRemoveModalVisible, setIsRemoveModalVisible] = useState(false);
 
   // Wait for session
@@ -78,7 +80,7 @@ export default function MemberActionsDropdown(
           isRemovingSelf={isAdminRemovingSelf}
           onConfirm={() => {
             setIsRemoveModalVisible(false);
-            onRequestRemove(username);
+            removeMember.mutateAsync(username);
           }}
           onCancel={() => setIsRemoveModalVisible(false)}
         />

jsapp/js/account/organization/MembersRoute.tsx

@@ -21,7 +21,6 @@ import styles from './membersRoute.module.scss';
 
 export default function MembersRoute() {
   const orgQuery = useOrganizationQuery();
-  const removeMember = useRemoveOrganizationMember();
 
   if (!orgQuery.data) {
     return (
@@ -101,11 +100,9 @@ export default function MembersRoute() {
 
         return (
           <MemberActionsDropdown
+            orgId={orgQuery.data.id}
             username={member.user__username}
             currentUserRole={orgQuery.data.request_user_role}
-            onRequestRemove={(username) => {
-              removeMember.mutateAsync({orgId: orgQuery.data.id, username: username});
-            }}
           />
         );
       },