feat: onboarding & profile edition (#507)

* feat: wip onboarding

* fix: generate graphql front

* wip: onboarding

* feat: login/register and edit profile

* fix: unused import

* fix: test

* Use DEBUG_MODE instead of STAGE and mute typescript depth exceed errors

* Fix seeds

* Fix onboarding when coming from google

* Fix

* Fix lint

* Fix ci

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/pages/settings/SettingsProfile.tsx

@@ -1,4 +1,7 @@
+import { useEffect, useState } from 'react';
+import { getOperationName } from '@apollo/client/utilities';
 import styled from '@emotion/styled';
+import debounce from 'lodash.debounce';
 import { useRecoilValue } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
@@ -7,6 +10,8 @@ import { TextInput } from '@/ui/components/inputs/TextInput';
 import { MainSectionTitle } from '@/ui/components/section-titles/MainSectionTitle';
 import { SubSectionTitle } from '@/ui/components/section-titles/SubSectionTitle';
 import { NoTopBarContainer } from '@/ui/layout/containers/NoTopBarContainer';
+import { GET_CURRENT_USER } from '@/users/services';
+import { useUpdateUserMutation } from '~/generated/graphql';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -34,6 +39,57 @@ const StyledComboInputContainer = styled.div`
 
 export function SettingsProfile() {
   const currentUser = useRecoilValue(currentUserState);
+
+  const [firstName, setFirstName] = useState(currentUser?.firstName ?? '');
+  const [lastName, setLastName] = useState(currentUser?.lastName ?? '');
+
+  const [updateUser] = useUpdateUserMutation();
+
+  // TODO: Enhance this with react-hook-form (https://www.react-hook-form.com)
+  const debouncedUpdate = debounce(async () => {
+    try {
+      if (!currentUser?.id) {
+        throw new Error('User is not logged in');
+      }
+
+      const { data, errors } = await updateUser({
+        variables: {
+          where: {
+            id: currentUser?.id,
+          },
+          data: {
+            firstName: {
+              set: firstName,
+            },
+            lastName: {
+              set: lastName,
+            },
+          },
+        },
+        refetchQueries: [getOperationName(GET_CURRENT_USER) ?? ''],
+      });
+
+      if (errors || !data?.updateUser) {
+        throw errors;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }, 500);
+
+  useEffect(() => {
+    if (
+      currentUser?.firstName !== firstName ||
+      currentUser?.lastName !== lastName
+    ) {
+      debouncedUpdate();
+    }
+
+    return () => {
+      debouncedUpdate.cancel();
+    };
+  }, [firstName, lastName, currentUser, debouncedUpdate]);
+
   return (
     <NoTopBarContainer>
       <StyledContainer>
@@ -50,13 +106,15 @@ export function SettingsProfile() {
           <StyledComboInputContainer>
             <TextInput
               label="First Name"
-              value={currentUser?.displayName}
+              value={firstName}
+              onChange={setFirstName}
               placeholder="Tim"
               fullWidth
             />
             <TextInput
               label="Last Name"
-              value=""
+              value={lastName}
+              onChange={setLastName}
               placeholder="Cook"
               fullWidth
             />