feat: refactor update-current-user mutation with the REST API endpoint

packages/backend/src/graphql/mutation-resolvers.js

@@ -1,6 +1,5 @@
 // Converted mutations
 import verifyConnection from './mutations/verify-connection.js';
-import updateCurrentUser from './mutations/update-current-user.js';
 import generateAuthUrl from './mutations/generate-auth-url.js';
 import resetConnection from './mutations/reset-connection.js';
 import updateConnection from './mutations/update-connection.js';
@@ -9,7 +8,6 @@ const mutationResolvers = {
   generateAuthUrl,
   resetConnection,
   updateConnection,
-  updateCurrentUser,
   verifyConnection,
 };
 

packages/backend/src/graphql/mutations/update-current-user.js

@@ -1,11 +0,0 @@
-const updateCurrentUser = async (_parent, params, context) => {
-  const user = await context.currentUser.$query().patchAndFetch({
-    email: params.input.email,
-    password: params.input.password,
-    fullName: params.input.fullName,
-  });
-
-  return user;
-};
-
-export default updateCurrentUser;

packages/backend/src/graphql/schema.graphql

@@ -5,7 +5,6 @@ type Mutation {
   generateAuthUrl(input: GenerateAuthUrlInput): AuthLink
   resetConnection(input: ResetConnectionInput): Connection
   updateConnection(input: UpdateConnectionInput): Connection
-  updateCurrentUser(input: UpdateCurrentUserInput): User
   verifyConnection(input: VerifyConnectionInput): Connection
 }
 
@@ -223,12 +222,6 @@ input UserRoleInput {
   id: String
 }
 
-input UpdateCurrentUserInput {
-  email: String
-  password: String
-  fullName: String
-}
-
 """
 The `JSONObject` scalar type represents JSON objects as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf).
 """

packages/web/src/components/AcceptInvitationForm/index.jsx

@@ -86,7 +86,6 @@ export default function ResetPasswordForm() {
                   : ''
               }
             />
