fix: remove navigation root and own and shared calls (#1211)

* fix: remove navigation root and own and shared calls * refactor: fix tests * refactor :remove only * refactor: apply PR requested changes
graasp · May 3, 2024 · 4acd5ba · 4acd5ba
1 parent 40884c6
commit 4acd5ba
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 159 deletions.
diff --git a/cypress/e2e/item/home/home.cy.ts b/cypress/e2e/item/home/home.cy.ts
@@ -1,6 +1,6 @@
 import { ITEM_PAGE_SIZE } from '@/config/constants';
 
-import i18n, { BUILDER_NAMESPACE } from '../../../../src/config/i18n';
+import i18n from '../../../../src/config/i18n';
 import { HOME_PATH, ITEMS_PATH } from '../../../../src/config/paths';
 import {
   ACCESSIBLE_ITEMS_NEXT_PAGE_BUTTON_SELECTOR,
@@ -9,21 +9,16 @@ import {
   ITEMS_GRID_PAGINATION_ID,
   ITEMS_TABLE_ROW,
   ITEM_SEARCH_INPUT_ID,
-  NAVIGATION_ROOT_ID,
   buildItemCard,
   buildItemsTableRowIdAttribute,
   buildItemsTableRowSelector,
 } from '../../../../src/config/selectors';
 import { ItemLayoutMode } from '../../../../src/enums';
-import { BUILDER } from '../../../../src/langs/constants';
 import { SAMPLE_ITEMS, generateOwnItems } from '../../../fixtures/items';
 import { CURRENT_USER } from '../../../fixtures/members';
 import { NAVIGATION_LOAD_PAUSE } from '../../../support/constants';
 import { ItemForTest } from '../../../support/types';
 
-const translateBuilder = (key: string) =>
-  i18n.t(key, { ns: BUILDER_NAMESPACE });
-
 const sampleItems = generateOwnItems(30);
 
 // register a custom one time interceptor to listen specifically
@@ -169,23 +164,13 @@ describe('Home', () => {
           }
         });
 
-        // root title
-        cy.get(`#${NAVIGATION_ROOT_ID}`).contains(
-          translateBuilder(BUILDER.NAVIGATION_MY_ITEMS_TITLE),
-        );
-
         // visit child
         const { id: childChildId } = SAMPLE_ITEMS.items[3];
         cy.goToItemInGrid(childChildId);
 
         // expect no children
         cy.get(`#${ITEMS_GRID_NO_ITEM_ID}`).should('exist');
 
-        // root title
-        cy.get(`#${NAVIGATION_ROOT_ID}`).contains(
-          translateBuilder(BUILDER.NAVIGATION_MY_ITEMS_TITLE),
-        );
-
         // return parent with navigation and should display children
         cy.wait(NAVIGATION_LOAD_PAUSE);
         cy.goToItemWithNavigation(childId);
@@ -200,10 +185,6 @@ describe('Home', () => {
             cy.get(`#${buildItemCard(item.id)}`).should('exist');
           }
         });
-        // root title
-        cy.get(`#${NAVIGATION_ROOT_ID}`).contains(
-          translateBuilder(BUILDER.NAVIGATION_MY_ITEMS_TITLE),
-        );
       });
     });
   });

diff --git a/cypress/e2e/item/shared/sharedItems.cy.ts b/cypress/e2e/item/shared/sharedItems.cy.ts
diff --git a/cypress/e2e/item/view/viewFolder.cy.ts b/cypress/e2e/item/view/viewFolder.cy.ts
@@ -1,8 +1,8 @@
 import i18n from '../../../../src/config/i18n';
-import { HOME_PATH, buildItemPath } from '../../../../src/config/paths';
+import { buildItemPath } from '../../../../src/config/paths';
 import {
   ITEM_SEARCH_INPUT_ID,
-  NAVIGATION_ROOT_ID,
+  NAVIGATION_HOME_ID,
   buildItemCard,
   buildItemsTableRowIdAttribute,
 } from '../../../../src/config/selectors';
