feat: use REST API endpoint to update user

packages/web/src/hooks/useAdminUpdateUser.js

@@ -0,0 +1,21 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useAdminUpdateRole(userId) {
+  const queryClient = useQueryClient();
+
+  const query = useMutation({
+    mutationFn: async (payload) => {
+      const { data } = await api.patch(`/v1/admin/users/${userId}`, payload);
+
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['admin', 'users'],
+      });
+    },
+  });
+
+  return query;
+}

packages/web/src/pages/EditUser/index.jsx

@@ -9,7 +9,6 @@ import MuiTextField from '@mui/material/TextField';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { useQueryClient } from '@tanstack/react-query';
 
 import Can from 'components/Can';
 import Container from 'components/Container';
@@ -18,9 +17,9 @@ import Form from 'components/Form';
 import PageTitle from 'components/PageTitle';
 import TextField from 'components/TextField';
 import * as URLS from 'config/urls';
-import { UPDATE_USER } from 'graphql/mutations/update-user.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useRoles from 'hooks/useRoles.ee';
+import useAdminUpdateUser from 'hooks/useAdminUpdateUser';
 import useAdminUser from 'hooks/useAdminUser';
 
 function generateRoleOptions(roles) {
@@ -29,31 +28,23 @@ function generateRoleOptions(roles) {
 
 export default function EditUser() {
   const formatMessage = useFormatMessage();
-  const [updateUser, { loading }] = useMutation(UPDATE_USER);
   const { userId } = useParams();
+  const { mutateAsync: updateUser, isPending: isAdminUpdateUserPending } =
+    useAdminUpdateUser(userId);
   const { data: userData, isLoading: isUserLoading } = useAdminUser({ userId });
   const user = userData?.data;
   const { data, isLoading: isRolesLoading } = useRoles();
   const roles = data?.data;
   const enqueueSnackbar = useEnqueueSnackbar();
   const navigate = useNavigate();
-  const queryClient = useQueryClient();
 
   const handleUserUpdate = async (userDataToUpdate) => {
     try {
       await updateUser({
-        variables: {
-          input: {
-            id: userId,
-            fullName: userDataToUpdate.fullName,
-            email: userDataToUpdate.email,
-            role: {
-              id: userDataToUpdate.role?.id,
-            },
-          },
-        },
+        fullName: userDataToUpdate.fullName,
+        email: userDataToUpdate.email,
+        roleId: userDataToUpdate.role?.id,
       });
-      queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
 
       enqueueSnackbar(formatMessage('editUser.successfullyUpdated'), {
         variant: 'success',
@@ -142,7 +133,7 @@ export default function EditUser() {
                   variant="contained"
                   color="primary"
                   sx={{ boxShadow: 2 }}
-                  loading={loading}
+                  loading={isAdminUpdateUserPending}
                   data-test="update-button"
                 >
                   {formatMessage('editUser.submit')}