refactor(invites): use generated react-query

Author: Akuukis

jsapp/js/account/organization/InviteModal.tsx

@@ -1,23 +1,47 @@
-import { useState } from 'react'
-
 import type { ModalProps } from '@mantine/core'
 import { Group, Loader, Modal, Stack, Text, TextInput } from '@mantine/core'
 import { useField } from '@mantine/form'
+import { useState } from 'react'
 import { getSimpleMMOLabel } from '#/account/organization/organization.utils'
 import subscriptionStore from '#/account/subscriptionStore'
+import { InviteeRoleEnum } from '#/api/models/inviteeRoleEnum'
+import {
+  getOrganizationsInvitesListQueryKey,
+  getOrganizationsInvitesRetrieveQueryKey,
+  useOrganizationsInvitesCreate,
+} from '#/api/react-query/organization-invites'
 import ButtonNew from '#/components/common/ButtonNew'
 import Select from '#/components/common/Select'
+import type { FailResponse } from '#/dataInterface'
 import envStore from '#/envStore'
+import { queryClient } from '#/query/queryClient'
+import { QueryKeys } from '#/query/queryKeys'
 import userExistence from '#/users/userExistence.store'
 import { checkEmailPattern, notify } from '#/utils'
-import { useSendMemberInvite } from './membersInviteQuery'
-import { OrganizationUserRole } from './organizationQuery'
+import { inviteGuidFromUrl } from './common'
+import { useOrganizationQuery } from './organizationQuery'
 
 export default function InviteModal(props: ModalProps) {
-  const inviteQuery = useSendMemberInvite()
+  const inviteQuery = useOrganizationsInvitesCreate({
+    mutation: {
+      onSuccess: (data, variables) => {
+        if (data.status !== 201) return // typeguard, `onSuccess` will always be 201.
+        queryClient.invalidateQueries({ queryKey: getOrganizationsInvitesListQueryKey(variables.organizationId) })
+        for (const invite of data.data) {
+          queryClient.invalidateQueries({
+            queryKey: getOrganizationsInvitesRetrieveQueryKey(variables.organizationId, inviteGuidFromUrl(invite.url)),
+          })
+        }
+        queryClient.invalidateQueries({ queryKey: [QueryKeys.organizationMembers] })
+        queryClient.invalidateQueries({ queryKey: [QueryKeys.organizationMemberDetail] })
+      },
+    },
+  })
+  const orgQuery = useOrganizationQuery()
+  const organizationId = orgQuery.data?.id
   const mmoLabel = getSimpleMMOLabel(envStore.data, subscriptionStore.activeSubscriptions[0])
 
-  const [role, setRole] = useState<string | null>(null)
+  const [role, setRole] = useState<InviteeRoleEnum | null>(null)
 
   async function handleUsernameOrEmailCheck(value: string) {
     if (value === '' || checkEmailPattern(value)) {
@@ -38,25 +62,28 @@ export default function InviteModal(props: ModalProps) {
     validateOnBlur: true,
   })
 
-  const handleSendInvite = () => {
-    if (role) {
-      inviteQuery
-        .mutateAsync({
+  const handleSendInvite = async () => {
+    if (!organizationId) return
+    if (!role) return
+    try {
+      await inviteQuery.mutateAsync({
+        organizationId,
+        data: {
           invitees: [userOrEmail.getValue()],
-          role: role as OrganizationUserRole,
-        })
-        .then(() => {
-          userOrEmail.reset()
-          setRole(null)
-          props.onClose()
-        })
-        .catch((error) => {
-          if (error.responseText && JSON.parse(error.responseText)?.invitees) {
-            notify(JSON.parse(error.responseText)?.invitees.join(), 'error')
-          } else {
-            notify(t('Failed to send invite'), 'error')
-          }
-        })
+          role: role,
+        },
+      })
+      userOrEmail.reset()
+      setRole(null)
+      props.onClose()
+    } catch (error) {
+      const responseText = (error as FailResponse).responseText
+      if (responseText && JSON.parse(responseText)?.invitees) {
+        notify(JSON.parse(responseText)?.invitees.join(), 'error')
+      } else {
+        console.error(error)
+        notify(t('Failed to send invite'), 'error')
+      }
     }
   }
 
@@ -89,11 +116,11 @@ export default function InviteModal(props: ModalProps) {
             placeholder='Role'
             data={[
               {
-                value: OrganizationUserRole.admin,
+                value: InviteeRoleEnum.admin,
                 label: t('Admin'),
               },
               {
-                value: OrganizationUserRole.member,
+                value: InviteeRoleEnum.member,
                 label: t('Member'),
               },
             ]}

jsapp/js/account/organization/InviteeActionsDropdown.tsx

@@ -2,10 +2,20 @@ import type { ReactNode } from 'react'
 
 import { Group, LoadingOverlay, Menu, Modal, Stack, Text } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
+import type { InviteResponse } from '#/api/models/inviteResponse'
+import { InviteStatusChoicesEnum } from '#/api/models/inviteStatusChoicesEnum'
+import {
+  getOrganizationsInvitesListQueryKey,
+  getOrganizationsInvitesRetrieveQueryKey,
+  useOrganizationsInvitesDestroy,
+  useOrganizationsInvitesPartialUpdate,
+} from '#/api/react-query/organization-invites'
 import ButtonNew from '#/components/common/ButtonNew'
+import { queryClient } from '#/query/queryClient'
+import { QueryKeys } from '#/query/queryKeys'
 import { notify } from '#/utils'
-import type { MemberInvite } from './membersInviteQuery'
-import { MemberInviteStatus, usePatchMemberInvite, useRemoveMemberInvite } from './membersInviteQuery'
+import { inviteGuidFromUrl } from './common'
+import { useOrganizationQuery } from './organizationQuery'
 
 /**
  * A dropdown with all actions that can be taken towards an organization invitee.
@@ -15,17 +25,50 @@ export default function InviteeActionsDropdown({
   invite,
 }: {
   target: ReactNode
-  invite: MemberInvite
+  invite: InviteResponse
 }) {
+  const orgQuery = useOrganizationQuery()
+  const organizationId = orgQuery.data?.id
+
   const [opened, { open, close }] = useDisclosure()
 
-  const patchInviteMutation = usePatchMemberInvite(invite.url)
-  const removeInviteMutation = useRemoveMemberInvite()
+  const orgInvitesPatchMutation = useOrganizationsInvitesPartialUpdate({
+    mutation: {
+      onSuccess: (_data, variables) => {
+        queryClient.invalidateQueries({ queryKey: getOrganizationsInvitesListQueryKey(variables.organizationId) })
+        queryClient.invalidateQueries({
+          queryKey: getOrganizationsInvitesRetrieveQueryKey(variables.organizationId, variables.guid),
+        })
+        queryClient.invalidateQueries({ queryKey: [QueryKeys.organizationMembers] })
+        queryClient.invalidateQueries({ queryKey: [QueryKeys.organizationMemberDetail] })
+      },
+    },
+    request: {
+      errorMessageDisplay: t('There was an error updating this invitation.'),
+    },
+  })
+  const orgInvitesDestroyMutation = useOrganizationsInvitesDestroy({
+    mutation: {
+      onSuccess: (_data, variables) => {
+        queryClient.invalidateQueries({ queryKey: getOrganizationsInvitesListQueryKey(variables.organizationId) })
+        queryClient.invalidateQueries({
+          queryKey: getOrganizationsInvitesRetrieveQueryKey(variables.organizationId, variables.guid),
+        })
+        queryClient.invalidateQueries({ queryKey: [QueryKeys.organizationMembers] })
+        queryClient.invalidateQueries({ queryKey: [QueryKeys.organizationMemberDetail] })
+      },
+    },
+  })
 
   const resendInvitation = async () => {
+    if (!organizationId) return
     try {
-      await patchInviteMutation.mutateAsync({
-        status: MemberInviteStatus.resent,
+      await orgInvitesPatchMutation.mutateAsync({
+        organizationId,
+        guid: inviteGuidFromUrl(invite.url),
+        data: {
+          status: InviteStatusChoicesEnum.resent,
+        },
       })
       notify(t('The invitation was resent'), 'success')
     } catch (e: any) {
@@ -49,8 +92,9 @@ export default function InviteeActionsDropdown({
   }
 
   const removeInvitation = async () => {
+    if (!organizationId) return
     try {
-      await removeInviteMutation.mutateAsync(invite.url)
+      await orgInvitesDestroyMutation.mutateAsync({ organizationId, guid: inviteGuidFromUrl(invite.url) })
       notify(t('Invitation removed'), 'success')
     } catch (e) {
       notify(t('An error occurred while removing the invitation'), 'error')
@@ -62,7 +106,7 @@ export default function InviteeActionsDropdown({
   return (
     <>
       <Modal opened={opened} onClose={close} title={t('Remove invitation?')}>
-        <LoadingOverlay visible={removeInviteMutation.isPending} />
+        <LoadingOverlay visible={orgInvitesDestroyMutation.isPending} />
         <Stack>
           <Text>{t("Are you sure you want to remove this user's invitation to join the team?")}</Text>
           <Group justify='flex-end'>
@@ -76,7 +120,7 @@ export default function InviteeActionsDropdown({
         </Stack>
       </Modal>
 
-      <LoadingOverlay visible={patchInviteMutation.isPending} />
+      <LoadingOverlay visible={orgInvitesPatchMutation.isPending} />
       <Menu offset={0} position='bottom-end'>
         <Menu.Target>{target}</Menu.Target>
 

jsapp/js/account/organization/MemberRoleSelector.tsx

@@ -1,8 +1,15 @@
 import { LoadingOverlay } from '@mantine/core'
+import {
+  getOrganizationsInvitesListQueryKey,
+  getOrganizationsInvitesRetrieveQueryKey,
+  useOrganizationsInvitesPartialUpdate,
+} from '#/api/react-query/organization-invites'
 import Select from '#/components/common/Select'
-import { usePatchMemberInvite } from './membersInviteQuery'
-import { usePatchOrganizationMember } from './membersQuery'
-import { OrganizationUserRole } from './organizationQuery'
+import { queryClient } from '#/query/queryClient'
+import { QueryKeys } from '#/query/queryKeys'
+import { inviteGuidFromUrl } from './common'
+import { type OrganizationMemberListItem, usePatchOrganizationMember } from './membersQuery'
+import { OrganizationUserRole, useOrganizationQuery } from './organizationQuery'
 
 interface MemberRoleSelectorProps {
   username: string
@@ -15,23 +22,65 @@ interface MemberRoleSelectorProps {
 }
 
 export default function MemberRoleSelector({ username, role, inviteUrl }: MemberRoleSelectorProps) {
+  const orgQuery = useOrganizationQuery()
+  const organizationId = orgQuery.data?.id
+
   const patchMember = usePatchOrganizationMember(username)
-  const patchInvite = usePatchMemberInvite(inviteUrl)
+
+  const orgInvitesPatchMutation = useOrganizationsInvitesPartialUpdate({
+    mutation: {
+      onSuccess: (_data, variables) => {
+        queryClient.invalidateQueries({ queryKey: getOrganizationsInvitesListQueryKey(variables.organizationId) })
+        queryClient.invalidateQueries({
+          queryKey: getOrganizationsInvitesRetrieveQueryKey(variables.organizationId, variables.guid),
+        })
+        queryClient.invalidateQueries({ queryKey: [QueryKeys.organizationMembers] })
+        queryClient.invalidateQueries({ queryKey: [QueryKeys.organizationMemberDetail] })
+      },
+      onMutate: async ({ data }) => {
+        if (!('role' in data)) return
+
+        // If we are updating the invitee's role, we want to optimistically update their role in queries for
+        // the members table list. So we look for their unique invite url and update the relevant query accordingly
+        const qData = queryClient.getQueriesData({ queryKey: [QueryKeys.organizationMembers] })
+        const query = qData.find((q) =>
+          (q[1] as any)?.results?.find((m: OrganizationMemberListItem) => m.invite?.url === inviteUrl),
+        )
+
+        if (!query) return
+
+        const queryKey = query[0]
+        const queryData = query[1]
+        const item = (queryData as any).results.find((m: OrganizationMemberListItem) => m.invite?.url === inviteUrl)
+
+        item.invite.invitee_role = data.role
+        queryClient.setQueryData(queryKey, queryData)
+      },
+    },
+    request: {
+      errorMessageDisplay: t('There was an error updating this invitation.'),
+    },
+  })
 
   const handleRoleChange = (newRole: string | null) => {
-    if (newRole) {
-      const role = newRole as OrganizationUserRole
-      if (inviteUrl) {
-        patchInvite.mutateAsync({ role })
-      } else {
-        patchMember.mutateAsync({ role })
-      }
+    if (!organizationId) return
+    if (!newRole) return
+    const role = newRole as OrganizationUserRole
+
+    if (inviteUrl) {
+      orgInvitesPatchMutation.mutateAsync({
+        guid: inviteGuidFromUrl(inviteUrl),
+        organizationId,
+        data: { role },
+      })
+    } else {
+      patchMember.mutateAsync({ role })
     }
   }
 
   return (
     <>
-      <LoadingOverlay visible={patchMember.isPending || patchInvite.isPending} />
+      <LoadingOverlay visible={patchMember.isPending || orgInvitesPatchMutation.isPending} />
       <Select
         size='sm'
         data={[

jsapp/js/account/organization/MembersRoute.tsx

@@ -7,6 +7,7 @@ import UniversalTable, { DEFAULT_PAGE_SIZE, type UniversalTableColumn } from '#/
 import InviteModal from '#/account/organization/InviteModal'
 import { getSimpleMMOLabel } from '#/account/organization/organization.utils'
 import subscriptionStore from '#/account/subscriptionStore'
+import { InviteStatusChoicesEnum } from '#/api/models/inviteStatusChoicesEnum'
 import ActionIcon from '#/components/common/ActionIcon'
 import ButtonNew from '#/components/common/ButtonNew'
 import Avatar from '#/components/common/avatar'
@@ -52,7 +53,10 @@ export default function MembersRoute() {
    * Returns both an invite and member, but one of these will be null depending on status
    */
   function getMemberOrInviteDetails(obj: OrganizationMemberListItem) {
-    const invite = obj.invite?.status === 'pending' || obj.invite?.status === 'resent' ? obj.invite : null
+    const invite =
+      obj.invite?.status === InviteStatusChoicesEnum.pending || obj.invite?.status === InviteStatusChoicesEnum.resent
+        ? obj.invite
+        : null
     const member = invite ? null : ({ ...obj } as OrganizationMember)
     return { invite, member }
   }
@@ -100,7 +104,7 @@ export default function MembersRoute() {
       size: 140,
       cellFormatter: (obj: OrganizationMemberListItem) => {
         const { invite, member } = getMemberOrInviteDetails(obj)
-        return invite ? formatDate(invite.date_created) : formatDate(member!.date_joined)
+        return invite ? formatDate(invite.created) : formatDate(member!.date_joined)
       },
     },
     {
@@ -130,7 +134,7 @@ export default function MembersRoute() {
           return (
             <MemberRoleSelector
               username={invite.invitee}
-              role={invite.invitee_role}
+              role={invite.invitee_role as any}
               currentUserRole={orgQuery.data.request_user_role}
               inviteUrl={invite.url}
             />

jsapp/js/account/organization/common.ts

@@ -0,0 +1,4 @@
+/**
+ * Note: invites APIs return objects with a URL property with an ID within but no ID property.
+ */
+export const inviteGuidFromUrl = (url: string) => url.slice(0, -1).split('/').pop()!

jsapp/js/account/organization/invites/OrgInviteAcceptedBanner.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react'
-
-import { MemberInviteStatus } from '#/account/organization/membersInviteQuery'
 import { useOrganizationMemberDetailQuery } from '#/account/organization/membersQuery'
 import type { Organization } from '#/account/organization/organizationQuery'
+import { InviteStatusChoicesEnum } from '#/api/models/inviteStatusChoicesEnum'
 import Alert from '#/components/common/alert'
 import { useSafeUsernameStorageKey } from '#/hooks/useSafeUsernameStorageKey'
 
@@ -52,7 +51,7 @@ export default function OrgInviteAcceptedBanner(props: OrgInviteAcceptedBannerPr
     // Only show banner to users who are members of MMO organization
     !props.organization.is_mmo ||
     // Only show banner to users who have accepted the invite
-    organizationMemberDetailQuery.data?.invite?.status !== MemberInviteStatus.accepted ||
+    organizationMemberDetailQuery.data?.invite?.status !== InviteStatusChoicesEnum.accepted ||
     // Wait for local storage information
     isBannerDismissed === undefined ||
     // Respect users who dismissed the banner