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

@@ -43,7 +43,7 @@ const StyledBenefitsContainer = styled.div`
 `;
 
 export const ChooseYourPlan = () => {
-  const billing = useRecoilValue(billingState());
+  const billing = useRecoilValue(billingState);
 
   const [planSelected, setPlanSelected] = useState('month');
 

packages/twenty-front/src/pages/auth/CreateProfile.tsx

@@ -58,7 +58,7 @@ export const CreateProfile = () => {
   const { enqueueSnackBar } = useSnackBar();
 
   const [currentWorkspaceMember, setCurrentWorkspaceMember] = useRecoilState(
-    currentWorkspaceMemberState(),
+    currentWorkspaceMemberState,
   );
 
   const { updateOneRecord } = useUpdateOneRecord<WorkspaceMember>({

packages/twenty-front/src/pages/auth/VerifyEffect.tsx

@@ -10,7 +10,7 @@ import { AppPath } from '@/types/AppPath';
 export const VerifyEffect = () => {
   const [searchParams] = useSearchParams();
   const loginToken = searchParams.get('loginToken');
-  const currentWorkspace = useRecoilValue(currentWorkspaceState());
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
   const isLogged = useIsLogged();
   const navigate = useNavigate();

packages/twenty-front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx

@@ -21,7 +21,7 @@ const meta: Meta<PageDecoratorArgs> = {
   component: CreateWorkspace,
   decorators: [
     (Story) => {
-      const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState());
+      const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
       setCurrentWorkspace(mockedOnboardingUsersData[1].defaultWorkspace);
       return <Story />;
     },

packages/twenty-front/src/pages/impersonate/ImpersonateEffect.tsx

@@ -14,8 +14,8 @@ export const ImpersonateEffect = () => {
   const navigate = useNavigate();
   const { userId } = useParams();
 
-  const [currentUser, setCurrentUser] = useRecoilState(currentUserState());
-  const setTokenPair = useSetRecoilState(tokenPairState());
+  const [currentUser, setCurrentUser] = useRecoilState(currentUserState);
+  const setTokenPair = useSetRecoilState(tokenPairState);
 
   const [impersonate] = useImpersonateMutation();
 

packages/twenty-front/src/pages/object-record/RecordIndexPageHeader.tsx

@@ -27,7 +27,7 @@ export const RecordIndexPageHeader = ({
     findObjectMetadataItemByNamePlural(objectNamePlural)?.icon,
   );
 
-  const recordIndexViewType = useRecoilValue(recordIndexViewTypeState());
+  const recordIndexViewType = useRecoilValue(recordIndexViewTypeState);
 
   return (
     <PageHeader title={capitalize(objectNamePlural)} Icon={Icon}>

packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx

@@ -42,8 +42,8 @@ export const SettingsWorkspaceMembers = () => {
   const { deleteOneRecord: deleteOneWorkspaceMember } = useDeleteOneRecord({
     objectNameSingular: CoreObjectNameSingular.WorkspaceMember,
   });
-  const currentWorkspace = useRecoilValue(currentWorkspaceState());
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
 
   const handleRemoveWorkspaceMember = async (workspaceMemberId: string) => {
     await deleteOneWorkspaceMember?.(workspaceMemberId);

packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx

@@ -14,7 +14,7 @@ import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { SettingsAccountLoader } from '~/pages/settings/accounts/SettingsAccountLoader';
 
 export const SettingsAccounts = () => {
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
 
   const { records: accounts, loading } = useFindManyRecords<ConnectedAccount>({
     objectNameSingular: 'connectedAccount',

packages/twenty-front/src/pages/settings/accounts/SettingsAccountsCalendars.tsx

@@ -21,7 +21,7 @@ import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { mockedConnectedAccounts } from '~/testing/mock-data/accounts';
 
 export const SettingsAccountsCalendars = () => {
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const { records: _accounts } = useFindManyRecords<ConnectedAccount>({
     objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
     filter: {

packages/twenty-front/src/pages/tasks/TasksEffect.tsx

@@ -13,7 +13,7 @@ type TasksEffectProps = {
 };
 
 export const TasksEffect = ({ filterDropdownId }: TasksEffectProps) => {
-  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState());
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
   const {
     setSelectedFilter,
     setAvailableFilterDefinitions,