Add profile display name in account section

pages/account/info.tsx

@@ -1,10 +1,13 @@
+import { useMutation } from '@tanstack/react-query';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { FunctionComponent, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
 import AccountHeader from '../../components/account-header';
 import AccountMenu from '../../components/account-menu';
 import LoadingPage from '../../components/loading-page';
 import Meta from '../../components/meta';
+import Spinner from '../../components/spinner';
 import { planNames } from '../../constants/plans';
 import Layout from '../../layout/layout';
 import { useAuth } from '../../utils/auth';
@@ -22,9 +25,18 @@ const providerNames = {
 };
 
 const AccountInfo: FunctionComponent = function () {
-  const { isAuth, user, isLoading: isAuthLoading } = useAuth();
+  const { isAuth, user, isLoading: isAuthLoading, getIdToken } = useAuth();
   const router = useRouter();
   const { data: userData } = useCurrentUser();
+  const {
+    register: registerFormField,
+    getValues,
+    handleSubmit,
+    reset,
+    setError,
+    clearErrors,
+    formState: { isSubmitting, isSubmitSuccessful, errors }
+  } = useForm();
 
   useEffect(() => {
     if (!isAuthLoading) {
@@ -36,6 +48,49 @@ const AccountInfo: FunctionComponent = function () {
     }
   }, [isAuthLoading, user, isAuth]);
 
+  useEffect(() => {
+    if (userData) {
+      reset({ displayName: userData?.['displayName'] });
+    }
+  }, [userData]);
+
+  const {
+    mutate: updateProfile,
+    isError: isUpdateProfileError,
+    isPending: isUpdatingProfile
+  } = useMutation({
+    mutationFn: async () => {
+      clearErrors();
+
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_BACKEND_URL}/user/profile`,
+        {
+          body: JSON.stringify(getValues()),
+          method: 'PUT',
+          headers: {
+            Authorization: `Bearer ${await getIdToken()}`,
+            'Content-Type': 'application/json'
+          }
+        }
+      );
+
+      if (response.status !== 204) {
+        const data = await response.json();
+
+        throw new Error(data.message);
+      }
+    },
+    onError: (error) => {
+      setError('root.error', {
+        message: 'Something went wrong',
+        type: 'custom'
+      });
+    },
+    onSuccess: (data) => {
+      clearErrors();
+    }
+  });
+
   return (
     <Layout footerBanner='download'>
       <Meta title={meta.title} description={meta.description} />
@@ -114,6 +169,65 @@ const AccountInfo: FunctionComponent = function () {
                     </div>
                   </div>
 
+                  <div className='card card-bleed shadow-light-lg mb-6'>
+                    <div className='card-header'>
+                      <div className='row align-items-center'>
+                        <div className='col'>
+                          <h4 className='mb-0'>Profile</h4>
+                          <small className='text-gray-700'>
+                            The display name will be used in the desktop
+                            application when using team collaboration
+                          </small>
+                        </div>
+                      </div>
+                    </div>
+                    <div className='card-body'>
+                      <form
+                        onSubmit={(e) => {
+                          clearErrors();
+                          handleSubmit(() => {
+                            updateProfile();
+                          })(e);
+                        }}
+                      >
+                        <div className='form-group'>
+                          <label className='form-label' htmlFor='displayName'>
+                            Display name
+                          </label>
+                          <input
+                            className='form-control'
+                            id='displayName'
+                            type='text'
+                            {...registerFormField('displayName')}
+                          />
+                        </div>
+
+                        <div className='d-flex align-items-center'>
+                          <button
+                            className='btn btn-xs btn-primary-subtle me-4'
+                            type='submit'
+                            disabled={isSubmitting}
+                          >
+                            Save
+                          </button>
+                          {isSubmitting && <Spinner />}
+                          {!isUpdatingProfile && errors.root?.error && (
+                            <div className='col-auto text-danger text-center fw-bold'>
+                              Something went wrong, please try again later
+                            </div>
+                          )}
+                          {!isUpdatingProfile &&
+                            isSubmitSuccessful &&
+                            !isUpdateProfileError && (
+                              <div className='col-auto text-success text-center fw-bold'>
+                                Profile updated
+                              </div>
+                            )}
+                        </div>
+                      </form>
+                    </div>
+                  </div>
+
                   <div className='card card-bleed shadow-light-lg mb-6'>
                     <div className='card-header'>
                       <div className='row align-items-center'>