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/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,
-}: {
-  viewId?: string;
-  objectMetadataItem: ObjectMetadataItem;
-  pageName: string;
-}) => {
+  isRecordIndexPage,
+  isRecordShowPage,
+  isSettingsPage,
+}: MainContextStoreProviderEffectProps) => {
   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 =
-      pageName === 'record-show'
-        ? ContextStoreViewType.ShowPage
-        : view && view.type === ViewType.Kanban
-          ? ContextStoreViewType.Kanban
-          : ContextStoreViewType.Table;
+    if (isSettingsPage) {
+      setContextStoreCurrentViewId(undefined);
+      return;
+    }
+
+    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;
+};