Merge pull request #1036 from automatisch/update-full-name-in-profile-page

feat(ProfileSettings): add capability to update user full name

packages/backend/src/graphql/mutations/update-user.ts

@@ -4,6 +4,7 @@ type Params = {
   input: {
     email: string;
     password: string;
+    fullName: string;
   };
 };
 
@@ -15,6 +16,7 @@ const updateUser = async (
   const user = await context.currentUser.$query().patchAndFetch({
     email: params.input.email,
     password: params.input.password,
+    fullName: params.input.fullName,
   });
 
   return user;

packages/backend/src/graphql/schema.graphql

@@ -351,6 +351,7 @@ input CreateUserInput {
 input UpdateUserInput {
   email: String
   password: String
+  fullName: String
 }
 
 input ForgotPasswordInput {

packages/web/src/graphql/mutations/update-user.ts

@@ -4,8 +4,8 @@ export const UPDATE_USER = gql`
   mutation UpdateUser($input: UpdateUserInput) {
     updateUser(input: $input) {
       id
+      fullName
       email
-      updatedAt
     }
   }
 `;

packages/web/src/graphql/queries/get-current-user.ts

@@ -6,8 +6,6 @@ export const GET_CURRENT_USER = gql`
       id
       fullName
       email
-      createdAt
-      updatedAt
     }
   }
 `;

packages/web/src/locales/en.json

@@ -83,13 +83,12 @@
   "execution.noDataTitle": "No data",
   "execution.noDataMessage": "We successfully ran the execution, but there was no new data to process.",
   "profileSettings.title": "My Profile",
+  "profileSettings.fullName": "Full name",
   "profileSettings.email": "Email",
-  "profileSettings.updateEmail": "Update email",
+  "profileSettings.updateProfile": "Update your profile",
+  "profileSettings.updatedProfile": "Your profile has been updated.",
   "profileSettings.newPassword": "New password",
   "profileSettings.confirmNewPassword": "Confirm new password",
-  "profileSettings.updatedEmail": "Your email has been updated.",
-  "profileSettings.updatedPassword": "Your password has been updated.",
-  "profileSettings.updatePassword": "Update password",
   "profileSettings.deleteMyAccount": "Delete my account",
   "profileSettings.deleteAccount": "Delete account",
   "profileSettings.deleteAccountSubtitle": "This will permanently delete...",
@@ -154,4 +153,4 @@
   "invoices.amount": "Amount",
   "invoices.invoice": "Invoice",
   "invoices.link": "Link"
-}
+}

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

@@ -19,18 +19,19 @@ import { UPDATE_USER } from 'graphql/mutations/update-user';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCurrentUser from 'hooks/useCurrentUser';
 
-const emailValidationSchema = yup
+type TMutationInput = {
-  .object({
+  fullName: string;
-    email: yup.string().email().required(),
+  email: string;
-  })
+  password?: string;
-  .required();
+}
 
-const passwordValidationSchema = yup
+const validationSchema = yup
   .object({
-    password: yup.string().required(),
+    fullName: yup.string().required(),
+    email: yup.string().email().required(),
+    password: yup.string(),
     confirmPassword: yup
       .string()
-      .required()
       .oneOf([yup.ref('password')], 'Passwords must match'),
   })
   .required();
@@ -43,54 +44,42 @@ const StyledForm = styled(Form)`
 
 function ProfileSettings() {
   const [showDeleteAccountConfirmation, setShowDeleteAccountConfirmation] = React.useState(false);
-  const [passwordDefaultValues, setPasswordDefaultValues] = React.useState({});
   const { enqueueSnackbar } = useSnackbar();
   const currentUser = useCurrentUser();
   const formatMessage = useFormatMessage();
   const [updateUser] = useMutation(UPDATE_USER);
 
-  const handleEmailUpdate = async (data: any) => {
+  const handleProfileSettingsUpdate = async (data: any) => {
-    const email = data.email;
+    const { fullName, password, email } = data;
+
+    const mutationInput: TMutationInput = {
+      fullName,
+      email,
+    }
+
+    if (password) {
+      mutationInput.password = password;
+    }
 
     await updateUser({
       variables: {
-        input: {
+        input: mutationInput,
-          email,
-        },
       },
       optimisticResponse: {
         updateUser: {
           __typename: 'User',
+          id: currentUser.id,
+          fullName,
           email,
         },
       },
     });
 
-    enqueueSnackbar(formatMessage('profileSettings.updatedEmail'), {
+    enqueueSnackbar(formatMessage('profileSettings.updatedProfile'), {
       variant: 'success',
     });
   };
 
-  const handlePasswordUpdate = async (data: any) => {
-    const password = data.password;
-
-    setPasswordDefaultValues({
-      password,
-      confirmPassword: data.confirmPassword,
-    });
-
-    await updateUser({
-      variables: {
-        input: {
-          password,
-        },
-      },
-    });
-
-    enqueueSnackbar(formatMessage('profileSettings.updatedPassword'), {
-      variant: 'success',
-    });
-  };
 
   return (
     <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
@@ -100,10 +89,10 @@ function ProfileSettings() {
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end">
-          <StyledForm
+        <StyledForm
-            defaultValues={{ ...currentUser}}
+            defaultValues={{ ...currentUser, password: '', confirmPassword: '' }}
-            onSubmit={handleEmailUpdate}
+            onSubmit={handleProfileSettingsUpdate}
-            resolver={yupResolver(emailValidationSchema)}
+            resolver={yupResolver(validationSchema)}
             mode="onChange"
             sx={{ mb: 2 }}
             render={({
@@ -116,50 +105,33 @@ function ProfileSettings() {
               },
             }) => (
               <>
+                <TextField
+                  fullWidth
+                  name="fullName"
+                  label={formatMessage('profileSettings.fullName')}
+                  margin='dense'
+                  error={touchedFields.fullName && !!errors?.fullName}
+                  helperText={errors?.fullName?.message || ' '}
+                />
+
                 <TextField
                   fullWidth
                   name="email"
                   label={formatMessage('profileSettings.email')}
-                  margin="normal"
+                  margin='dense'
                   error={touchedFields.email && !!errors?.email}
                   helperText={errors?.email?.message || ' '}
                 />
 
-                <Button
-                  variant="contained"
-                  type="submit"
-                  disabled={!isDirty || !isValid || isSubmitting}
-                >
-                  {formatMessage('profileSettings.updateEmail')}
-                </Button>
-              </>
-            )}
-          />
-
-          <StyledForm
-            defaultValues={passwordDefaultValues}
-            onSubmit={handlePasswordUpdate}
-            resolver={yupResolver(passwordValidationSchema)}
-            mode="onChange"
-            render={({
-              formState: {
-                errors,
-                touchedFields,
-                isDirty,
-                isValid,
-                isSubmitting,
-              },
-            }) => (
-              <>
                 <TextField
                   fullWidth
                   name="password"
                   label={formatMessage('profileSettings.newPassword')}
-                  margin="normal"
+                  margin='dense'
                   type="password"
                   error={touchedFields.password && !!errors?.password}
                   helperText={
-                    (touchedFields.password && errors?.password?.message) || ''
+                    (touchedFields.password && errors?.password?.message) || ' '
                   }
                 />
 
@@ -167,7 +139,7 @@ function ProfileSettings() {
                   fullWidth
                   name="confirmPassword"
                   label={formatMessage('profileSettings.confirmNewPassword')}
-                  margin="normal"
+                  margin='dense'
                   type="password"
                   error={
                     touchedFields.confirmPassword && !!errors?.confirmPassword
@@ -184,7 +156,7 @@ function ProfileSettings() {
                   type="submit"
                   disabled={!isDirty || !isValid || isSubmitting}
                 >
-                  {formatMessage('profileSettings.updatePassword')}
+                  {formatMessage('profileSettings.updateProfile')}
                 </Button>
               </>
             )}