chore: migrate invite users to rtk (#5196)

tiagoapolo · web-flow · commit dcd6d0729e0d · 2025-04-09T10:00:04.000+01:00
diff --git a/frontend/common/dispatcher/action-constants.js b/frontend/common/dispatcher/action-constants.js
@@ -33,7 +33,6 @@ const Actions = Object.assign({}, require('./base/_action-constants'), {
   'GET_ORGANISATION': 'GET_ORGANISATION',
   'GET_PROJECT': 'GET_PROJECT',
   'INVALIDATE_INVITE_LINK': 'INVALIDATE_INVITE_LINK',
-  'INVITE_USERS': 'INVITE_USERS',
   'MIGRATE_PROJECT': 'MIGRATE_PROJECT',
   'OAUTH': 'OAUTH',
   'REFRESH_FEATURES': 'REFRESH_FEATURES',
diff --git a/frontend/common/dispatcher/app-actions.js b/frontend/common/dispatcher/app-actions.js
@@ -264,12 +264,6 @@ const AppActions = Object.assign({}, require('./base/_app-actions'), {
       link,
     })
   },
-  inviteUsers(invites) {
-    Dispatcher.handleViewAction({
-      actionType: Actions.INVITE_USERS,
-      invites,
-    })
-  },
   migrateProject(projectId) {
     Dispatcher.handleViewAction({
       actionType: Actions.MIGRATE_PROJECT,
diff --git a/frontend/common/services/useInvites.ts b/frontend/common/services/useInvites.ts
@@ -0,0 +1,110 @@
+import { Res } from 'common/types/responses'
+import { Req } from 'common/types/requests'
+import { service } from 'common/service'
+import Constants from 'common/constants'
+import API from 'project/api'
+
+export const invitesService = service
+  .enhanceEndpoints({ addTagTypes: ['Invite'] })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      createUserInvite: builder.mutation<
+        Res['createdUserInvite'],
+        Req['createUserInvite']
+      >({
+        invalidatesTags: [{ id: 'LIST', type: 'Invite' }],
+        query: (query: Req['createUserInvite']) => ({
+          body: {
+            frontend_base_url: `${document.location.origin}/email-invite/`,
+            invites: query.invites.map((invite) => {
+              API.trackEvent(Constants.events.INVITE)
+              return invite
+            }),
+          },
+          method: 'POST',
+          url: `organisations/${query.organisationId}/invite/`,
+        }),
+      }),
+      deleteUserInvite: builder.mutation<{}, Req['deleteUserInvite']>({
+        invalidatesTags: [{ id: 'LIST', type: 'Invite' }],
+        query: (query: Req['deleteUserInvite']) => {
+          API.trackEvent(Constants.events.DELETE_INVITE)
+          return {
+            method: 'DELETE',
+            url: `organisations/${query.organisationId}/invites/${query.inviteId}/`,
+          }
+        },
+      }),
+      getUserInvites: builder.query<Res['userInvites'], Req['getUserInvites']>({
+        providesTags: [{ id: 'LIST', type: 'Invite' }],
+        query: (query: Req['getUserInvites']) => ({
+          url: `organisations/${query.organisationId}/invites/`,
+        }),
+      }),
+      resendUserInvite: builder.mutation<{}, Req['resendUserInvite']>({
+        invalidatesTags: [{ id: 'LIST', type: 'Invite' }],
+        query: (query: Req['resendUserInvite']) => {
+          API.trackEvent(Constants.events.RESEND_INVITE)
+          return {
+            method: 'POST',
+            url: `organisations/${query.organisationId}/invites/${query.inviteId}/resend/`,
+          }
+        },
+      }),
+    }),
+  })
+
+export async function createUserInvite(
+  store: any,
+  data: Req['createUserInvite'],
+  options?: Parameters<
+    typeof invitesService.endpoints.createUserInvite.initiate
+  >[1],
+) {
+  return store.dispatch(
+    invitesService.endpoints.createUserInvite.initiate(data, options),
+  )
+}
+
+export async function deleteUserInvite(
+  store: any,
+  data: Req['deleteUserInvite'],
+  options?: Parameters<
+    typeof invitesService.endpoints.deleteUserInvite.initiate
+  >[1],
+) {
+  return store.dispatch(
+    invitesService.endpoints.deleteUserInvite.initiate(data, options),
+  )
+}
+
+export async function getUserInvites(
+  store: any,
+  data: Req['getUserInvites'],
+  options?: Parameters<
+    typeof invitesService.endpoints.getUserInvites.initiate
+  >[1],
+) {
+  return store.dispatch(
+    invitesService.endpoints.getUserInvites.initiate(data, options),
+  )
+}
+
+export async function resendUserInvite(
+  store: any,
+  data: Req['resendUserInvite'],
+  options?: Parameters<
+    typeof invitesService.endpoints.resendUserInvite.initiate
+  >[1],
+) {
+  return store.dispatch(
+    invitesService.endpoints.resendUserInvite.initiate(data, options),
+  )
+}
+
+export const {
+  useCreateUserInviteMutation,
+  useDeleteUserInviteMutation,
+  useGetUserInvitesQuery,
+  useResendUserInviteMutation,
+} = invitesService
diff --git a/frontend/common/stores/organisation-store.js b/frontend/common/stores/organisation-store.js
@@ -254,36 +254,6 @@ const controller = {
           }),
       )
   },
