Fix latest visited view (#10158)

Fixes https://github.com/twentyhq/twenty/issues/9772

In this PR:
- the root cause of the issue that the ContextStoreViewIdEffect was not
filtering the views on objectMetadata properly
- I'm also deleting some over complex in the latestVisited view logic
- Duplicated logic between ContextStoreViewIdEffect and
ViewBarViewIdEffect, see my comment

packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx

@@ -6,7 +6,7 @@ import { ChromeExtensionSidecarEffect } from '@/chrome-extension-sidecar/compone
 import { ChromeExtensionSidecarProvider } from '@/chrome-extension-sidecar/components/ChromeExtensionSidecarProvider';
 import { ClientConfigProvider } from '@/client-config/components/ClientConfigProvider';
 import { ClientConfigProviderEffect } from '@/client-config/components/ClientConfigProviderEffect';
-import { ContextStoreViewIdEffect } from '@/context-store/components/ContextStoreViewIdEffect';
+import { MainContextStoreProvider } from '@/context-store/components/MainContextStoreProvider';
 import { PromiseRejectionEffect } from '@/error-handler/components/PromiseRejectionEffect';
 import { ApolloMetadataClientProvider } from '@/object-metadata/components/ApolloMetadataClientProvider';
 import { ObjectMetadataItemsGater } from '@/object-metadata/components/ObjectMetadataItemsGater';
@@ -22,15 +22,13 @@ import { PageTitle } from '@/ui/utilities/page-title/components/PageTitle';
 import { UserProvider } from '@/users/components/UserProvider';
 import { UserProviderEffect } from '@/users/components/UserProviderEffect';
 import { WorkspaceProviderEffect } from '@/workspace/components/WorkspaceProviderEffect';
-import { isNonEmptyString } from '@sniptt/guards';
 import { StrictMode } from 'react';
-import { Outlet, useLocation, useParams } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
 import { getPageTitleFromPath } from '~/utils/title-utils';
 
 export const AppRouterProviders = () => {
   const { pathname } = useLocation();
   const pageTitle = getPageTitleFromPath(pathname);
-  const objectNamePlural = useParams().objectNamePlural;
 
   return (
     <ApolloProvider>
@@ -64,11 +62,7 @@ export const AppRouterProviders = () => {
                       </PrefetchDataProvider>
                     </ObjectMetadataItemsGater>
                     <PageChangeEffect />
-                    {isNonEmptyString(objectNamePlural) && (
+                    <MainContextStoreProvider />
-                      <ContextStoreViewIdEffect
-                        objectNamePlural={objectNamePlural}
-                      />
-                    )}
                   </ObjectMetadataItemsProvider>
                 </ApolloMetadataClientProvider>
               </AuthProvider>

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

@@ -1,104 +0,0 @@
-import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
-import { useLastVisitedObjectMetadataItem } from '@/navigation/hooks/useLastVisitedObjectMetadataItem';
-import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView';
-import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
-import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
-import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
-import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
-import { useViewFromQueryParams } from '@/views/hooks/internal/useViewFromQueryParams';
-import { View } from '@/views/types/View';
-import { isUndefined } from '@sniptt/guards';
-import { useEffect } from 'react';
-import { isDefined } from 'twenty-shared';
-import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
-
-export const ContextStoreViewIdEffect = ({
-  objectNamePlural,
-}: {
-  objectNamePlural: string;
-}) => {
-  const { viewIdQueryParam } = useViewFromQueryParams();
-
-  const { records: viewsOnCurrentObject } = usePrefetchedData<View>(
-    PrefetchKey.AllViews,
-  );
-
-  const { findObjectMetadataItemByNamePlural } =
-    useFilteredObjectMetadataItems();
-  const objectMetadataItemId =
-    findObjectMetadataItemByNamePlural(objectNamePlural);
-  const { getLastVisitedViewIdFromObjectNamePlural, setLastVisitedView } =
-    useLastVisitedView();
-  const { lastVisitedObjectMetadataItemId, setLastVisitedObjectMetadataItem } =
-    useLastVisitedObjectMetadataItem();
-
-  const lastVisitedViewId =
-    getLastVisitedViewIdFromObjectNamePlural(objectNamePlural);
-  const isLastVisitedObjectMetadataItemDifferent = !isDeeplyEqual(
-    objectMetadataItemId?.id,
-    lastVisitedObjectMetadataItemId,
-  );
-  const setContextStoreCurrentViewId = useSetRecoilComponentStateV2(
-    contextStoreCurrentViewIdComponentState,
-    objectNamePlural,
-  );
-
-  useEffect(() => {
-    const indexView = viewsOnCurrentObject.find((view) => view.key === 'INDEX');
-
-    if (isUndefined(viewIdQueryParam) && isDefined(lastVisitedViewId)) {
-      if (isLastVisitedObjectMetadataItemDifferent) {
-        setLastVisitedObjectMetadataItem(objectNamePlural);
-        setLastVisitedView({
-          objectNamePlural,
-          viewId: lastVisitedViewId,
-        });
-      }
-      setContextStoreCurrentViewId(lastVisitedViewId);
-      return;
-    }
-
-    if (isDefined(viewIdQueryParam)) {
-      if (isLastVisitedObjectMetadataItemDifferent) {
-        setLastVisitedObjectMetadataItem(objectNamePlural);
-      }
-      if (!isDeeplyEqual(viewIdQueryParam, lastVisitedViewId)) {
-        setLastVisitedView({
-          objectNamePlural,
-          viewId: viewIdQueryParam,
-        });
-      }
-      setContextStoreCurrentViewId(viewIdQueryParam);
-      return;
-    }
-
-    if (isDefined(indexView)) {
-      if (isLastVisitedObjectMetadataItemDifferent) {
-        setLastVisitedObjectMetadataItem(objectNamePlural);
-      }
-      if (!isDeeplyEqual(indexView.id, lastVisitedViewId)) {
-        setLastVisitedView({
-          objectNamePlural,
-          viewId: indexView.id,
-        });
-      }
-      setContextStoreCurrentViewId(indexView.id);
-      return;
-    }
-
-    return () => {
-      setContextStoreCurrentViewId(null);
-    };
-  }, [
-    isLastVisitedObjectMetadataItemDifferent,
-    lastVisitedViewId,
-    objectNamePlural,
-    setContextStoreCurrentViewId,
-    setLastVisitedObjectMetadataItem,
-    setLastVisitedView,
-    viewIdQueryParam,
-    viewsOnCurrentObject,
-  ]);
-
-  return <></>;
-};

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

@@ -1,27 +0,0 @@
-import { CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE } from '@/context-store/constants/ContextStoreInstanceIdDefaultValue';
-import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
-import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId';
-import { useContext, useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
-
-export const MainContextStoreComponentInstanceIdSetterEffect = () => {
-  const setMainContextStoreComponentInstanceId = useSetRecoilState(
-    mainContextStoreComponentInstanceIdState,
-  );
-
-  const context = useContext(ContextStoreComponentInstanceContext);
-
-  useEffect(() => {
-    setMainContextStoreComponentInstanceId(
-      context?.instanceId ?? CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE,
-    );
-
-    return () => {
-      setMainContextStoreComponentInstanceId(
-        CONTEXT_STORE_INSTANCE_ID_DEFAULT_VALUE,
-      );
-    };
-  }, [context, setMainContextStoreComponentInstanceId]);
-
-  return null;
-};

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

@@ -0,0 +1,90 @@
+import { MainContextStoreProviderEffect } from '@/context-store/components/MainContextStoreProviderEffect';
+import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView';
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
+import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
+import { AppPath } from '@/types/AppPath';
+import { View } from '@/views/types/View';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { useRecoilValue } from 'recoil';
+import { isDefined } from 'twenty-shared';
+import { undefined } from 'zod';
+import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
+
+const getViewId = (
+  viewIdFromQueryParams: string | null,
+  indexView?: View,
+  lastVisitedViewId?: string,
+) => {
+  if (isDefined(viewIdFromQueryParams)) {
+    return viewIdFromQueryParams;
+  }
+
+  if (isDefined(lastVisitedViewId)) {
+    return lastVisitedViewId;
+  }
+
+  if (isDefined(indexView)) {
+    return indexView.id;
+  }
+
+  throw new Error('No view id found');
+};
+
+export const MainContextStoreProvider = () => {
+  const { isMatchingLocation } = useIsMatchingLocation();
+  const isRecordIndexPage = isMatchingLocation(AppPath.RecordIndexPage);
+  const isRecordShowPage = isMatchingLocation(AppPath.RecordShowPage);
+
+  const pageName = isRecordIndexPage
+    ? 'record-index'
+    : isRecordShowPage
+      ? 'record-show'
+      : undefined;
+
+  const objectNamePlural = useParams().objectNamePlural ?? '';
+
+  const [searchParams] = useSearchParams();
+  const viewIdQueryParam = searchParams.get('viewId');
+
+  const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
+
+  const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
+
+  const objectMetadataItem = objectMetadataItems.find(
+    (objectMetadataItem) => objectMetadataItem.namePlural === objectNamePlural,
+  );
+
+  const { getLastVisitedViewIdFromObjectNamePlural } = useLastVisitedView();
+
+  const lastVisitedViewId = getLastVisitedViewIdFromObjectNamePlural(
+    objectMetadataItem?.namePlural ?? '',
+  );
+
+  const viewsOnCurrentObject = views.filter(
+    (view) => view.objectMetadataId === objectMetadataItem?.id,
+  );
+  const indexView = viewsOnCurrentObject.find((view) => view.key === 'INDEX');
+
+  const viewId = getViewId(viewIdQueryParam, indexView, lastVisitedViewId);
+
+  const mainContextStoreComponentInstanceId = `${pageName}-${objectMetadataItem?.namePlural}-${viewId}`;
+
+  if (
+    !isDefined(pageName) ||
+    !isDefined(objectMetadataItem) ||
+    !isDefined(viewId)
+  ) {
+    return null;
+  }
+
+  return (
+    <MainContextStoreProviderEffect
+      mainContextStoreComponentInstanceIdToSet={
+        mainContextStoreComponentInstanceId
+      }
+      viewId={viewId}
+      objectMetadataItem={objectMetadataItem}
+    />
+  );
+};

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

@@ -0,0 +1,96 @@
+import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
+import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
+import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId';
+import { useLastVisitedObjectMetadataItem } from '@/navigation/hooks/useLastVisitedObjectMetadataItem';
+import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import { useEffect } from 'react';
+import { useRecoilState } from 'recoil';
+
+export const MainContextStoreProviderEffect = ({
+  mainContextStoreComponentInstanceIdToSet,
+  viewId,
+  objectMetadataItem,
+}: {
+  mainContextStoreComponentInstanceIdToSet: string;
+  viewId: string;
+  objectMetadataItem: ObjectMetadataItem;
+}) => {
+  const [
+    mainContextStoreComponentInstanceId,
+    setMainContextStoreComponentInstanceId,
+  ] = useRecoilState(mainContextStoreComponentInstanceIdState);
+
+  const { getLastVisitedViewIdFromObjectNamePlural, setLastVisitedView } =
+    useLastVisitedView();
+
+  const { lastVisitedObjectMetadataItemId, setLastVisitedObjectMetadataItem } =
+    useLastVisitedObjectMetadataItem();
+
+  const lastVisitedViewId = getLastVisitedViewIdFromObjectNamePlural(
+    objectMetadataItem.namePlural,
+  );
+
+  const [contextStoreCurrentViewId, setContextStoreCurrentViewId] =
+    useRecoilComponentStateV2(
+      contextStoreCurrentViewIdComponentState,
+      mainContextStoreComponentInstanceId,
+    );
+
+  const [
+    contextStoreCurrentObjectMetadataId,
+    setContextStoreCurrentObjectMetadataId,
+  ] = useRecoilComponentStateV2(
+    contextStoreCurrentObjectMetadataIdComponentState,
+    mainContextStoreComponentInstanceId,
+  );
+
+  useEffect(() => {
+    if (contextStoreCurrentObjectMetadataId !== objectMetadataItem.id) {
+      setContextStoreCurrentObjectMetadataId(objectMetadataItem.id);
+    }
+
+    if (
+      mainContextStoreComponentInstanceIdToSet !==
+      mainContextStoreComponentInstanceId
+    ) {
+      setMainContextStoreComponentInstanceId(
+        mainContextStoreComponentInstanceIdToSet,
+      );
+    }
+
+    if (viewId !== lastVisitedViewId) {
+      setLastVisitedView({
+        objectNamePlural: objectMetadataItem.namePlural,
+        viewId: viewId,
+      });
+    }
+
+    if (objectMetadataItem.id !== lastVisitedObjectMetadataItemId) {
+      setLastVisitedObjectMetadataItem(objectMetadataItem.namePlural);
+    }
+
+    if (contextStoreCurrentViewId !== viewId) {
+      console.log('contextStoreCurrentViewId', contextStoreCurrentViewId);
+      setContextStoreCurrentViewId(viewId);
+    }
+  }, [
+    contextStoreCurrentObjectMetadataId,
+    contextStoreCurrentViewId,
+    lastVisitedObjectMetadataItemId,
+    lastVisitedViewId,
+    mainContextStoreComponentInstanceId,
+    mainContextStoreComponentInstanceIdToSet,
+    objectMetadataItem,
+    objectMetadataItem.namePlural,
+    setContextStoreCurrentObjectMetadataId,
+    setContextStoreCurrentViewId,
+    setLastVisitedObjectMetadataItem,
+    setLastVisitedView,
+    setMainContextStoreComponentInstanceId,
+    viewId,
+  ]);
+
+  return null;
+};

packages/twenty-front/src/modules/navigation/hooks/useLastVisitedView.ts

@@ -1,5 +1,4 @@
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
-import { lastVisitedObjectMetadataItemIdStateSelector } from '@/navigation/states/selectors/lastVisitedObjectMetadataItemIdStateSelector';
 import { lastVisitedViewPerObjectMetadataItemStateSelector } from '@/navigation/states/selectors/lastVisitedViewPerObjectMetadataItemStateSelector';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
@@ -10,20 +9,11 @@ export const useLastVisitedView = () => {
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
   const scopeId = currentWorkspace?.id ?? '';
 
-  const lastVisitedObjectMetadataItemIdState = extractComponentState(
-    lastVisitedObjectMetadataItemIdStateSelector,
-    scopeId,
-  );
-
   const lastVisitedViewPerObjectMetadataItemState = extractComponentState(
     lastVisitedViewPerObjectMetadataItemStateSelector,
     scopeId,
   );
 
-  const lastVisitedObjectMetadataItemId = useRecoilValue(
-    lastVisitedObjectMetadataItemIdState,
-  );
-
   const [
     lastVisitedViewPerObjectMetadataItem,
     setLastVisitedViewPerObjectMetadataItem,
@@ -35,6 +25,7 @@ export const useLastVisitedView = () => {
   const setFallbackForLastVisitedView = (objectMetadataItemId: string) => {
     /* ...{} allows us to pass value as undefined to remove that particular key
      even though param type is of type Record<string,string> */
+
     setLastVisitedViewPerObjectMetadataItem({
       ...{},
       [objectMetadataItemId]: undefined,
@@ -48,22 +39,12 @@ export const useLastVisitedView = () => {
     objectNamePlural: string;
     viewId: string;
   }) => {
-    const fallbackObjectMetadataItem =
+    const objectMetadataItem =
       findActiveObjectMetadataItemByNamePlural(objectNamePlural);
 
-    if (isDefined(fallbackObjectMetadataItem)) {
+    if (isDefined(objectMetadataItem)) {
-      /* when both are equal meaning there was change in view else 
-      there was a object page change from nav
-    */
-      const fallbackViewId =
-        lastVisitedObjectMetadataItemId === fallbackObjectMetadataItem.id
-          ? viewId
-          : (lastVisitedViewPerObjectMetadataItem?.[
-              fallbackObjectMetadataItem.id
-            ] ?? viewId);
-
       setLastVisitedViewPerObjectMetadataItem({
-        [fallbackObjectMetadataItem.id]: fallbackViewId,
+        [objectMetadataItem.id]: viewId,
       });
     }
   };

packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx

@@ -1,7 +1,6 @@
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { ShowPageContainer } from '@/ui/layout/page/components/ShowPageContainer';
 
-import { MainContextStoreComponentInstanceIdSetterEffect } from '@/context-store/components/MainContextStoreComponentInstanceIdSetterEffect';
 import { InformationBannerDeletedRecord } from '@/information-banner/components/deleted-record/InformationBannerDeletedRecord';
 
 import { ContextStoreCurrentViewTypeEffect } from '@/context-store/components/ContextStoreCurrentViewTypeEffect';
@@ -56,7 +55,6 @@ export const RecordShowContainer = ({
       <ContextStoreCurrentViewTypeEffect
         viewType={ContextStoreViewType.ShowPage}
       />
-      {!isInRightDrawer && <MainContextStoreComponentInstanceIdSetterEffect />}
       {recordFromStore && recordFromStore.deletedAt && (
         <InformationBannerDeletedRecord
           recordId={objectRecordId}

packages/twenty-front/src/modules/views/components/QueryParamsViewIdEffect.tsx

@@ -1,120 +1,35 @@
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
-import { useLastVisitedObjectMetadataItem } from '@/navigation/hooks/useLastVisitedObjectMetadataItem';
+import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId';
-import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView';
-import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
-import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useViewFromQueryParams } from '@/views/hooks/internal/useViewFromQueryParams';
-import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
-import { isUndefined } from '@sniptt/guards';
 import { useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared';
-import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
+// TODO: This whole code should be removed. currentViewId should be used directly to set the mainContextStore
+// and viewbar / view tooling should be updated to use that state contextStore state directly.
 export const QueryParamsViewIdEffect = () => {
-  const { getFiltersFromQueryParams, viewIdQueryParam } =
-    useViewFromQueryParams();
-
-  // TODO: fix this implicit hack
-  const { instanceId: objectNamePlural } = useGetCurrentView();
-
   const [currentViewId, setCurrentViewId] = useRecoilComponentStateV2(
     currentViewIdComponentState,
   );
 
-  const { viewsOnCurrentObject } = useGetCurrentView();
+  const mainContextStoreComponentInstanceId = useRecoilValue(
-  const { findObjectMetadataItemByNamePlural } =
+    mainContextStoreComponentInstanceIdState,
-    useFilteredObjectMetadataItems();
-  const objectMetadataItemId =
-    findObjectMetadataItemByNamePlural(objectNamePlural);
-  const { getLastVisitedViewIdFromObjectNamePlural, setLastVisitedView } =
-    useLastVisitedView();
-  const { lastVisitedObjectMetadataItemId, setLastVisitedObjectMetadataItem } =
-    useLastVisitedObjectMetadataItem();
-
-  const lastVisitedViewId =
-    getLastVisitedViewIdFromObjectNamePlural(objectNamePlural);
-  const isLastVisitedObjectMetadataItemDifferent = !isDeeplyEqual(
-    objectMetadataItemId?.id,
-    lastVisitedObjectMetadataItemId,
   );
-  const setContextStoreCurrentViewId = useSetRecoilComponentStateV2(
+
+  const contextStoreCurrentViewId = useRecoilComponentValueV2(
     contextStoreCurrentViewIdComponentState,
+    mainContextStoreComponentInstanceId,
   );
 
-  // // TODO: scope view bar per view id if possible
-  // const { resetCurrentView } = useResetCurrentView();
-
-  // useEffect(() => {
-  //   if (isDefined(currentViewId)) {
-  //     resetCurrentView();
-  //   }
-  // }, [resetCurrentView, currentViewId]);
-
   useEffect(() => {
-    const indexView = viewsOnCurrentObject.find((view) => view.key === 'INDEX');
+    if (isDefined(contextStoreCurrentViewId)) {
-
+      if (currentViewId !== contextStoreCurrentViewId) {
-    if (isUndefined(viewIdQueryParam) && isDefined(lastVisitedViewId)) {
+        setCurrentViewId(contextStoreCurrentViewId);
-      if (isLastVisitedObjectMetadataItemDifferent) {
-        setLastVisitedObjectMetadataItem(objectNamePlural);
-        setLastVisitedView({
-          objectNamePlural,
-          viewId: lastVisitedViewId,
-        });
       }
-      setCurrentViewId(lastVisitedViewId);
-      setContextStoreCurrentViewId(lastVisitedViewId);
-      return;
     }
-
+  }, [contextStoreCurrentViewId, currentViewId, setCurrentViewId]);
-    if (isDefined(viewIdQueryParam)) {
-      if (isLastVisitedObjectMetadataItemDifferent) {
-        setLastVisitedObjectMetadataItem(objectNamePlural);
-      }
-      if (!isDeeplyEqual(viewIdQueryParam, lastVisitedViewId)) {
-        setLastVisitedView({
-          objectNamePlural,
-          viewId: viewIdQueryParam,
-        });
-      }
-      setCurrentViewId(viewIdQueryParam);
-      setContextStoreCurrentViewId(viewIdQueryParam);
-      return;
-    }
-
-    if (isDefined(indexView)) {
-      if (isLastVisitedObjectMetadataItemDifferent) {
-        setLastVisitedObjectMetadataItem(objectNamePlural);
-      }
-      if (!isDeeplyEqual(indexView.id, lastVisitedViewId)) {
-        setLastVisitedView({
-          objectNamePlural,
-          viewId: indexView.id,
-        });
-      }
-      setCurrentViewId(indexView.id);
-      setContextStoreCurrentViewId(indexView.id);
-      return;
-    }
-
-    return () => {
-      setContextStoreCurrentViewId(null);
-    };
-  }, [
-    currentViewId,
-    getFiltersFromQueryParams,
-    isLastVisitedObjectMetadataItemDifferent,
-    lastVisitedViewId,
-    objectMetadataItemId?.id,
-    objectNamePlural,
-    setContextStoreCurrentViewId,
-    setCurrentViewId,
-    setLastVisitedObjectMetadataItem,
-    setLastVisitedView,
-    viewIdQueryParam,
-    viewsOnCurrentObject,
-  ]);
 
   return <></>;
 };

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

@@ -3,9 +3,9 @@ import { useParams } from 'react-router-dom';
 
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { getActionMenuIdFromRecordIndexId } from '@/action-menu/utils/getActionMenuIdFromRecordIndexId';
-import { MainContextStoreComponentInstanceIdSetterEffect } from '@/context-store/components/MainContextStoreComponentInstanceIdSetterEffect';
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
 import { lastShowPageRecordIdState } from '@/object-record/record-field/states/lastShowPageRecordId';
@@ -21,8 +21,9 @@ import { PageContainer } from '@/ui/layout/page/components/PageContainer';
 import { PageTitle } from '@/ui/utilities/page-title/components/PageTitle';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
-import { useRecoilCallback } from 'recoil';
+import { isUndefined } from '@sniptt/guards';
-import { capitalize, isDefined } from 'twenty-shared';
+import { useRecoilCallback, useRecoilValue } from 'recoil';
+import { capitalize } from 'twenty-shared';
 
 const StyledIndexContainer = styled.div`
   display: flex;
@@ -33,9 +34,13 @@ const StyledIndexContainer = styled.div`
 export const RecordIndexPage = () => {
   const objectNamePlural = useParams().objectNamePlural ?? '';
 
+  const mainContextStoreComponentInstanceId = useRecoilValue(
+    mainContextStoreComponentInstanceIdState,
+  );
+
   const contextStoreCurrentViewId = useRecoilComponentValueV2(
     contextStoreCurrentViewIdComponentState,
-    objectNamePlural,
+    mainContextStoreComponentInstanceId,
   );
 
   const recordIndexId = `${objectNamePlural}-${contextStoreCurrentViewId}`;
@@ -62,32 +67,33 @@ export const RecordIndexPage = () => {
     [],
   );
 
-  if (!isDefined(contextStoreCurrentViewId)) {
+  if (isUndefined(contextStoreCurrentViewId)) {
-    return;
+    return null;
   }
 
   return (
     <PageContainer>
-      <RecordIndexContextProvider
+      <ContextStoreComponentInstanceContext.Provider
         value={{
-          recordIndexId,
+          instanceId: mainContextStoreComponentInstanceId,
-          objectNamePlural,
-          objectNameSingular,
-          objectMetadataItem,
-          onIndexRecordsLoaded: handleIndexRecordsLoaded,
-          indexIdentifierUrl,
         }}
       >
-        <ViewComponentInstanceContext.Provider
+        <RecordIndexContextProvider
-          value={{ instanceId: recordIndexId }}
+          value={{
+            recordIndexId,
+            objectNamePlural,
+            objectNameSingular,
+            objectMetadataItem,
+            onIndexRecordsLoaded: handleIndexRecordsLoaded,
+            indexIdentifierUrl,
+          }}
         >
-          <RecordFiltersComponentInstanceContext.Provider
+          <RecordIndexContainerContextStoreObjectMetadataEffect />
+          <ViewComponentInstanceContext.Provider
             value={{ instanceId: recordIndexId }}
           >
-            <ContextStoreComponentInstanceContext.Provider
+            <RecordFiltersComponentInstanceContext.Provider
-              value={{
+              value={{ instanceId: recordIndexId }}
-                instanceId: getActionMenuIdFromRecordIndexId(recordIndexId),
-              }}
             >
               <ActionMenuComponentInstanceContext.Provider
                 value={{
@@ -98,17 +104,15 @@ export const RecordIndexPage = () => {
                 <RecordIndexPageHeader />
                 <PageBody>
                   <StyledIndexContainer>
-                    <RecordIndexContainerContextStoreObjectMetadataEffect />
                     <RecordIndexContainerContextStoreNumberOfSelectedRecordsEffect />
-                    <MainContextStoreComponentInstanceIdSetterEffect />
                     <RecordIndexContainer />
                   </StyledIndexContainer>
                 </PageBody>
               </ActionMenuComponentInstanceContext.Provider>
-            </ContextStoreComponentInstanceContext.Provider>
+            </RecordFiltersComponentInstanceContext.Provider>
-          </RecordFiltersComponentInstanceContext.Provider>
+          </ViewComponentInstanceContext.Provider>
-        </ViewComponentInstanceContext.Provider>
+        </RecordIndexContextProvider>
-      </RecordIndexContextProvider>
+      </ContextStoreComponentInstanceContext.Provider>
     </PageContainer>
   );
 };