Refacto views (#10272)

In this huge (sorry!) PR:
- introducing objectMetadataItem in contextStore instead of
objectMetadataId which is more convenient
- splitting some big hooks into smaller parts to avoid re-renders
- removing Effects to avoid re-renders (especially onViewChange)
- making the view prefetch separate from favorites to avoid re-renders
- making the view prefetch load a state and add selectors on top of it
to avoir re-renders

As a result, the performance is WAY better (I suspect the favorite
implementation to trigger a lot of re-renders unfortunately).
However, we are still facing a random app freeze on view creation. I
could not investigate the root cause. As this seems to be already there
in the precedent release, we can move forward but this seems a urgent
follow up to me ==> EDIT: I've found the root cause after a few ours of
deep dive... an infinite loop in RecordTableNoRecordGroupBodyEffect...

prastoin edit: close https://github.com/twentyhq/twenty/issues/10253

---------

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

packages/twenty-front/src/modules/context-store/components/MainContextStoreProviderEffect.tsx

@@ -1,21 +1,27 @@
-import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
+import { contextStoreCurrentObjectMetadataItemComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemComponentState';
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
+import { contextStoreCurrentViewTypeComponentState } from '@/context-store/states/contextStoreCurrentViewTypeComponentState';
 import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId';
+import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
 import { useSetLastVisitedObjectMetadataId } from '@/navigation/hooks/useSetLastVisitedObjectMetadataId';
 import { useSetLastVisitedViewForObjectMetadataNamePlural } from '@/navigation/hooks/useSetLastVisitedViewForObjectMetadataNamePlural';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { prefetchViewFromViewIdFamilySelector } from '@/prefetch/states/selector/prefetchViewFromViewIdFamilySelector';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import { ViewType } from '@/views/types/ViewType';
 import { useEffect } from 'react';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 export const MainContextStoreProviderEffect = ({
   mainContextStoreComponentInstanceIdToSet,
   viewId,
   objectMetadataItem,
+  pageName,
 }: {
   mainContextStoreComponentInstanceIdToSet: string;
-  viewId: string;
+  viewId?: string;
   objectMetadataItem: ObjectMetadataItem;
+  pageName: string;
 }) => {
   const [
     mainContextStoreComponentInstanceId,
@@ -34,17 +40,29 @@ export const MainContextStoreProviderEffect = ({
       mainContextStoreComponentInstanceId,
     );
 
+  const [contextStoreCurrentViewType, setContextStoreCurrentViewType] =
+    useRecoilComponentStateV2(
+      contextStoreCurrentViewTypeComponentState,
+      mainContextStoreComponentInstanceId,
+    );
+
   const [
-    contextStoreCurrentObjectMetadataId,
-    setContextStoreCurrentObjectMetadataId,
+    contextStoreCurrentObjectMetadataItem,
+    setContextStoreCurrentObjectMetadataItem,
   ] = useRecoilComponentStateV2(
-    contextStoreCurrentObjectMetadataIdComponentState,
+    contextStoreCurrentObjectMetadataItemComponentState,
     mainContextStoreComponentInstanceId,
   );
 
+  const view = useRecoilValue(
+    prefetchViewFromViewIdFamilySelector({
+      viewId: viewId ?? '',
+    }),
+  );
+
   useEffect(() => {
-    if (contextStoreCurrentObjectMetadataId !== objectMetadataItem.id) {
-      setContextStoreCurrentObjectMetadataId(objectMetadataItem.id);
+    if (contextStoreCurrentObjectMetadataItem?.id !== objectMetadataItem.id) {
+      setContextStoreCurrentObjectMetadataItem(objectMetadataItem);
     }
 
     if (
@@ -58,7 +76,7 @@ export const MainContextStoreProviderEffect = ({
 
     setLastVisitedViewForObjectMetadataNamePlural({
       objectNamePlural: objectMetadataItem.namePlural,
-      viewId: viewId,
+      viewId: viewId ?? '',
     });
 
     setLastVisitedObjectMetadataId({
@@ -69,13 +87,13 @@ export const MainContextStoreProviderEffect = ({
       setContextStoreCurrentViewId(viewId);
     }
   }, [
-    contextStoreCurrentObjectMetadataId,
+    contextStoreCurrentObjectMetadataItem,
     contextStoreCurrentViewId,
     mainContextStoreComponentInstanceId,
     mainContextStoreComponentInstanceIdToSet,
     objectMetadataItem,
     objectMetadataItem.namePlural,
-    setContextStoreCurrentObjectMetadataId,
+    setContextStoreCurrentObjectMetadataItem,
     setContextStoreCurrentViewId,
     setLastVisitedObjectMetadataId,
     setLastVisitedViewForObjectMetadataNamePlural,
@@ -83,5 +101,23 @@ export const MainContextStoreProviderEffect = ({
     viewId,
   ]);
 
+  useEffect(() => {
+    const viewType =
+      pageName === 'record-show'
+        ? ContextStoreViewType.ShowPage
+        : view && view.type === ViewType.Kanban
+          ? ContextStoreViewType.Kanban
+          : ContextStoreViewType.Table;
+
+    if (contextStoreCurrentViewType !== viewType) {
+      setContextStoreCurrentViewType(viewType);
+    }
+  }, [
+    contextStoreCurrentViewType,
+    pageName,
+    setContextStoreCurrentViewType,
+    view,
+  ]);
+
   return null;
 };