reset main context store viewId and current view type on settings page (#11206)

closes https://github.com/twentyhq/core-team-issues/issues/588

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx

@@ -5,8 +5,8 @@ import { RESET_CONTEXT_TO_SELECTION } from '@/command-menu/constants/ResetContex
 import { useMatchingCommandMenuCommands } from '@/command-menu/hooks/useMatchingCommandMenuCommands';
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { Command } from '@/command-menu/types/Command';
-import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
 import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
+import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useLingui } from '@lingui/react/macro';
@@ -22,6 +22,7 @@ export const CommandMenu = () => {
   const { t } = useLingui();
 
   const commandMenuSearch = useRecoilValue(commandMenuSearchState);
+  const { objectMetadataItems } = useObjectMetadataItems();
 
   const {
     noResults,
@@ -42,8 +43,12 @@ export const CommandMenu = () => {
       'command-menu-previous',
     );
 
-  const { objectMetadataItem: currentObjectMetadataItem } =
+  const objectMetadataItemId = useRecoilComponentValueV2(
-    useContextStoreObjectMetadataItemOrThrow();
+    contextStoreCurrentObjectMetadataItemIdComponentState,
+  );
+  const currentObjectMetadataItem = objectMetadataItems.find(
+    (item) => item.id === objectMetadataItemId,
+  );
 
   const commandGroups: CommandGroupConfig[] = [
     {

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

@@ -1,12 +1,13 @@
 import { MainContextStoreProviderEffect } from '@/context-store/components/MainContextStoreProviderEffect';
+import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
 import { useLastVisitedView } from '@/navigation/hooks/useLastVisitedView';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { prefetchIndexViewIdFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchIndexViewIdFromObjectMetadataItemFamilySelector';
 import { AppPath } from '@/types/AppPath';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
-import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 import { isDefined } from 'twenty-shared/utils';
+import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 
 const getViewId = (
   viewIdFromQueryParams: string | null,
@@ -32,12 +33,7 @@ export const MainContextStoreProvider = () => {
   const { isMatchingLocation } = useIsMatchingLocation();
   const isRecordIndexPage = isMatchingLocation(AppPath.RecordIndexPage);
   const isRecordShowPage = isMatchingLocation(AppPath.RecordShowPage);
-
+  const isSettingsPage = useIsSettingsPage();
-  const pageName = isRecordIndexPage
-    ? 'record-index'
-    : isRecordShowPage
-      ? 'record-show'
-      : undefined;
 
   const objectNamePlural = useParams().objectNamePlural ?? '';
   const objectNameSingular = useParams().objectNameSingular ?? '';
@@ -67,7 +63,10 @@ export const MainContextStoreProvider = () => {
 
   const viewId = getViewId(viewIdQueryParam, indexViewId, lastVisitedViewId);
 
-  if (!isDefined(pageName) || !isDefined(objectMetadataItem)) {
+  const shouldComputeContextStore =
+    isRecordIndexPage || isRecordShowPage || isSettingsPage;
+
+  if (!shouldComputeContextStore) {
     return null;
   }
 
@@ -75,7 +74,9 @@ export const MainContextStoreProvider = () => {
     <MainContextStoreProviderEffect
       viewId={viewId}
       objectMetadataItem={objectMetadataItem}
-      pageName={pageName}
+      isRecordIndexPage={isRecordIndexPage}
+      isRecordShowPage={isRecordShowPage}
+      isSettingsPage={isSettingsPage}
     />
   );
 };

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

@@ -8,19 +8,26 @@ import { useSetLastVisitedViewForObjectMetadataNamePlural } from '@/navigation/h
 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 { View } from '@/views/types/View';
 import { ViewType } from '@/views/types/ViewType';
 import { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 
+type MainContextStoreProviderEffectProps = {
+  viewId?: string;
+  objectMetadataItem?: ObjectMetadataItem;
+  isRecordIndexPage: boolean;
+  isRecordShowPage: boolean;
+  isSettingsPage: boolean;
+};
+
 export const MainContextStoreProviderEffect = ({
   viewId,
   objectMetadataItem,
-  pageName,
+  isRecordIndexPage,
-}: {
+  isRecordShowPage,
-  viewId?: string;
+  isSettingsPage,
-  objectMetadataItem: ObjectMetadataItem;
+}: MainContextStoreProviderEffectProps) => {
-  pageName: string;
-}) => {
   const { setLastVisitedViewForObjectMetadataNamePlural } =
     useSetLastVisitedViewForObjectMetadataNamePlural();
 
@@ -54,6 +61,11 @@ export const MainContextStoreProviderEffect = ({
   );
 
   useEffect(() => {
+    if (!objectMetadataItem) {
+      setContextStoreCurrentObjectMetadataItemId(undefined);
+      return;
+    }
+
     if (contextStoreCurrentObjectMetadataItemId !== objectMetadataItem.id) {
       setContextStoreCurrentObjectMetadataItemId(objectMetadataItem.id);
     }
@@ -66,39 +78,78 @@ export const MainContextStoreProviderEffect = ({
     setLastVisitedObjectMetadataId({
       objectMetadataItemId: objectMetadataItem.id,
     });
-
-    if (contextStoreCurrentViewId !== viewId) {
-      setContextStoreCurrentViewId(viewId);
-    }
   }, [
     contextStoreCurrentObjectMetadataItemId,
-    contextStoreCurrentViewId,
     objectMetadataItem,
-    objectMetadataItem.namePlural,
     setContextStoreCurrentObjectMetadataItemId,
-    setContextStoreCurrentViewId,
     setLastVisitedObjectMetadataId,
     setLastVisitedViewForObjectMetadataNamePlural,
     viewId,
   ]);
 
   useEffect(() => {
-    const viewType =
+    if (isSettingsPage) {
-      pageName === 'record-show'
+      setContextStoreCurrentViewId(undefined);
-        ? ContextStoreViewType.ShowPage
+      return;
-        : view && view.type === ViewType.Kanban
+    }
-          ? ContextStoreViewType.Kanban
+
-          : ContextStoreViewType.Table;
+    if (contextStoreCurrentViewId !== viewId) {
+      setContextStoreCurrentViewId(viewId);
+    }
+  }, [
+    contextStoreCurrentViewId,
+    isSettingsPage,
+    setContextStoreCurrentViewId,
+    viewId,
+  ]);
+
+  useEffect(() => {
+    const viewType = getViewType({
+      isSettingsPage,
+      isRecordShowPage,
+      isRecordIndexPage,
+      view,
+    });
 
     if (contextStoreCurrentViewType !== viewType) {
       setContextStoreCurrentViewType(viewType);
     }
   }, [
     contextStoreCurrentViewType,
-    pageName,
     setContextStoreCurrentViewType,
     view,
+    isSettingsPage,
+    isRecordShowPage,
+    isRecordIndexPage,
   ]);
 
   return null;
 };
+
+const getViewType = ({
+  isSettingsPage,
+  isRecordShowPage,
+  isRecordIndexPage,
+  view,
+}: {
+  isSettingsPage: boolean;
+  isRecordShowPage: boolean;
+  isRecordIndexPage: boolean;
+  view?: View;
+}) => {
+  if (isSettingsPage) {
+    return null;
+  }
+
+  if (isRecordIndexPage) {
+    return view?.type === ViewType.Kanban
+      ? ContextStoreViewType.Kanban
+      : ContextStoreViewType.Table;
+  }
+
+  if (isRecordShowPage) {
+    return ContextStoreViewType.ShowPage;
+  }
+
+  return null;
+};