diff --git a/packages/web/src/hooks/useAdminCreateUser.js b/packages/web/src/hooks/useAdminCreateUser.js new file mode 100644 index 00000000..ff601825 --- /dev/null +++ b/packages/web/src/hooks/useAdminCreateUser.js @@ -0,0 +1,21 @@ +import { useMutation, useQueryClient } from '@tanstack/react-query'; +import api from 'helpers/api'; + +export default function useAdminCreateUser() { + const queryClient = useQueryClient(); + + const query = useMutation({ + mutationFn: async (payload) => { + const { data } = await api.post('/v1/admin/users', payload); + + return data; + }, + onSuccess: () => { + queryClient.invalidateQueries({ + queryKey: ['admin', 'users'], + }); + }, + }); + + return query; +} diff --git a/packages/web/src/pages/CreateUser/index.jsx b/packages/web/src/pages/CreateUser/index.jsx index 00eb626d..d3b323ff 100644 --- a/packages/web/src/pages/CreateUser/index.jsx +++ b/packages/web/src/pages/CreateUser/index.jsx @@ -1,4 +1,3 @@ -import { useMutation } from '@apollo/client'; import LoadingButton from '@mui/lab/LoadingButton'; import Grid from '@mui/material/Grid'; import Stack from '@mui/material/Stack'; @@ -14,9 +13,9 @@ import ControlledAutocomplete from 'components/ControlledAutocomplete'; import Form from 'components/Form'; import PageTitle from 'components/PageTitle'; import TextField from 'components/TextField'; -import { CREATE_USER } from 'graphql/mutations/create-user.ee'; import useFormatMessage from 'hooks/useFormatMessage'; import useRoles from 'hooks/useRoles.ee'; +import useAdminCreateUser from 'hooks/useAdminCreateUser'; function generateRoleOptions(roles) { return roles?.map(({ name: label, id: value }) => ({ label, value })); @@ -24,7 +23,11 @@ function generateRoleOptions(roles) { export default function CreateUser() { const formatMessage = useFormatMessage(); - const [createUser, { loading, data }] = useMutation(CREATE_USER); + const { + mutateAsync: createUser, + isPending: isCreateUserPending, + data: createdUser, + } = useAdminCreateUser(); const { data: rolesData, loading: isRolesLoading } = useRoles(); const roles = rolesData?.data; const enqueueSnackbar = useEnqueueSnackbar(); @@ -33,17 +36,13 @@ export default function CreateUser() { const handleUserCreation = async (userData) => { try { await createUser({ - variables: { - input: { - fullName: userData.fullName, - email: userData.email, - role: { - id: userData.role?.id, - }, - }, - }, + fullName: userData.fullName, + email: userData.email, + roleId: userData.role?.id, }); + queryClient.invalidateQueries({ queryKey: ['admin', 'users'] }); + enqueueSnackbar(formatMessage('createUser.successfullyCreated'), { variant: 'success', persist: true, @@ -107,13 +106,13 @@ export default function CreateUser() { variant="contained" color="primary" sx={{ boxShadow: 2 }} - loading={loading} + loading={isCreateUserPending} data-test="create-button" > {formatMessage('createUser.submit')} - {data && ( + {createdUser && ( ( - {data.createUser.acceptInvitationUrl} + {createdUser.data.acceptInvitationUrl} ), })}