fix: defaultHomePagePath to be last visited page or alphatically firs…

…t active object with the name (#6629) ### ISSUE - Closes #6612 - Closes #6125 - Closes #5949 - Closes #6652 ### Description - [x] need to check changes in jest test. - [x] fallback to alphabetically firstActiveObject with the name if no last visited exist https://github.com/user-attachments/assets/dd11480b-c47f-4393-9857-8a55467061e3 - [x] fallback to last visited page with the last visited view by default if no views would have toggled with subNav or viewChangeDropdown it will fallback to INDEX or if no INDEX view then zero position view, works with both subNavViewBar and viewChangeDropdown. https://github.com/user-attachments/assets/33e97e55-2aa2-4c45-a3ab-fc8e43f4964c https://github.com/user-attachments/assets/d1db76a2-da59-4cd2-81bf-d6119408fbbf - [x] lastVisited view across the objects have been persisted so now navigating back from x object to y or z to x will open always last visited view and defaults to index or zero position view. https://github.com/user-attachments/assets/70a01a11-a7ef-4031-926e-02923551466c - [x] lastVisited Page with view has been persisted across the workspace, scope is per workspace so jumping between workspace will also work to have lastvisited object of particular workspace. https://github.com/user-attachments/assets/25107339-8ec1-4421-9f6e-1da43b8f4816 - [x] when lastVisitedObject has been deactivated and going back from settings should have a fallback Object that is alphabetically First activeObject. https://github.com/user-attachments/assets/6b24a933-b139-49ac-82b2-eac5e4848516 - [x] Creation of new View of **anyType** should also get persist and that should get lastVisitedObject with View in case the user leaves from there right away. https://github.com/user-attachments/assets/80ff7114-051d-4e9b-ab58-0e1e3a7d328c - [x] Similarly deleted view also works. https://github.com/user-attachments/assets/cb0b8043-fba4-4a66-941d-b3fa0a57eb22 - [x] fixed active subnav background when opening object directly with root path **/** , it wasn't showing active subNav background. Before: https://github.com/user-attachments/assets/db341c4a-f1f9-43c4-9838-37d1a1f5ab8e Fixed: https://github.com/user-attachments/assets/0f0fd492-bc5d-4efe-b695-bee4e3f41d4e --------- Co-authored-by: Lucas Bordeau <[email protected]>
twentyhq · Aug 28, 2024 · 747a154 · 747a154
1 parent 5deb0ab
commit 747a154
Show file tree

Hide file tree

Showing 21 changed files with 457 additions and 66 deletions.
diff --git a/packages/twenty-front/src/hooks/__tests__/usePageChangeEffectNavigateLocation.test.ts b/packages/twenty-front/src/hooks/__tests__/usePageChangeEffectNavigateLocation.test.ts
@@ -1,9 +1,10 @@
 import { useIsLogged } from '@/auth/hooks/useIsLogged';
+import { useDefaultHomePagePath } from '@/navigation/hooks/useDefaultHomePagePath';
 import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
 import { AppPath } from '@/types/AppPath';
 import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
 import { OnboardingStatus, SubscriptionStatus } from '~/generated/graphql';
-import { useDefaultHomePagePath } from '~/hooks/useDefaultHomePagePath';
+
 import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 import { usePageChangeEffectNavigateLocation } from '~/hooks/usePageChangeEffectNavigateLocation';
 import { UNTESTED_APP_PATHS } from '~/testing/constants/UntestedAppPaths';
@@ -38,7 +39,7 @@ const setupMockIsLogged = (isLogged: boolean) => {
 
 const defaultHomePagePath = '/objects/companies';
 
-jest.mock('~/hooks/useDefaultHomePagePath');
+jest.mock('@/navigation/hooks/useDefaultHomePagePath');
 jest.mocked(useDefaultHomePagePath).mockReturnValue({
   defaultHomePagePath,
 });

diff --git a/packages/twenty-front/src/hooks/useDefaultHomePagePath.tsx b/packages/twenty-front/src/hooks/useDefaultHomePagePath.tsx
diff --git a/packages/twenty-front/src/hooks/usePageChangeEffectNavigateLocation.ts b/packages/twenty-front/src/hooks/usePageChangeEffectNavigateLocation.ts
@@ -1,10 +1,10 @@
 import { useIsLogged } from '@/auth/hooks/useIsLogged';
+import { useDefaultHomePagePath } from '@/navigation/hooks/useDefaultHomePagePath';
 import { useOnboardingStatus } from '@/onboarding/hooks/useOnboardingStatus';
 import { AppPath } from '@/types/AppPath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
 import { OnboardingStatus, SubscriptionStatus } from '~/generated/graphql';
-import { useDefaultHomePagePath } from '~/hooks/useDefaultHomePagePath';
 import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 
 export const usePageChangeEffectNavigateLocation = () => {
@@ -107,12 +107,13 @@ export const usePageChangeEffectNavigateLocation = () => {
 
   if (
     onboardingStatus === OnboardingStatus.Completed &&
-    isMatchingOnboardingRoute
+    isMatchingOnboardingRoute &&
+    isLoggedIn
   ) {
     return defaultHomePagePath;
   }
 
-  if (isMatchingLocation(AppPath.Index)) {
+  if (isMatchingLocation(AppPath.Index) && isLoggedIn) {
     return defaultHomePagePath;
   }
 

diff --git a/.../__tests__/useDefaultHomePagePath.test.ts → .../__tests__/useDefaultHomePagePath.test.ts b/.../__tests__/useDefaultHomePagePath.test.ts → .../__tests__/useDefaultHomePagePath.test.ts
@@ -2,19 +2,16 @@ import { renderHook } from '@testing-library/react';
 import { RecoilRoot, useSetRecoilState } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
-import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
-import { getObjectMetadataItemsMock } from '@/object-metadata/utils/getObjectMetadataItemsMock';
+import { useDefaultHomePagePath } from '@/navigation/hooks/useDefaultHomePagePath';
+import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
+import {
+  COMPANY_OBJECT_METADATA_ID,
+  getObjectMetadataItemsMock,
+} from '@/object-metadata/utils/getObjectMetadataItemsMock';
 import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
 import { AppPath } from '@/types/AppPath';
-import { useDefaultHomePagePath } from '~/hooks/useDefaultHomePagePath';
 import { mockedUserData } from '~/testing/mock-data/users';
 
-const objectMetadataItem = getObjectMetadataItemsMock()[0];
-jest.mock('@/object-metadata/hooks/useObjectMetadataItem');
-jest.mocked(useObjectMetadataItem).mockReturnValue({
-  objectMetadataItem,
-});
-
 jest.mock('@/prefetch/hooks/usePrefetchedData');
 const setupMockPrefetchedData = (viewId?: string) => {
   jest.mocked(usePrefetchedData).mockReturnValue({
@@ -24,7 +21,7 @@ const setupMockPrefetchedData = (viewId?: string) => {
           {
             id: viewId,
             __typename: 'object',
-            objectMetadataId: objectMetadataItem.id,
+            objectMetadataId: COMPANY_OBJECT_METADATA_ID,
           },
         ]
       : [],
@@ -35,6 +32,12 @@ const renderHooks = (withCurrentUser: boolean) => {
   const { result } = renderHook(
     () => {
       const setCurrentUser = useSetRecoilState(currentUserState);
+      const setObjectMetadataItems = useSetRecoilState(
+        objectMetadataItemsState,
+      );
+
+      setObjectMetadataItems(getObjectMetadataItemsMock());
+
       if (withCurrentUser) {
         setCurrentUser(mockedUserData);
       }

diff --git a/packages/twenty-front/src/modules/navigation/hooks/useDefaultHomePagePath.ts b/packages/twenty-front/src/modules/navigation/hooks/useDefaultHomePagePath.ts
@@ -0,0 +1,90 @@
+import { currentUserState } from '@/auth/states/currentUserState';
+import { useLastVisitedObjectMetadataItem } from '@/navigation/hooks/useLastVisitedObjectMetadataItem';
+import { ObjectPathInfo } from '@/navigation/types/ObjectPathInfo';
+import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
+import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
+import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
+import { AppPath } from '@/types/AppPath';
+import { View } from '@/views/types/View';
+import { useCallback, useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
+import { isDefined } from '~/utils/isDefined';
+
+export const useDefaultHomePagePath = () => {
+  const currentUser = useRecoilValue(currentUserState);
+  const { activeObjectMetadataItems, alphaSortedActiveObjectMetadataItems } =
+    useFilteredObjectMetadataItems();
+  const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
+  const { lastVisitedObjectMetadataItemId } =
+    useLastVisitedObjectMetadataItem();
+
+  const getActiveObjectMetadataItemMatchingId = useCallback(
+    (objectMetadataId: string) => {
+      return activeObjectMetadataItems.find(
+        (item) => item.id === objectMetadataId,
+      );
+    },
+    [activeObjectMetadataItems],
+  );
+
+  const getFirstView = useCallback(
+    (objectMetadataItemId: string | undefined | null) =>
+      views.find((view) => view.objectMetadataId === objectMetadataItemId),
+    [views],
+  );
+
+  const firstObjectPathInfo = useMemo<ObjectPathInfo | null>(() => {
+    const [firstObjectMetadataItem] = alphaSortedActiveObjectMetadataItems;
+
+    if (!isDefined(firstObjectMetadataItem)) {
+      return null;
+    }
+
+    const view = getFirstView(firstObjectMetadataItem?.id);
+
+    return { objectMetadataItem: firstObjectMetadataItem, view };
+  }, [alphaSortedActiveObjectMetadataItems, getFirstView]);
+
+  const defaultObjectPathInfo = useMemo<ObjectPathInfo | null>(() => {
+    if (!isDefined(lastVisitedObjectMetadataItemId)) {
+      return firstObjectPathInfo;
+    }
+
+    const lastVisitedObjectMetadataItem = getActiveObjectMetadataItemMatchingId(
+      lastVisitedObjectMetadataItemId,
+    );
+
+    if (isDefined(lastVisitedObjectMetadataItem)) {
+      return {
+        view: getFirstView(lastVisitedObjectMetadataItemId),
+        objectMetadataItem: lastVisitedObjectMetadataItem,
+      };
+    }
+
+    return firstObjectPathInfo;
+  }, [
+    firstObjectPathInfo,
+    getActiveObjectMetadataItemMatchingId,
+    getFirstView,
+    lastVisitedObjectMetadataItemId,
+  ]);
+
+  const defaultHomePagePath = useMemo(() => {
+    if (!isDefined(currentUser)) {
+      return AppPath.SignInUp;
+    }
+
+    if (!isDefined(defaultObjectPathInfo)) {
+      return AppPath.NotFound;
+    }
+
+    const namePlural = defaultObjectPathInfo.objectMetadataItem?.namePlural;
+    const viewParam = defaultObjectPathInfo.view
+      ? `?view=${defaultObjectPathInfo.view.id}`
+      : '';
+
+    return `/objects/${namePlural}${viewParam}`;
+  }, [currentUser, defaultObjectPathInfo]);
+
+  return { defaultHomePagePath };
+};
diff --git a/packages/twenty-front/src/modules/navigation/hooks/useLastVisitedObjectMetadataItem.ts b/packages/twenty-front/src/modules/navigation/hooks/useLastVisitedObjectMetadataItem.ts
@@ -0,0 +1,66 @@
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { lastVisitedObjectMetadataItemIdStateSelector } from '@/navigation/states/selectors/lastVisitedObjectMetadataItemIdStateSelector';
+import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
+import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
+import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+import { isDefined } from 'twenty-ui';
+import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
+
+export const useLastVisitedObjectMetadataItem = () => {
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const scopeId = currentWorkspace?.id ?? '';
+
+  const lastVisitedObjectMetadataItemIdState = extractComponentState(
+    lastVisitedObjectMetadataItemIdStateSelector,
+    scopeId,
+  );
+
+  const [lastVisitedObjectMetadataItemId, setLastVisitedObjectMetadataItemId] =
+    useRecoilState(lastVisitedObjectMetadataItemIdState);
+
+  const {
+    findActiveObjectMetadataItemBySlug,
+    alphaSortedActiveObjectMetadataItems,
+  } = useFilteredObjectMetadataItems();
+
+  const setNavigationMemorizedUrl = useSetRecoilState(
+    navigationMemorizedUrlState,
+  );
+
+  const setFallbackForLastVisitedObjectMetadataItem = (
+    objectMetadataItemId: string,
+  ) => {
+    const isDeactivateDefault = isDeeplyEqual(
+      lastVisitedObjectMetadataItemId,
+      objectMetadataItemId,
+    );
+
+    const [newFallbackObjectMetadataItem] =
+      alphaSortedActiveObjectMetadataItems.filter(
+        (item) => item.id !== objectMetadataItemId,
+      );
+
+    if (isDeactivateDefault) {
+      setLastVisitedObjectMetadataItemId(newFallbackObjectMetadataItem.id);
+      setNavigationMemorizedUrl(
+        `/objects/${newFallbackObjectMetadataItem.namePlural}`,
+      );
+    }
+  };
+
+  const setLastVisitedObjectMetadataItem = (objectNamePlural: string) => {
+    const fallbackObjectMetadataItem =
+      findActiveObjectMetadataItemBySlug(objectNamePlural);
+
+    if (isDefined(fallbackObjectMetadataItem)) {
+      setLastVisitedObjectMetadataItemId(fallbackObjectMetadataItem.id);
+    }
+  };
+
+  return {
+    lastVisitedObjectMetadataItemId,
+    setLastVisitedObjectMetadataItem,
+    setFallbackForLastVisitedObjectMetadataItem,
+  };
+};
diff --git a/packages/twenty-front/src/modules/navigation/hooks/useLastVisitedView.ts b/packages/twenty-front/src/modules/navigation/hooks/useLastVisitedView.ts
@@ -0,0 +1,92 @@
+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';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { isDefined } from 'twenty-ui';
+
+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,
+  ] = useRecoilState(lastVisitedViewPerObjectMetadataItemState);
+
+  const { findActiveObjectMetadataItemBySlug } =
+    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 fallbackObjectMetadataItem =
+      findActiveObjectMetadataItemBySlug(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);
+
+      setLastVisitedViewPerObjectMetadataItem({
+        [fallbackObjectMetadataItem.id]: fallbackViewId,
+      });
+    }
+  };
+
+  const getLastVisitedViewIdFromObjectNamePlural = (
+    objectNamePlural: string,
+  ) => {
+    const objectMetadataItemId: string | undefined =
+      findActiveObjectMetadataItemBySlug(objectNamePlural)?.id;
+    return objectMetadataItemId
+      ? lastVisitedViewPerObjectMetadataItem?.[objectMetadataItemId]
+      : undefined;
+  };
+
+  const getLastVisitedViewIdFromObjectMetadataItemId = (
+    objectMetadataItemId: string,
+  ) => {
+    return lastVisitedViewPerObjectMetadataItem?.[objectMetadataItemId];
+  };
+  return {
+    setLastVisitedView,
+    getLastVisitedViewIdFromObjectNamePlural,
+    getLastVisitedViewIdFromObjectMetadataItemId,
+    setFallbackForLastVisitedView,
+  };
+};
diff --git a/packages/twenty-front/src/modules/navigation/states/lastVisitedObjectMetadataItemIdState.ts b/packages/twenty-front/src/modules/navigation/states/lastVisitedObjectMetadataItemIdState.ts
@@ -0,0 +1,11 @@
+import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { localStorageEffect } from '~/utils/recoil-effects';
+
+export const lastVisitedObjectMetadataItemIdState = createComponentState<Record<
+  string,
+  string
+> | null>({
+  key: 'lastVisitedObjectMetadataItemIdState',
+  defaultValue: null,
+  effects: [localStorageEffect()],
+});