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/auth/CreateProfile.tsx

@@ -1,14 +1,22 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useNavigate } from 'react-router-dom';
+import { getOperationName } from '@apollo/client/utilities';
 import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
 
 import { SubTitle } from '@/auth/components/ui/SubTitle';
 import { Title } from '@/auth/components/ui/Title';
+import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus';
+import { currentUserState } from '@/auth/states/currentUserState';
+import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
+import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
 import { MainButton } from '@/ui/components/buttons/MainButton';
 import { ImageInput } from '@/ui/components/inputs/ImageInput';
 import { TextInput } from '@/ui/components/inputs/TextInput';
 import { SubSectionTitle } from '@/ui/components/section-titles/SubSectionTitle';
+import { GET_CURRENT_USER } from '@/users/services';
+import { useUpdateUserMutation } from '~/generated/graphql';
 
 const StyledContentContainer = styled.div`
   width: 100%;
@@ -37,10 +45,58 @@ const StyledComboInputContainer = styled.div`
 
 export function CreateProfile() {
   const navigate = useNavigate();
+  const onboardingStatus = useOnboardingStatus();
+
+  const [currentUser] = useRecoilState(currentUserState);
+  const [, setCaptureHotkeyTypeInFocus] = useRecoilState(
+    captureHotkeyTypeInFocusState,
+  );
+
+  const [updateUser] = useUpdateUserMutation();
+
+  const [firstName, setFirstName] = useState('');
+  const [lastName, setLastName] = useState('');
 
   const handleCreate = useCallback(async () => {
-    navigate('/');
-  }, [navigate]);
+    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;
+      }
+
+      setCaptureHotkeyTypeInFocus(false);
+      navigate('/');
+    } catch (error) {
+      console.error(error);
+    }
+  }, [
+    currentUser?.id,
+    firstName,
+    lastName,
+    navigate,
+    setCaptureHotkeyTypeInFocus,
+    updateUser,
+  ]);
 
   useHotkeys(
     'enter',
@@ -54,10 +110,20 @@ export function CreateProfile() {
     [handleCreate],
   );
 
+  useEffect(() => {
+    if (onboardingStatus !== OnboardingStatus.OngoingProfileCreation) {
+      navigate('/');
+    }
+  }, [onboardingStatus, navigate]);
+
+  useEffect(() => {
+    setCaptureHotkeyTypeInFocus(true);
+  }, [setCaptureHotkeyTypeInFocus]);
+
   return (
     <>
       <Title>Create profile</Title>
-      <SubTitle>How you'll be identify on the app.</SubTitle>
+      <SubTitle>How you'll be identified on the app.</SubTitle>
       <StyledContentContainer>
         <StyledSectionContainer>
           <SubSectionTitle title="Picture" />
@@ -71,21 +137,28 @@ export function CreateProfile() {
           <StyledComboInputContainer>
             <TextInput
               label="First Name"
-              value=""
+              value={firstName}
               placeholder="Tim"
+              onChange={setFirstName}
               fullWidth
             />
             <TextInput
               label="Last Name"
-              value=""
+              value={lastName}
               placeholder="Cook"
+              onChange={setLastName}
               fullWidth
             />
           </StyledComboInputContainer>
         </StyledSectionContainer>
       </StyledContentContainer>
       <StyledButtonContainer>
-        <MainButton title="Continue" onClick={handleCreate} fullWidth />
+        <MainButton
+          title="Continue"
+          onClick={handleCreate}
+          disabled={!firstName || !lastName}
+          fullWidth
+        />
       </StyledButtonContainer>
     </>
   );