-  inviteUsers: (invites) => {
-    store.saving()
-    data
-      .post(`${Project.api}organisations/${store.id}/invite/`, {
-        frontend_base_url: `${document.location.origin}/email-invite/`,
-        invites: invites.map((invite) => {
-          API.trackEvent(Constants.events.INVITE)
-          return {
-            email: invite.emailAddress,
-            permission_groups: invite.groups,
-            role: invite.role.value,
-          }
-        }),
-      })
-      .then((res) => {
-        store.model.invites = store.model.invites || []
-        store.model.invites = store.model.invites.concat(res)
-        store.saved()
-        toast('Invite(s) sent successfully')
-      })
-      .catch((e) => {
-        store.saved()
-        toast(
-          `Failed to send invite(s). ${
-            e && e.error ? e.error : 'Please try again later'
-          }`,
-          'danger',
-        )
-      })
-  },
   resendInvite: (id) => {
     data
       .post(`${Project.api}organisations/${store.id}/invites/${id}/resend/`)
@@ -359,9 +329,6 @@ store.dispatcherIndex = Dispatcher.register(store, (payload) => {
     case Actions.DELETE_PROJECT:
       controller.deleteProject(action.id)
       break
-    case Actions.INVITE_USERS:
-      controller.inviteUsers(action.invites)
-      break
     case Actions.DELETE_INVITE:
       controller.deleteInvite(action.id)
       break
diff --git a/frontend/common/types/requests.ts b/frontend/common/types/requests.ts
@@ -190,6 +190,25 @@ export type Req = {
     description: string | null
     name: string
   }
+  getUserInvites: {
+    organisationId: number
+  }
+  createUserInvite: {
+    organisationId: number
+    invites: {
+      email: string
+      role: string
+      permission_groups: number[]
+    }[]
+  }
+  deleteUserInvite: {
+    organisationId: number
+    inviteId: number
+  }
+  resendUserInvite: {
+    organisationId: number
+    inviteId: number
+  }
   getRole: { organisation_id: string; role_id: number }
   updateRole: {
     organisation_id: number
diff --git a/frontend/common/types/responses.ts b/frontend/common/types/responses.ts
@@ -235,11 +235,10 @@ export type githubIntegration = {
 export type User = {
   id: number
   email: string
-  last_login?: string
   first_name: string
   last_name: string
-  role: 'ADMIN' | 'USER'
-  date_joined: string
+  last_login: string
+  uuid: string
 }
 export type GroupUser = Omit<User, 'role'> & {
   group_admin: boolean
@@ -486,7 +485,7 @@ export type Invite = {
   email: string
   date_created: string
   invited_by: User
-  link: string
+  link?: string
   permission_groups: number[]
 }
 
@@ -787,6 +786,8 @@ export type Res = {
   groupAdmin: { id: string }
   groups: PagedResponse<UserGroup>
   group: UserGroup
+  userInvites: PagedResponse<Invite>
+  createdUserInvite: Invite[]
   myGroups: PagedResponse<UserGroupSummary>
   createSegmentOverride: {
     id: number
diff --git a/frontend/web/components/modals/InviteUsers.tsx b/frontend/web/components/modals/InviteUsers.tsx
@@ -10,17 +10,22 @@ import InputGroup from 'components/base/forms/InputGroup'
 import OrganisationProvider from 'common/providers/OrganisationProvider'
 import Utils from 'common/utils/utils'
 import _ from 'lodash'
-import AppActions from 'common/dispatcher/app-actions'
 import ErrorMessage from 'components/ErrorMessage'
 import AccountStore from 'common/stores/account-store'
 import { close as closeIcon } from 'ionicons/icons'
 import { MultiValueProps } from 'react-select/lib/components/MultiValue'
 import { useGetGroupsQuery } from 'common/services/useGroup'
+import { useCreateUserInviteMutation } from 'common/services/useInvites'
+import { Req } from 'common/types/requests'
 
 interface Invite {
   temporaryId: string
-  emailAddress?: string
-  role?: string
+  emailAddress: string
+  role?: {
+    isDisabled: boolean
+    label: React.ReactNode
+    value: string
+  }
   groups?: number[]
 }
 
@@ -49,8 +54,10 @@ const CustomMultiValue = (props: MultiValueProps<GroupOption>) => {
 type GroupOption = { label: string; value: number }
 
 const InviteUsers: FC = () => {
+  const [createUserInvite, { isLoading }] = useCreateUserInviteMutation()
+
   const [invites, setInvites] = useState<Invite[]>([
-    { temporaryId: Utils.GUID() },
+    { emailAddress: '', temporaryId: Utils.GUID() },
   ])
   const inputRef = useRef<HTMLInputElement>(null)
 
@@ -102,9 +109,18 @@ const InviteUsers: FC = () => {
     setInvites(invites.filter((invite) => invite.temporaryId !== id))
   }
 
-  const close = (invites: Omit<Invite, 'temporaryId'>[]): void => {
-    AppActions.inviteUsers(invites)
-    closeModal()
+  const getPayload = (
+    invites: Omit<Invite, 'temporaryId'>[],
+    orgId: number,
+  ): Req['createUserInvite'] => {
+    return {
+      invites: invites.map((invite) => ({
+        email: invite.emailAddress,
+        permission_groups: invite.groups ?? [],
+        role: invite.role?.value ?? '',
+      })),
+      organisationId: orgId,
+    }
   }
 
   return (
@@ -114,7 +130,14 @@ const InviteUsers: FC = () => {
           <form
             onSubmit={(e) => {
               e.preventDefault()
-              AppActions.inviteUsers(invites)
+              createUserInvite(getPayload(invites, orgId))
+                .then(() => {
+                  toast('Invite sent successfully')
+                })
+                .catch((error) => {
+                  toast('Error sending invite', 'error')
+                  console.error(error)
+                })
             }}
           >
             <div
@@ -249,10 +272,13 @@ const InviteUsers: FC = () => {
                   theme='outline'
                   size='small'
                   id='btn-add-invite'
-                  disabled={isSaving || !isValid()}
+                  disabled={isSaving || isLoading || !isValid()}
                   type='button'
                   onClick={() =>
-                    setInvites([...invites, { temporaryId: Utils.GUID() }])
+                    setInvites([
+                      ...invites,
+                      { emailAddress: '', temporaryId: Utils.GUID() },
+                    ])
                   }
                 >
                   <Row>
@@ -286,11 +312,7 @@ const InviteUsers: FC = () => {
               <Button
                 id='btn-send-invite'
                 disabled={isSaving || !isValid()}
-                onClick={() =>
-                  close(
-                    invites.map(({ temporaryId, ...rest }) => ({ ...rest })),
-                  )
-                }
+                onClick={() => closeModal()}
                 type='submit'
               >
                 {isSaving ? 'Sending' : 'Send Invitation'}
diff --git a/frontend/web/components/pages/UsersAndPermissionsPage.tsx b/frontend/web/components/pages/UsersAndPermissionsPage.tsx
