[WIP] Whole FE migrated (#2517)

* Wip

* WIP

* Removed concole log

* Add relations to workspace init (#2511)

* Add relations to workspace init

* remove logs

* update prefill

* add missing isSystem

* comment relation fields

* Migrate v2 core models to graphql schema (#2509)

* migrate v2 core models to graphql schema

* Migrate to new workspace member schema

* Continue work

* migrated-main

* Finished accountOwner nested field integration on companies

* Introduce bug

* Fix

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Weiko <corentin@twenty.com>

front/src/modules/settings/profile/components/NameFields.tsx

@@ -5,6 +5,7 @@ import debounce from 'lodash.debounce';
 import { useRecoilValue } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 import { useUpdateUserMutation } from '~/generated/graphql';
@@ -30,9 +31,14 @@ export const NameFields = ({
   onLastNameUpdate,
 }: NameFieldsProps) => {
   const currentUser = useRecoilValue(currentUserState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
 
-  const [firstName, setFirstName] = useState(currentUser?.firstName ?? '');
-  const [lastName, setLastName] = useState(currentUser?.lastName ?? '');
+  const [firstName, setFirstName] = useState(
+    currentWorkspaceMember?.firstName ?? '',
+  );
+  const [lastName, setLastName] = useState(
+    currentWorkspaceMember?.lastName ?? '',
+  );
 
   const [updateUser] = useUpdateUserMutation();
 
@@ -69,13 +75,13 @@ export const NameFields = ({
   }, 500);
 
   useEffect(() => {
-    if (!currentUser) {
+    if (!currentWorkspaceMember) {
       return;
     }
 
     if (
-      currentUser.firstName !== firstName ||
-      currentUser.lastName !== lastName
+      currentWorkspaceMember.firstName !== firstName ||
+      currentWorkspaceMember.lastName !== lastName
     ) {
       debouncedUpdate();
     }
@@ -83,7 +89,14 @@ export const NameFields = ({
     return () => {
       debouncedUpdate.cancel();
     };
-  }, [firstName, lastName, currentUser, debouncedUpdate, autoSave]);
+  }, [
+    firstName,
+    lastName,
+    currentUser,
+    debouncedUpdate,
+    autoSave,
+    currentWorkspaceMember,
+  ]);
 
   return (
     <StyledComboInputContainer>

front/src/modules/settings/profile/components/ProfilePictureUploader.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react';
 import { getOperationName } from '@apollo/client/utilities';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { ImageInput } from '@/ui/input/components/ImageInput';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
@@ -16,6 +17,8 @@ export const ProfilePictureUploader = () => {
     useUploadProfilePictureMutation();
   const [removePicture] = useRemoveProfilePictureMutation();
   const [currentUser] = useRecoilState(currentUserState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+
   const [uploadController, setUploadController] =
     useState<AbortController | null>(null);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -69,7 +72,7 @@ export const ProfilePictureUploader = () => {
 
   return (
     <ImageInput
-      picture={getImageAbsoluteURIOrBase64(currentUser?.avatarUrl)}
+      picture={getImageAbsoluteURIOrBase64(currentWorkspaceMember?.avatarUrl)}
       onUpload={handleUpload}
       onRemove={handleRemove}
       onAbort={handleAbort}

front/src/modules/settings/profile/components/ToggleField.tsx

@@ -1,6 +1,6 @@
 import { useRecoilValue } from 'recoil';
 
-import { currentUserState } from '@/auth/states/currentUserState';
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { useSnackBar } from '@/ui/feedback/snack-bar/hooks/useSnackBar';
 import { Toggle } from '@/ui/input/components/Toggle';
 import { useUpdateAllowImpersonationMutation } from '~/generated/graphql';
@@ -8,7 +8,7 @@ import { useUpdateAllowImpersonationMutation } from '~/generated/graphql';
 export const ToggleField = () => {
   const { enqueueSnackBar } = useSnackBar();
 
-  const currentUser = useRecoilValue(currentUserState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
 
   const [updateAllowImpersonation] = useUpdateAllowImpersonationMutation();
 
@@ -32,7 +32,7 @@ export const ToggleField = () => {
 
   return (
     <Toggle
-      value={currentUser?.workspaceMember?.allowImpersonation}
+      value={currentWorkspaceMember?.allowImpersonation}
       onChange={handleChange}
     />
   );

front/src/modules/settings/workspace/components/NameField.tsx

@@ -2,9 +2,9 @@ import { useCallback, useEffect, useState } from 'react';
 import { getOperationName } from '@apollo/client/utilities';
 import styled from '@emotion/styled';
 import debounce from 'lodash.debounce';
-import { useRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 
-import { currentUserState } from '@/auth/states/currentUserState';
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 import { useUpdateWorkspaceMutation } from '~/generated/graphql';
@@ -27,10 +27,11 @@ export const NameField = ({
   autoSave = true,
   onNameUpdate,
 }: NameFieldProps) => {
-  const [currentUser] = useRecoilState(currentUserState);
-  const workspace = currentUser?.workspaceMember?.workspace;
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
-  const [displayName, setDisplayName] = useState(workspace?.displayName ?? '');
+  const [displayName, setDisplayName] = useState(
+    currentWorkspace?.displayName ?? '',
+  );
 
   const [updateWorkspace] = useUpdateWorkspaceMutation();
 

front/src/modules/settings/workspace/components/WorkspaceLogoUploader.tsx

@@ -1,7 +1,7 @@
 import { getOperationName } from '@apollo/client/utilities';
-import { useRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 
-import { currentUserState } from '@/auth/states/currentUserState';
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { ImageInput } from '@/ui/input/components/ImageInput';
 import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
 import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
@@ -13,7 +13,8 @@ import {
 export const WorkspaceLogoUploader = () => {
   const [uploadLogo] = useUploadWorkspaceLogoMutation();
   const [removeLogo] = useRemoveWorkspaceLogoMutation();
-  const [currentUser] = useRecoilState(currentUserState);
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+
   const onUpload = async (file: File) => {
     if (!file) {
       return;
@@ -34,9 +35,7 @@ export const WorkspaceLogoUploader = () => {
 
   return (
     <ImageInput
-      picture={getImageAbsoluteURIOrBase64(
-        currentUser?.workspaceMember?.workspace.logo,
-      )}
+      picture={getImageAbsoluteURIOrBase64(currentWorkspace?.logo)}
       onUpload={onUpload}
       onRemove={onRemove}
     />