Merge branch 'task-987-members-table-actions-dropdown' into leszek/ta…

…sk-986-member-role-selector

# Conflicts:
#	jsapp/js/account/organization/MembersRoute.tsx

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

@@ -12,7 +12,7 @@ import MemberRoleSelector from './MemberRoleSelector';
 // Stores, hooks and utilities
 import {formatTime} from 'js/utils';
 import {OrganizationUserRole, useOrganizationQuery} from './organizationQuery';
-import useOrganizationMembersQuery, {useRemoveOrganizationMember, usePatchOrganizationMember} from './membersQuery';
+import useOrganizationMembersQuery, {usePatchOrganizationMember} 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 removeMember = useRemoveOrganizationMember();
   const patchMember = usePatchOrganizationMember();
 
   if (!orgQuery.data) {
@@ -126,11 +125,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});
-            }}
           />
         );
       },

jsapp/js/account/organization/membersQuery.ts

@@ -47,36 +47,22 @@ export interface OrganizationMember {
   };
 }
 
-// -----------------------------------------------------------------------------
-// Updating organization member
-// -----------------------------------------------------------------------------
-
-interface PatchOrgMemberVars {
-  orgId: string;
-  username: string;
-  newMemberData: Partial<OrganizationMember>;
-}
-
-/**
- * Updates organization member.
- * Accepts partial properties of `OrganizationMember`.
- */
-async function patchOrganizationMember(vars: PatchOrgMemberVars) {
-  const apiUrl = endpoints.ORGANIZATION_MEMBER_URL
-    .replace(':organization_id', vars.orgId)
-    .replace(':username', vars.username);
-  return fetchPatch<OrganizationMember>(apiUrl, vars.newMemberData);
+function getMemberEndpoint(orgId: string, username: string) {
+  return endpoints.ORGANIZATION_MEMBER_URL
+    .replace(':organization_id', orgId)
+    .replace(':username', username);
 }
 
 /**
  * Mutation hook for updating organization member. It ensures that all related
  * queries refetch data (are invalidated).
  */
-export function usePatchOrganizationMember() {
+export function usePatchOrganizationMember(orgId: string, username: string) {
   const queryClient = useQueryClient();
-
   return useMutation({
-    mutationFn: (vars: PatchOrgMemberVars) => patchOrganizationMember(vars),
+    mutationFn: async (data: Partial<OrganizationMember>) => (
+      fetchPatch<OrganizationMember>(getMemberEndpoint(orgId, username), data)
+    ),
     onSettled: () => {
       // We invalidate query, so it will refetch (instead of refetching it
       // directly, see: https://github.com/TanStack/query/discussions/2468)
@@ -85,31 +71,16 @@ export function usePatchOrganizationMember() {
   });
 }
 
-// -----------------------------------------------------------------------------
-// Removing organization member
-// -----------------------------------------------------------------------------
-
-interface RemoveOrgMemberVars {
-  orgId: string;
-  username: string;
-}
-
-async function removeOrganizationMember(vars: RemoveOrgMemberVars) {
-  const apiUrl = endpoints.ORGANIZATION_MEMBER_URL
-    .replace(':organization_id', vars.orgId)
-    .replace(':username', vars.username);
-  return fetchDelete(apiUrl);
-}
-
 /**
  * Mutation hook for removing member from organiztion. It ensures that all
  * related queries refetch data (are invalidated).
  */
-export function useRemoveOrganizationMember() {
+export function useRemoveOrganizationMember(orgId: string) {
   const queryClient = useQueryClient();
-
   return useMutation({
-    mutationFn: (vars: RemoveOrgMemberVars) => removeOrganizationMember(vars),
+    mutationFn: async (username: string) => (
+      fetchDelete(getMemberEndpoint(orgId, username))
+    ),
     onSettled: () => {
       queryClient.invalidateQueries({queryKey: [QueryKeys.organizationMembers]});
     },