Simplify last visited

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

@@ -48,6 +48,7 @@ export const MainContextStoreProvider = () => {
   const [searchParams] = useSearchParams();
   const viewIdQueryParam = searchParams.get('viewId');
 
+  // Todo: this is triggering a lot of re-renders as we update the viewFields, we should introduce a state here
   const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
 
   const objectMetadataItems = useRecoilValue(objectMetadataItemsState);

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

@@ -1,8 +1,8 @@
 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 { useSetLastVisitedObjectMetadataId } from '@/navigation/hooks/useSetLastVisitedObjectMetadataId';
+import { useSetLastVisitedViewForObjectMetadataNamePlural } from '@/navigation/hooks/useSetLastVisitedViewForObjectMetadataNamePlural';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
 import { useEffect } from 'react';
@@ -22,15 +22,11 @@ export const MainContextStoreProviderEffect = ({
     setMainContextStoreComponentInstanceId,
   ] = useRecoilState(mainContextStoreComponentInstanceIdState);
 
-  const { getLastVisitedViewIdFromObjectNamePlural, setLastVisitedView } =
-    useLastVisitedView();
+  const { setLastVisitedViewForObjectMetadataNamePlural } =
+    useSetLastVisitedViewForObjectMetadataNamePlural();
 
-  const { lastVisitedObjectMetadataItemId, setLastVisitedObjectMetadataItem } =
-    useLastVisitedObjectMetadataItem();
-
-  const lastVisitedViewId = getLastVisitedViewIdFromObjectNamePlural(
-    objectMetadataItem.namePlural,
-  );
+  const { setLastVisitedObjectMetadataId } =
+    useSetLastVisitedObjectMetadataId();
 
   const [contextStoreCurrentViewId, setContextStoreCurrentViewId] =
     useRecoilComponentStateV2(
@@ -60,33 +56,29 @@ export const MainContextStoreProviderEffect = ({
       );
     }
 
-    if (viewId !== lastVisitedViewId) {
-      setLastVisitedView({
-        objectNamePlural: objectMetadataItem.namePlural,
-        viewId: viewId,
-      });
-    }
+    setLastVisitedViewForObjectMetadataNamePlural({
+      objectNamePlural: objectMetadataItem.namePlural,
+      viewId: viewId,
+    });
 
-    if (objectMetadataItem.id !== lastVisitedObjectMetadataItemId) {
-      setLastVisitedObjectMetadataItem(objectMetadataItem.namePlural);
-    }
+    setLastVisitedObjectMetadataId({
+      objectMetadataItemId: objectMetadataItem.id,
+    });
 
     if (contextStoreCurrentViewId !== viewId) {
       setContextStoreCurrentViewId(viewId);
     }
   }, [
     contextStoreCurrentObjectMetadataId,
     contextStoreCurrentViewId,
-    lastVisitedObjectMetadataItemId,
-    lastVisitedViewId,
     mainContextStoreComponentInstanceId,
     mainContextStoreComponentInstanceIdToSet,
     objectMetadataItem,
     objectMetadataItem.namePlural,
     setContextStoreCurrentObjectMetadataId,
     setContextStoreCurrentViewId,
-    setLastVisitedObjectMetadataItem,
-    setLastVisitedView,
+    setLastVisitedObjectMetadataId,
+    setLastVisitedViewForObjectMetadataNamePlural,
     setMainContextStoreComponentInstanceId,
     viewId,
   ]);

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

@@ -1,5 +1,5 @@
 import { currentUserState } from '@/auth/states/currentUserState';
-import { useLastVisitedObjectMetadataItem } from '@/navigation/hooks/useLastVisitedObjectMetadataItem';
+import { lastVisitedObjectMetadataItemIdState } from '@/navigation/states/lastVisitedObjectMetadataItemIdState';
 import { ObjectPathInfo } from '@/navigation/types/ObjectPathInfo';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
@@ -16,8 +16,9 @@ export const useDefaultHomePagePath = () => {
   const { activeObjectMetadataItems, alphaSortedActiveObjectMetadataItems } =
     useFilteredObjectMetadataItems();
   const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
-  const { lastVisitedObjectMetadataItemId } =
-    useLastVisitedObjectMetadataItem();
+  const lastVisitedObjectMetadataItemId = useRecoilValue(
+    lastVisitedObjectMetadataItemIdState,
+  );
 
   const getActiveObjectMetadataItemMatchingId = useCallback(
     (objectMetadataId: string) => {

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

@@ -1,54 +1,15 @@
-import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
-import { lastVisitedViewPerObjectMetadataItemStateSelector } from '@/navigation/states/selectors/lastVisitedViewPerObjectMetadataItemStateSelector';
+import { lastVisitedViewPerObjectMetadataItemState } from '@/navigation/states/lastVisitedViewPerObjectMetadataItemState';
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
-import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { isDefined } from 'twenty-shared';
+import { useRecoilValue } from 'recoil';
 
 export const useLastVisitedView = () => {
-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
-  const scopeId = currentWorkspace?.id ?? '';
-
-  const lastVisitedViewPerObjectMetadataItemState = extractComponentState(
-    lastVisitedViewPerObjectMetadataItemStateSelector,
-    scopeId,
+  const lastVisitedViewPerObjectMetadataItem = useRecoilValue(
+    lastVisitedViewPerObjectMetadataItemState,
   );
 
-  const [
-    lastVisitedViewPerObjectMetadataItem,
-    setLastVisitedViewPerObjectMetadataItem,
-  ] = useRecoilState(lastVisitedViewPerObjectMetadataItemState);
-
   const { findActiveObjectMetadataItemByNamePlural } =
     useFilteredObjectMetadataItems();
 
-  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,
-    });
-  };
-
-  const setLastVisitedView = ({
-    objectNamePlural,
-    viewId,
-  }: {
-    objectNamePlural: string;
-    viewId: string;
-  }) => {
-    const objectMetadataItem =
-      findActiveObjectMetadataItemByNamePlural(objectNamePlural);
-
-    if (isDefined(objectMetadataItem)) {
-      setLastVisitedViewPerObjectMetadataItem({
-        [objectMetadataItem.id]: viewId,
-      });
-    }
-  };
-
   const getLastVisitedViewIdFromObjectNamePlural = (
     objectNamePlural: string,
   ) => {
@@ -65,9 +26,7 @@ export const useLastVisitedView = () => {
     return lastVisitedViewPerObjectMetadataItem?.[objectMetadataItemId];
   };
   return {
-    setLastVisitedView,
     getLastVisitedViewIdFromObjectNamePlural,
     getLastVisitedViewIdFromObjectMetadataItemId,
-    setFallbackForLastVisitedView,
   };
 };

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

@@ -1,12 +1,12 @@
 import { currentMobileNavigationDrawerState } from '@/navigation/states/currentMobileNavigationDrawerState';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
-import { useRecoilState } from 'recoil';
+import { useSetRecoilState } from 'recoil';
 
 export const useOpenSettingsMenu = () => {
-  const [, setIsNavigationDrawerExpanded] = useRecoilState(
+  const setIsNavigationDrawerExpanded = useSetRecoilState(
     isNavigationDrawerExpandedState,
   );
-  const [, setCurrentMobileNavigationDrawer] = useRecoilState(
+  const setCurrentMobileNavigationDrawer = useSetRecoilState(
     currentMobileNavigationDrawerState,
   );
 

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

@@ -0,0 +1,35 @@
+import { lastVisitedObjectMetadataItemIdState } from '@/navigation/states/lastVisitedObjectMetadataItemIdState';
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { useRecoilCallback } from 'recoil';
+import { isDefined } from 'twenty-shared';
+
+export const useSetLastVisitedObjectMetadataId = () => {
+  const setLastVisitedObjectMetadataId = useRecoilCallback(
+    ({ set, snapshot }) =>
+      ({ objectMetadataItemId }: { objectMetadataItemId: string }) => {
+        const objectMetadataItems = snapshot
+          .getLoadable(objectMetadataItemsState)
+          .getValue();
+
+        const objectMetadataItem = objectMetadataItems.find(
+          (item) => item.id === objectMetadataItemId,
+        );
+
+        const lastVisitedObjectMetadataItemId = snapshot
+          .getLoadable(lastVisitedObjectMetadataItemIdState)
+          .getValue();
+
+        if (
+          isDefined(objectMetadataItem) &&
+          lastVisitedObjectMetadataItemId !== objectMetadataItemId
+        ) {
+          set(lastVisitedObjectMetadataItemIdState, objectMetadataItemId);
+        }
+      },
+    [],
+  );
+
+  return {
+    setLastVisitedObjectMetadataId,
+  };
+};

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

@@ -0,0 +1,63 @@
+import { lastVisitedViewPerObjectMetadataItemState } from '@/navigation/states/lastVisitedViewPerObjectMetadataItemState';
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import { useLazyPrefetchedData } from '@/prefetch/hooks/useLazyPrefetchData';
+import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
+import { View } from '@/views/types/View';
+import { useRecoilCallback } from 'recoil';
+import { isDefined } from 'twenty-shared';
+
+export const useSetLastVisitedViewForObjectMetadataNamePlural = () => {
+  const { records: views, findManyRecords } = useLazyPrefetchedData<View>(
+    PrefetchKey.AllViews,
+  );
+
+  const setLastVisitedViewForObjectMetadataNamePlural = useRecoilCallback(
+    ({ set, snapshot }) =>
+      async ({
+        objectNamePlural,
+        viewId,
+      }: {
+        objectNamePlural: string;
+        viewId: string;
+      }) => {
+        await findManyRecords();
+
+        const view = views.find((view: View) => view.id === viewId);
+
+        const objectMetadataItems = snapshot
+          .getLoadable(objectMetadataItemsState)
+          .getValue();
+
+        const objectMetadataItem = objectMetadataItems.find(
+          (item) => item.namePlural === objectNamePlural,
+        );
+
+        if (!isDefined(objectMetadataItem) || !isDefined(view)) {
+          return;
+        }
+
+        if (view.objectMetadataId !== objectMetadataItem.id) {
+          return;
+        }
+
+        const lastVisitedViewPerObjectMetadataItem = snapshot
+          .getLoadable(lastVisitedViewPerObjectMetadataItemState)
+          .getValue();
+
+        const lastVisitedViewId =
+          lastVisitedViewPerObjectMetadataItem?.[objectMetadataItem?.id];
+
+        if (isDefined(objectMetadataItem) && lastVisitedViewId !== viewId) {
+          set(lastVisitedViewPerObjectMetadataItemState, {
+            ...lastVisitedViewPerObjectMetadataItem,
+            [objectMetadataItem.id]: viewId,
+          });
+        }
+      },
+    [findManyRecords, views],
+  );
+
+  return {
+    setLastVisitedViewForObjectMetadataNamePlural,
+  };
+};

packages/twenty-front/src/modules/navigation/states/lastVisitedObjectMetadataItemIdState.ts

@@ -1,10 +1,7 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createState } from 'twenty-ui';
 import { localStorageEffect } from '~/utils/recoil-effects';
 
-export const lastVisitedObjectMetadataItemIdState = createComponentState<Record<
-  string,
-  string
-> | null>({
+export const lastVisitedObjectMetadataItemIdState = createState<string | null>({
   key: 'lastVisitedObjectMetadataItemIdState',
   defaultValue: null,
   effects: [localStorageEffect()],

packages/twenty-front/src/modules/navigation/states/lastVisitedViewPerObjectMetadataItemState.ts

@@ -1,9 +1,11 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createState } from 'twenty-ui';
 import { localStorageEffect } from '~/utils/recoil-effects';
 
-export const lastVisitedViewPerObjectMetadataItemState =
-  createComponentState<Record<string, string> | null>({
-    key: 'lastVisitedViewPerObjectMetadataItemState',
-    defaultValue: null,
-    effects: [localStorageEffect()],
-  });
+export const lastVisitedViewPerObjectMetadataItemState = createState<Record<
+  string,
+  string
+> | null>({
+  key: 'lastVisitedViewPerObjectMetadataItemState',
+  defaultValue: null,
+  effects: [localStorageEffect()],
+});