-
             <TextField
               label={formatMessage(
                 'acceptInvitationForm.confirmPasswordFieldLabel',
@@ -111,7 +110,7 @@ export default function ResetPasswordForm() {
 
             {acceptInvitation.isError && (
               <Alert
-                data-test='accept-invitation-form-error'
+                data-test="accept-invitation-form-error"
                 severity="error"
                 sx={{ mt: 1, fontWeight: 500 }}
               >

packages/web/src/graphql/mutations/update-current-user.js

@@ -1,10 +0,0 @@
-import { gql } from '@apollo/client';
-export const UPDATE_CURRENT_USER = gql`
-  mutation UpdateCurrentUser($input: UpdateCurrentUserInput) {
-    updateCurrentUser(input: $input) {
-      id
-      fullName
-      email
-    }
-  }
-`;

packages/web/src/hooks/useUpdateCurrentUser.js

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

packages/web/src/hooks/useUpdateCurrentUserPassword.js

@@ -0,0 +1,14 @@
+import { useMutation } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useUpdateCurrentUserPassword(userId) {
+  const query = useMutation({
+    mutationFn: async (payload) => {
+      const { data } = await api.patch(`/v1/users/${userId}/password`, payload);
+
+      return data;
+    },
+  });
+
+  return query;
+}

packages/web/src/locales/en.json

@@ -102,7 +102,12 @@
   "profileSettings.fullName": "Full name",
   "profileSettings.email": "Email",
   "profileSettings.updateProfile": "Update your profile",
+  "profileSettings.updatePassword": "Update your password",
   "profileSettings.updatedProfile": "Your profile has been updated.",
+  "profileSettings.updatedPassword": "Your password has been updated.",
+  "profileSettings.updateProfileError": "Something went wrong while updating your profile.",
+  "profileSettings.updatePasswordError": "Something went wrong while updating your password.",
+  "profileSettings.currentPassword": "Current password",
   "profileSettings.newPassword": "New password",
   "profileSettings.confirmNewPassword": "Confirm new password",
   "profileSettings.deleteMyAccount": "Delete my account",

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

@@ -1,4 +1,3 @@
-import { useMutation } from '@apollo/client';
 import { yupResolver } from '@hookform/resolvers/yup';
 import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
@@ -15,19 +14,26 @@ import DeleteAccountDialog from 'components/DeleteAccountDialog/index.ee';
 import Form from 'components/Form';
 import PageTitle from 'components/PageTitle';
 import TextField from 'components/TextField';
-import { UPDATE_CURRENT_USER } from 'graphql/mutations/update-current-user';
 import useCurrentUser from 'hooks/useCurrentUser';
 import useFormatMessage from 'hooks/useFormatMessage';
-import { useQueryClient } from '@tanstack/react-query';
+import useUpdateCurrentUser from 'hooks/useUpdateCurrentUser';
+import useUpdateCurrentUserPassword from 'hooks/useUpdateCurrentUserPassword';
 
-const validationSchema = yup
+const validationSchemaProfile = yup
   .object({
-    fullName: yup.string().required(),
+    fullName: yup.string().required('Full name is required'),
-    email: yup.string().email().required(),
+    email: yup.string().email().required('Email is required'),
-    password: yup.string(),
+  })
+  .required();
+
+const validationSchemaPassword = yup
+  .object({
+    currentPassword: yup.string().required('Current password is required'),
+    password: yup.string().required('New password is required'),
     confirmPassword: yup
       .string()
-      .oneOf([yup.ref('password')], 'Passwords must match'),
+      .oneOf([yup.ref('password')], 'Passwords must match')
+      .required('Confirm password is required'),
   })
   .required();
 
@@ -37,6 +43,24 @@ const StyledForm = styled(Form)`
   flex-direction: column;
 `;
 
+const getErrorMessage = (error) => {
+  const errors = error?.response?.data?.errors || {};
+  const errorMessages = Object.entries(errors)
+    .map(([key, messages]) => {
+      if (Array.isArray(messages) && messages.length) {
+        return `${key} ${messages.join(', ')}`;
+      }
+      if (typeof messages === 'string') {
+        return `${key} ${messages}`;
+      }
+      return '';
+    })
+    .filter((message) => !!message)
+    .join(' ');
+
+  return errorMessages;
+};
+
 function ProfileSettings() {
   const [showDeleteAccountConfirmation, setShowDeleteAccountConfirmation] =
     React.useState(false);
@@ -44,42 +68,65 @@ function ProfileSettings() {
   const { data } = useCurrentUser();
   const currentUser = data?.data;
   const formatMessage = useFormatMessage();
-  const [updateCurrentUser] = useMutation(UPDATE_CURRENT_USER);
+  const { mutateAsync: updateCurrentUser } = useUpdateCurrentUser(
-  const queryClient = useQueryClient();
+    currentUser?.id,
+  );
+  const { mutateAsync: updateCurrentUserPassword } =
+    useUpdateCurrentUserPassword(currentUser?.id);
 
   const handleProfileSettingsUpdate = async (data) => {
-    const { fullName, password, email } = data;
+    try {
-    const mutationInput = {
+      const { fullName, email } = data;
-      fullName,
-      email,
-    };
 
-    if (password) {
+      await updateCurrentUser({ fullName, email });
-      mutationInput.password = password;
-    }
 
-    await updateCurrentUser({
+      enqueueSnackbar(formatMessage('profileSettings.updatedProfile'), {
-      variables: {
+        variant: 'success',
-        input: mutationInput,
+        SnackbarProps: {
-      },
+          'data-test': 'snackbar-update-profile-settings-success',
-      optimisticResponse: {
-        updateCurrentUser: {
-          __typename: 'User',
-          id: currentUser.id,
-          fullName,
-          email,
         },
-      },
+      });
-    });
+    } catch (error) {
+      enqueueSnackbar(
+        getErrorMessage(error) ||
+          formatMessage('profileSettings.updateProfileError'),
+        {
+          variant: 'error',
+          SnackbarProps: {
+            'data-test': 'snackbar-update-profile-settings-error',
+          },
+        },
+      );
+    }
+  };
 
-    await queryClient.invalidateQueries({ queryKey: ['users', 'me'] });
+  const handlePasswordUpdate = async (data) => {
+    try {
+      const { password, currentPassword } = data;
 
-    enqueueSnackbar(formatMessage('profileSettings.updatedProfile'), {
+      await updateCurrentUserPassword({
-      variant: 'success',
+        currentPassword,
-      SnackbarProps: {
+        password,
-        'data-test': 'snackbar-update-profile-settings-success',
+      });
-      },
+
-    });
+      enqueueSnackbar(formatMessage('profileSettings.updatedPassword'), {
+        variant: 'success',
+        SnackbarProps: {
+          'data-test': 'snackbar-update-password-success',
+        },
+      });
+    } catch (error) {
+      enqueueSnackbar(
+        getErrorMessage(error) ||
+          formatMessage('profileSettings.updatePasswordError'),
+        {
+          variant: 'error',
+          SnackbarProps: {
+            'data-test': 'snackbar-update-password-error',
+          },
+        },
+      );
+    }
   };
 
   return (
@@ -93,11 +140,9 @@ function ProfileSettings() {
           <StyledForm
             defaultValues={{
               ...currentUser,
-              password: '',
-              confirmPassword: '',
             }}
             onSubmit={handleProfileSettingsUpdate}
-            resolver={yupResolver(validationSchema)}
+            resolver={yupResolver(validationSchemaProfile)}
             mode="onChange"
             sx={{ mb: 2 }}
             render={({
@@ -117,8 +162,8 @@ function ProfileSettings() {
                   margin="dense"
                   error={touchedFields.fullName && !!errors?.fullName}
                   helperText={errors?.fullName?.message || ' '}
+                  required
                 />
-
                 <TextField
                   fullWidth
                   name="email"
@@ -126,6 +171,57 @@ function ProfileSettings() {
                   margin="dense"
                   error={touchedFields.email && !!errors?.email}
                   helperText={errors?.email?.message || ' '}
+                  required
+                />
+                <Button
+                  variant="contained"
+                  type="submit"
+                  disabled={!isDirty || !isValid || isSubmitting}
+                  data-test="update-profile-button"
+                >
+                  {formatMessage('profileSettings.updateProfile')}
+                </Button>
+              </>
+            )}
+          />
+        </Grid>
+
+        <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 3 }}>
+          <StyledForm
+            defaultValues={{
+              currentPassword: '',
+              password: '',
+              confirmPassword: '',
+            }}
+            onSubmit={handlePasswordUpdate}
+            resolver={yupResolver(validationSchemaPassword)}
+            mode="onChange"
+            sx={{ mb: 2 }}
+            render={({
+              formState: {
+                errors,
+                touchedFields,
+                isDirty,
+                isValid,
+                isSubmitting,
+              },
+            }) => (
+              <>
+                <TextField
+                  fullWidth
+                  name="currentPassword"
+                  label={formatMessage('profileSettings.currentPassword')}
+                  margin="dense"
+                  type="password"
+                  error={
+                    touchedFields.currentPassword && !!errors?.currentPassword
+                  }
+                  helperText={
+                    (touchedFields.currentPassword &&
+                      errors?.currentPassword?.message) ||
+                    ' '
+                  }
+                  required
                 />
 
                 <TextField
@@ -138,8 +234,8 @@ function ProfileSettings() {
                   helperText={
                     (touchedFields.password && errors?.password?.message) || ' '
                   }
+                  required
                 />
-
                 <TextField
                   fullWidth
                   name="confirmPassword"
@@ -154,15 +250,15 @@ function ProfileSettings() {
                       errors?.confirmPassword?.message) ||
                     ' '
                   }
+                  required
                 />
-
                 <Button
                   variant="contained"
                   type="submit"
                   disabled={!isDirty || !isValid || isSubmitting}
-                  data-test="update-profile-button"
+                  data-test="update-password-button"
                 >
-                  {formatMessage('profileSettings.updateProfile')}
+                  {formatMessage('profileSettings.updatePassword')}
                 </Button>
               </>
             )}