@@ -47,7 +47,7 @@ describe('View Folder', () => {
       expectFolderViewScreenLayout({ item: SAMPLE_ITEMS.items[0] });
 
       // visit home
-      cy.get(`#${NAVIGATION_ROOT_ID} [href="${HOME_PATH}"]`).click();
+      cy.get(`#${NAVIGATION_HOME_ID}`).click();
 
       // should get accessible items
       cy.wait('@getAccessibleItems').then(({ response: { body } }) => {
@@ -105,7 +105,7 @@ describe('View Folder', () => {
 
         expectFolderViewScreenLayout({ item: SAMPLE_ITEMS.items[0] });
         // visit home
-        cy.get(`#${NAVIGATION_ROOT_ID} [href="${HOME_PATH}"]`).click();
+        cy.get(`#${NAVIGATION_HOME_ID}`).click();
 
         cy.wait('@getAccessibleItems').then(({ response: { body } }) => {
           // check item is created and displayed

diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
@@ -1,30 +1,23 @@
-import { useLocation, useParams } from 'react-router-dom';
+import { Link, useLocation, useParams } from 'react-router-dom';
 
-import { HomeMenu, ItemMenu, Navigation } from '@graasp/ui';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import { IconButton } from '@mui/material';
+
+import { Navigation } from '@graasp/ui';
+
+import { Home } from 'lucide-react';
 
 import { useBuilderTranslation } from '../../config/i18n';
-import {
-  BOOKMARKED_ITEMS_PATH,
-  HOME_PATH,
-  SHARED_ITEMS_PATH,
-  buildItemPath,
-} from '../../config/paths';
+import { HOME_PATH, buildItemPath } from '../../config/paths';
 import { hooks } from '../../config/queryClient';
 import {
+  NAVIGATION_HOME_ID,
   NAVIGATION_ROOT_ID,
   buildNavigationLink,
 } from '../../config/selectors';
-import { BUILDER } from '../../langs/constants';
 import { buildExtraItems } from './utils';
 
-const {
-  useItem,
-  useParents,
-  useCurrentMember,
-  useChildren,
-  useOwnItems,
-  useSharedItems,
-} = hooks;
+const { useItem, useParents, useCurrentMember, useChildren } = hooks;
 
 const Navigator = (): JSX.Element | null => {
   const { t: translateBuilder } = useBuilderTranslation();
@@ -42,69 +35,31 @@ const Navigator = (): JSX.Element | null => {
     enabled: !!itemPath,
   });
 
-  const isParentOwned =
-    currentMember &&
-    (item?.creator?.id ?? parents?.[0]?.creator?.id) === currentMember?.id;
-
   if (isItemLoading || areParentsLoading) {
     return null;
   }
 
   const buildToItemPath = (id: string) => buildItemPath(id);
 
-  const menu = [
-    // todo: remove distinction -> not a good idea to show the whole root in arrow
-    {
-      name: translateBuilder(BUILDER.NAVIGATION_MY_ITEMS_TITLE),
-      id: 'home',
-      to: HOME_PATH,
-    },
-    {
-      name: translateBuilder(BUILDER.NAVIGATION_SHARED_ITEMS_TITLE),
-      id: 'shared',
-      to: SHARED_ITEMS_PATH,
-    },
-    {
-      name: translateBuilder(BUILDER.NAVIGATION_BOOKMARKED_ITEMS_TITLE),
-      id: 'bookmark',
-      to: BOOKMARKED_ITEMS_PATH,
-    },
-  ];
-
   const renderRoot = () => {
     // no access to root if signed out
     if (!currentMember) {
       return null;
     }
 
-    const selected =
-      isParentOwned || pathname === HOME_PATH ? menu[0] : menu[1];
-
     return (
       <>
-        <HomeMenu
-          selected={selected}
-          elements={menu}
-          buildMenuItemId={buildNavigationLink}
-        />
-        <ItemMenu
-          itemId="root"
-          useChildren={
-            isParentOwned || pathname === HOME_PATH
-              ? (useOwnItems as any)
-              : useSharedItems
-          }
-          buildToItemPath={buildToItemPath}
-        />
+        <Link to={HOME_PATH}>
+          <IconButton id={NAVIGATION_HOME_ID}>
+            <Home />
+          </IconButton>
+        </Link>
+        <ArrowForwardIosIcon sx={{ m: 2 }} fontSize="inherit" />
       </>
     );
   };
 
-  if (
-    item === undefined &&
-    pathname !== SHARED_ITEMS_PATH &&
-    pathname !== HOME_PATH
-  ) {
+  if (item === undefined && pathname !== HOME_PATH) {
     return null;
   }
 

diff --git a/src/config/selectors.ts b/src/config/selectors.ts
@@ -254,6 +254,7 @@ export const buildInvitationTableRowSelector = (id: string): string =>
 export const ITEM_RESEND_INVITATION_BUTTON_CLASS = 'itemResendInvitationButton';
 export const CREATE_MEMBERSHIP_FORM_ID = 'createMembershipFormId';
 export const NAVIGATION_ROOT_ID = 'navigationRoot';
+export const NAVIGATION_HOME_ID = 'navigationHome';
 export const HEADER_MEMBER_MENU_BUTTON_ID = 'headerMemberMenuButton';
 export const HEADER_MEMBER_MENU_SEE_PROFILE_BUTTON_ID =
   'headerMemberMenuSeeProfileButton';