Refactor Views by cleaning the code, relying on apolloCache and improving performances (#4516)

* Wip refactoring view

* Post merge conflicts

* Fix review

* Add create view capability

* Fix create object missing view

* Fix tests

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarAccountsListCard.tsx

@@ -20,7 +20,7 @@ const StyledRowRightContainer = styled.div`
 `;
 
 export const SettingsAccountsCalendarAccountsListCard = () => {
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const navigate = useNavigate();
 
   const { records: _accounts, loading } = useFindManyRecords<ConnectedAccount>({

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsAccountsListCard.tsx

@@ -20,7 +20,7 @@ const StyledRowRightContainer = styled.div`
 `;
 
 export const SettingsAccountsEmailsAccountsListCard = () => {
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const navigate = useNavigate();
 
   const { records: accounts, loading: accountsLoading } =

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsBlocklistSection.tsx

@@ -12,7 +12,7 @@ import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Section } from '@/ui/layout/section/components/Section';
 
 export const SettingsAccountsEmailsBlocklistSection = () => {
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
 
   const { records: blocklist } = useFindManyRecords<BlocklistItem>({
     objectNameSingular: CoreObjectNameSingular.Blocklist,

packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx

@@ -37,7 +37,7 @@ export const SettingsNavigationDrawerItems = () => {
   }, [signOut, navigate]);
 
   const isCalendarEnabled = useIsFeatureEnabled('IS_CALENDAR_ENABLED');
-  const billing = useRecoilValue(billingState());
+  const billing = useRecoilValue(billingState);
 
   return (
     <>

packages/twenty-front/src/modules/settings/profile/components/ChangePassword.tsx

@@ -9,7 +9,7 @@ import { useEmailPasswordResetLinkMutation } from '~/generated/graphql';
 export const ChangePassword = () => {
   const { enqueueSnackBar } = useSnackBar();
 
-  const currentUser = useRecoilValue(currentUserState());
+  const currentUser = useRecoilValue(currentUserState);
 
   const [emailPasswordResetLink] = useEmailPasswordResetLinkMutation();
 

packages/twenty-front/src/modules/settings/profile/components/DeleteAccount.tsx

@@ -15,7 +15,7 @@ export const DeleteAccount = () => {
     useState(false);
 
   const [deleteUserAccount] = useDeleteUserAccountMutation();
-  const currentUser = useRecoilValue(currentUserState());
+  const currentUser = useRecoilValue(currentUserState);
   const userEmail = currentUser?.email;
   const { signOut } = useAuth();
   const navigate = useNavigate();

packages/twenty-front/src/modules/settings/profile/components/DeleteWorkspace.tsx

@@ -17,7 +17,7 @@ export const DeleteWorkspace = () => {
     useState(false);
 
   const [deleteCurrentWorkspace] = useDeleteCurrentWorkspaceMutation();
-  const currentUser = useRecoilValue(currentUserState());
+  const currentUser = useRecoilValue(currentUserState);
   const userEmail = currentUser?.email;
   const { signOut } = useAuth();
   const navigate = useNavigate();

packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx

@@ -4,7 +4,7 @@ import { currentUserState } from '@/auth/states/currentUserState';
 import { TextInput } from '@/ui/input/components/TextInput';
 
 export const EmailField = () => {
-  const currentUser = useRecoilValue(currentUserState());
+  const currentUser = useRecoilValue(currentUserState);
 
   return (
     <TextInput

packages/twenty-front/src/modules/settings/profile/components/NameFields.tsx

@@ -29,9 +29,9 @@ export const NameFields = ({
   onFirstNameUpdate,
   onLastNameUpdate,
 }: NameFieldsProps) => {
-  const currentUser = useRecoilValue(currentUserState());
+  const currentUser = useRecoilValue(currentUserState);
   const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState(
-    currentWorkspaceMemberState(),
+    currentWorkspaceMemberState,
   );
 
   const [firstName, setFirstName] = useState(

packages/twenty-front/src/modules/settings/profile/components/ProfilePictureUploader.tsx

@@ -15,7 +15,7 @@ export const ProfilePictureUploader = () => {
     useUploadProfilePictureMutation();
 
   const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState(
-    currentWorkspaceMemberState(),
+    currentWorkspaceMemberState,
   );
 
   const [uploadController, setUploadController] =

packages/twenty-front/src/modules/settings/workspace/components/NameField.tsx

@@ -27,7 +27,7 @@ export const NameField = ({
   autoSave = true,
   onNameUpdate,
 }: NameFieldProps) => {
-  const currentWorkspace = useRecoilValue(currentWorkspaceState());
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
   const [displayName, setDisplayName] = useState(
     currentWorkspace?.displayName ?? '',

packages/twenty-front/src/modules/settings/workspace/components/ToggleImpersonate.tsx

@@ -9,7 +9,7 @@ export const ToggleImpersonate = () => {
   const { enqueueSnackBar } = useSnackBar();
 
   const [currentWorkspace, setCurrentWorkspace] = useRecoilState(
-    currentWorkspaceState(),
+    currentWorkspaceState,
   );
 
   const [updateWorkspace] = useUpdateWorkspaceMutation();

packages/twenty-front/src/modules/settings/workspace/components/WorkspaceLogoUploader.tsx

@@ -13,7 +13,7 @@ export const WorkspaceLogoUploader = () => {
   const [uploadLogo] = useUploadWorkspaceLogoMutation();
   const [updateWorkspce] = useUpdateWorkspaceMutation();
   const [currentWorkspace, setCurrentWorkspace] = useRecoilState(
-    currentWorkspaceState(),
+    currentWorkspaceState,
   );
 
   const onUpload = async (file: File) => {