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
2025-02-13 00:52:04 +01:00
parent 8f69352d17
commit 466f8c733f
9 changed files with 237 additions and 290 deletions
--- a/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx
+++ b/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) && (
-                      <ContextStoreViewIdEffect
-                        objectNamePlural={objectNamePlural}
-                      />
-                    )}
+                    <MainContextStoreProvider />
                  </ObjectMetadataItemsProvider>
                </ApolloMetadataClientProvider>
              </AuthProvider>
--- a/packages/twenty-front/src/modules/context-store/components/ContextStoreViewIdEffect.tsx
+++ b/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 <></>;
-};
--- a/packages/twenty-front/src/modules/context-store/components/MainContextStoreComponentInstanceIdSetterEffect.tsx
+++ b/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;
-};
--- a/packages/twenty-front/src/modules/context-store/components/MainContextStoreProvider.tsx
+++ b/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}
+    />
+  );
+};
--- a/packages/twenty-front/src/modules/context-store/components/MainContextStoreProviderEffect.tsx
+++ b/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;
+};
--- a/packages/twenty-front/src/modules/navigation/hooks/useLastVisitedView.ts
+++ b/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)) {
-      /* 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);
-
+    if (isDefined(objectMetadataItem)) {
      setLastVisitedViewPerObjectMetadataItem({
-        [fallbackObjectMetadataItem.id]: fallbackViewId,
+        [objectMetadataItem.id]: viewId,
      });
    }
  };
--- a/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
+++ b/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}
--- a/packages/twenty-front/src/modules/views/components/QueryParamsViewIdEffect.tsx
+++ b/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 { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView';
-import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
+import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
-import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
-import { useViewFromQueryParams } from '@/views/hooks/internal/useViewFromQueryParams';
-import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 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 { 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 mainContextStoreComponentInstanceId = useRecoilValue(
+    mainContextStoreComponentInstanceIdState,
  );
-  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 (isUndefined(viewIdQueryParam) && isDefined(lastVisitedViewId)) {
-      if (isLastVisitedObjectMetadataItemDifferent) {
-        setLastVisitedObjectMetadataItem(objectNamePlural);
-        setLastVisitedView({
-          objectNamePlural,
-          viewId: lastVisitedViewId,
-        });
+    if (isDefined(contextStoreCurrentViewId)) {
+      if (currentViewId !== contextStoreCurrentViewId) {
+        setCurrentViewId(contextStoreCurrentViewId);
      }
-      setCurrentViewId(lastVisitedViewId);
-      setContextStoreCurrentViewId(lastVisitedViewId);
-      return;
    }
-
-    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,
-  ]);
+  }, [contextStoreCurrentViewId, currentViewId, setCurrentViewId]);

  return <></>;
 };
--- a/packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx
+++ b/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 { capitalize, isDefined } from 'twenty-shared';
+import { isUndefined } from '@sniptt/guards';
+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)) {
-    return;
+  if (isUndefined(contextStoreCurrentViewId)) {
+    return null;
  }

  return (
    <PageContainer>
-      <RecordIndexContextProvider
+      <ContextStoreComponentInstanceContext.Provider
        value={{
-          recordIndexId,
-          objectNamePlural,
-          objectNameSingular,
-          objectMetadataItem,
-          onIndexRecordsLoaded: handleIndexRecordsLoaded,
-          indexIdentifierUrl,
+          instanceId: mainContextStoreComponentInstanceId,
        }}
      >
-        <ViewComponentInstanceContext.Provider
-          value={{ instanceId: recordIndexId }}
+        <RecordIndexContextProvider
+          value={{
+            recordIndexId,
+            objectNamePlural,
+            objectNameSingular,
+            objectMetadataItem,
+            onIndexRecordsLoaded: handleIndexRecordsLoaded,
+            indexIdentifierUrl,
+          }}
        >
-          <RecordFiltersComponentInstanceContext.Provider
+          <RecordIndexContainerContextStoreObjectMetadataEffect />
+          <ViewComponentInstanceContext.Provider
            value={{ instanceId: recordIndexId }}
          >
-            <ContextStoreComponentInstanceContext.Provider
-              value={{
-                instanceId: getActionMenuIdFromRecordIndexId(recordIndexId),
-              }}
+            <RecordFiltersComponentInstanceContext.Provider
+              value={{ instanceId: 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>
-        </ViewComponentInstanceContext.Provider>
-      </RecordIndexContextProvider>
+            </RecordFiltersComponentInstanceContext.Provider>
+          </ViewComponentInstanceContext.Provider>
+        </RecordIndexContextProvider>
+      </ContextStoreComponentInstanceContext.Provider>
    </PageContainer>
  );
 };