use simpler hook closer to the usage

kobotoolbox · Dec 2, 2024 · b601abe · b601abe
1 parent 88544bf
commit b601abe
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 20 deletions.
diff --git a/jsapp/js/account/organization/MemberRoleSelector.tsx b/jsapp/js/account/organization/MemberRoleSelector.tsx
@@ -1,18 +1,18 @@
-// Partial components
 import KoboSelect from 'jsapp/js/components/common/koboSelect';
-
-// Constants and types
+import {usePatchOrganizationMember} from './membersQuery';
 import {OrganizationUserRole} from './organizationQuery';
 
 interface MemberRoleSelectorProps {
+  orgId: string;
   username: string;
   role: OrganizationUserRole;
-  onRequestRoleChange: (username: string, role: OrganizationUserRole) => void;
 }
 
 export default function MemberRoleSelector(
-  {username, role, onRequestRoleChange}: MemberRoleSelectorProps
+  {orgId, username, role}: MemberRoleSelectorProps
 ) {
+  const patchMember = usePatchOrganizationMember(orgId, username);
+
   return (
     <KoboSelect
       name={`member-role-selector-${username}`}
@@ -31,9 +31,10 @@ export default function MemberRoleSelector(
       selectedOption={role}
       onChange={(newRole: string | null) => {
         if (newRole !== null) {
-          onRequestRoleChange(username, newRole as OrganizationUserRole);
+          patchMember.mutateAsync({role: newRole as OrganizationUserRole});
         }
       }}
+      isPending={patchMember.isPending}
     />
   );
 }
diff --git a/jsapp/js/account/organization/MembersRoute.tsx b/jsapp/js/account/organization/MembersRoute.tsx
@@ -12,7 +12,7 @@ import MemberRoleSelector from './MemberRoleSelector';
 // Stores, hooks and utilities
 import {formatTime} from 'js/utils';
 import {OrganizationUserRole, useOrganizationQuery} from './organizationQuery';
-import useOrganizationMembersQuery, {usePatchOrganizationMember} from './membersQuery';
+import useOrganizationMembersQuery from './membersQuery';
 
 // Constants and types
 import type {OrganizationMember} from './membersQuery';
@@ -22,7 +22,6 @@ import styles from './membersRoute.module.scss';
 
 export default function MembersRoute() {
   const orgQuery = useOrganizationQuery();
-  const patchMember = usePatchOrganizationMember();
 
   if (!orgQuery.data) {
     return (
@@ -75,20 +74,9 @@ export default function MembersRoute() {
         }
         return (
           <MemberRoleSelector
+            orgId={orgQuery.data.id}
             username={member.user__username}
             role={member.role}
-            onRequestRoleChange={
-              (
-                username: string,
-                newRole: OrganizationUserRole
-              ) => {
-                patchMember.mutateAsync({
-                  orgId: orgQuery.data.id,
-                  username: username,
-                  newMemberData: {role: newRole},
-                });
-              }
-            }
           />
         );
       }