feat: add query param for mode (#1246)

* feat: add query param for mode * refactor: fix tests * refactor: update graasp ui * refactor: do not open view item in player in new tab * refactor: apply PR requested changes
graasp · May 23, 2024 · 279193e · 279193e
1 parent 45b1977
commit 279193e
Show file tree

Hide file tree

Showing 23 changed files with 808 additions and 87 deletions.
diff --git a/cypress/e2e/item/home/home.cy.ts b/cypress/e2e/item/home/home.cy.ts
@@ -17,6 +17,7 @@ import {
   buildItemCard,
   buildItemsTableRowIdAttribute,
   buildItemsTableRowSelector,
+  buildMapViewId,
 } from '../../../../src/config/selectors';
 import { ItemLayoutMode } from '../../../../src/enums';
 import { generateOwnItems } from '../../../fixtures/items';
@@ -47,6 +48,16 @@ const interceptAccessibleItemsSearch = (searchTerm: string) =>
     .as('getAccessibleSearch');
 
 describe('Home', () => {
+  it('visit Home on map by default', () => {
+    cy.setUpApi({
+      items: generateOwnItems(30),
+    });
+    i18n.changeLanguage(CURRENT_USER.extra.lang as string);
+    cy.visit(`${HOME_PATH}?mode=map`);
+
+    cy.get(`#${buildMapViewId()}`).should('be.visible');
+  });
+
   describe('Grid', () => {
     describe('Features', () => {
       beforeEach(() => {

diff --git a/cypress/e2e/item/publish/coEditorSettings.cy.ts b/cypress/e2e/item/publish/coEditorSettings.cy.ts
@@ -69,7 +69,7 @@ const item = PackedFolderItemFactory(
   { permission: null, publicTag: { type: ItemTagType.Public } },
 );
 
-describe.only('Co-editor setting permissions', () => {
+describe('Co-editor setting permissions', () => {
   it('User signed out cannot edit co-editor setting', () => {
     cy.setUpApi({
       items: [item],

diff --git a/cypress/e2e/item/view/viewFolder.cy.ts b/cypress/e2e/item/view/viewFolder.cy.ts
@@ -7,6 +7,7 @@ import {
   NAVIGATION_HOME_ID,
   buildItemCard,
   buildItemsTableRowIdAttribute,
+  buildMapViewId,
 } from '../../../../src/config/selectors';
 import { ItemLayoutMode } from '../../../../src/enums';
 import { CURRENT_USER } from '../../../fixtures/members';
@@ -22,6 +23,17 @@ const children = [child1, child2];
 const items = [parentItem, item1, child1, child2];
 
 describe('View Folder', () => {
+  it('View folder on map by default', () => {
+    cy.setUpApi({
+      items,
+    });
+
+    const { id } = parentItem;
+    cy.visit(buildItemPath(id, { mode: ItemLayoutMode.Map }));
+
+    cy.get(`#${buildMapViewId(id)}`).should('be.visible');
+  });
+
   describe('Grid', () => {
     beforeEach(() => {
       cy.setUpApi({
@@ -32,8 +44,7 @@ describe('View Folder', () => {
 
     it('visit item by id', () => {
       const { id } = parentItem;
-      cy.visit(buildItemPath(id));
-      cy.switchMode(ItemLayoutMode.Grid);
+      cy.visit(buildItemPath(id, { mode: ItemLayoutMode.Grid }));
 
       // should get current item
       cy.wait('@getItem');
@@ -61,8 +72,7 @@ describe('View Folder', () => {
 
     it('search', () => {
       const { id } = parentItem;
-      cy.visit(buildItemPath(id));
-      cy.switchMode(ItemLayoutMode.Grid);
+      cy.visit(buildItemPath(id, { mode: ItemLayoutMode.Grid }));
 
       cy.get(`#${buildItemCard(child1.id)}`).should('be.visible');
       cy.get(`#${ITEM_SEARCH_INPUT_ID}`).type(child1.name);
@@ -80,9 +90,7 @@ describe('View Folder', () => {
     describe('Navigation', () => {
       it('visit folder by id', () => {
         const { id } = parentItem;
-        cy.visit(buildItemPath(id));
-
-        cy.switchMode(ItemLayoutMode.List);
+        cy.visit(buildItemPath(id, { mode: ItemLayoutMode.List }));
 
         // should get current item
         cy.wait('@getItem');
@@ -109,8 +117,7 @@ describe('View Folder', () => {
 
     it('search', () => {
       const { id } = parentItem;
-      cy.visit(buildItemPath(id));
-      cy.switchMode(ItemLayoutMode.List);
+      cy.visit(buildItemPath(id, { mode: ItemLayoutMode.List }));
 
       cy.get(buildItemsTableRowIdAttribute(child1.id)).should('be.visible');
       cy.get(`#${ITEM_SEARCH_INPUT_ID}`).type(child1.name);

diff --git a/cypress/support/commands/navigation.ts b/cypress/support/commands/navigation.ts
@@ -18,5 +18,5 @@ Cypress.Commands.add('goToHome', () => {
 });
 
 Cypress.Commands.add('goToItemWithNavigation', (id) => {
-  cy.get(`[href="${buildItemPath(id)}"]`).click();
+  cy.get(`[href^="${buildItemPath(id)}"]`).click();
 });
diff --git a/package.json b/package.json
@@ -22,9 +22,9 @@
     "@graasp/chatbox": "3.1.0",
     "@graasp/map": "1.12.1",
     "@graasp/query-client": "3.8.0",
-    "@graasp/sdk": "4.9.0",
+    "@graasp/sdk": "4.11.0",
     "@graasp/translations": "1.28.0",
-    "@graasp/ui": "4.17.1",
+    "@graasp/ui": "4.18.2",
     "@mui/icons-material": "5.15.18",
     "@mui/lab": "5.0.0-alpha.170",
     "@mui/material": "5.15.18",

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -10,7 +10,6 @@ import {
   BOOKMARKED_ITEMS_PATH,
   HOME_PATH,
   ITEMS_PATH,
-  ITEM_INFORMATION_PATH,
   ITEM_PUBLISH_PATH,
   ITEM_SETTINGS_PATH,
   ITEM_SHARE_PATH,
@@ -29,7 +28,6 @@ import HomeScreen from './pages/HomeScreen';
 import MapItemsScreen from './pages/MapItemsScreen';
 import PublishedItemsScreen from './pages/PublishedItemsScreen';
 import RecycledItemsScreen from './pages/RecycledItemsScreen';
-import ItemInformationPage from './pages/item/ItemInformationPage';
 import ItemPageLayout from './pages/item/ItemPageLayout';
 import ItemScreen from './pages/item/ItemScreen';
 import ItemScreenLayout from './pages/item/ItemScreenLayout';
@@ -103,10 +101,6 @@ const App = (): JSX.Element => {
             <Route path={ITEM_SHARE_PATH} element={<ItemSharingPage />} />
             <Route path={ITEM_PUBLISH_PATH} element={<LibrarySettingsPage />} />
             <Route path={ITEM_SETTINGS_PATH} element={<ItemSettingsPage />} />
-            <Route
-              path={ITEM_INFORMATION_PATH}
-              element={<ItemInformationPage />}
-            />
           </Route>
         </Route>
         <Route path={RECYCLE_BIN_PATH} element={<RecycleWithAuthorization />} />

diff --git a/src/components/common/BackButton.tsx b/src/components/common/BackButton.tsx
@@ -1,20 +1,24 @@
+import { Link, LinkProps } from 'react-router-dom';
+
 import ArrowCircleLeftRoundedIcon from '@mui/icons-material/ArrowCircleLeftRounded';
 import { IconButton, Tooltip } from '@mui/material';
 
 import { useBuilderTranslation } from '@/config/i18n';
 import { BUILDER } from '@/langs/constants';
 
 interface Props {
-  onClick: () => void;
+  to: LinkProps['to'];
 }
-const BackButton = ({ onClick }: Props): JSX.Element => {
+const BackButton = ({ to }: Props): JSX.Element => {
   const { t } = useBuilderTranslation();
 
   return (
     <Tooltip title={t(BUILDER.BACK)}>
-      <IconButton onClick={onClick}>
-        <ArrowCircleLeftRoundedIcon fontSize="large" />
-      </IconButton>
+      <Link to={to}>
+        <IconButton>
+          <ArrowCircleLeftRoundedIcon fontSize="large" />
+        </IconButton>
+      </Link>
     </Tooltip>
   );
 };

diff --git a/src/components/common/ShareButton.tsx b/src/components/common/ShareButton.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 
 import { ShareButton as GraaspShareButton } from '@graasp/ui';
 
@@ -16,10 +16,16 @@ type Props = {
 };
 
 const ShareButton = ({ itemId }: Props): JSX.Element => {
+  const [searchParams] = useSearchParams();
   const { t: translateBuilder } = useBuilderTranslation();
 
   return (
-    <Link to={buildItemSharePath(itemId)}>
+    <Link
+      to={{
+        pathname: buildItemSharePath(itemId),
+        search: searchParams.toString(),
+      }}
+    >
       <GraaspShareButton
         tooltip={translateBuilder(BUILDER.SHARE_ITEM_BUTTON)}
         ariaLabel={translateBuilder(BUILDER.SHARE_ITEM_BUTTON)}

diff --git a/src/components/context/LayoutContext.tsx b/src/components/context/LayoutContext.tsx
@@ -1,4 +1,5 @@
 import { Dispatch, createContext, useContext, useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 import { ChatStatus } from '@graasp/sdk';
 
@@ -41,8 +42,11 @@ export const LayoutContextProvider = ({
 }: {
   children: JSX.Element;
 }): JSX.Element => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
   // layout mode: grid or list
-  const [mode, setMode] = useState<ItemLayoutMode>(DEFAULT_ITEM_LAYOUT_MODE);
+  const mode =
+    (searchParams.get('mode') as ItemLayoutMode) ?? DEFAULT_ITEM_LAYOUT_MODE;
 
   // item screen editing id
   // todo: separate in item specific context
@@ -62,15 +66,23 @@ export const LayoutContextProvider = ({
   const value: LayoutContextInterface = useMemo(
     () => ({
       mode,
-      setMode,
+      setMode: (m) => {
+        setSearchParams({ mode: m });
+      },
       editingItemId,
       setEditingItemId,
       openedActionTabId,
       setOpenedActionTabId,
       isChatboxMenuOpen,
       setIsChatboxMenuOpen,
     }),
-    [editingItemId, isChatboxMenuOpen, mode, openedActionTabId],
+    [
+      editingItemId,
+      isChatboxMenuOpen,
+      mode,
+      openedActionTabId,
+      setSearchParams,
+    ],
   );
 
   return (

diff --git a/src/components/item/MapView.tsx b/src/components/item/MapView.tsx
@@ -8,6 +8,7 @@ import { useMobileView } from '@graasp/ui';
 
 import { hooks, mutations } from '@/config/queryClient';
 
+import { buildMapViewId } from '../../config/selectors';
 import NewItemModal from '../main/NewItemModal';
 
 type Props = {
@@ -63,7 +64,12 @@ const useCurrentLocation = (enableGeolocation = false) => {
               );
             } else {
               console.error('geolocation denied:', state);
+              setHasFetchedCurrentLocation(true);
             }
+          })
+          .catch((e) => {
+            console.error('geolocation denied:', e);
+            setHasFetchedCurrentLocation(true);
           });
       }
     }
@@ -112,7 +118,10 @@ const MapView = ({
           (enableGeolocation && !hasFetchedCurrentLocation) ? (
             <Skeleton width="100%" height="100%" />
           ) : (
-            <div style={{ width: '100%', height: '100%' }}>
+            <div
+              id={buildMapViewId(parentId)}
+              style={{ width: '100%', height: '100%' }}
+            >
               <Map
                 currentPosition={currentPosition}
                 useDeleteItemGeolocation={mutations.useDeleteItemGeolocation}

diff --git a/src/components/item/sharing/shortLink/ShortLinksRenderer.tsx b/src/components/item/sharing/shortLink/ShortLinksRenderer.tsx
@@ -9,6 +9,7 @@ import {
   appendPathToUrl,
 } from '@graasp/sdk';
 
+import { useLayoutContext } from '@/components/context/LayoutContext';
 import { GRAASP_REDIRECTION_HOST } from '@/config/env';
 import { hooks } from '@/config/queryClient';
 import { ShortLinkPlatform, randomAlias } from '@/utils/shortLink';
@@ -35,6 +36,7 @@ const ShortLinksRenderer = ({
   itemId,
   canAdminShortLink,
 }: Props): JSX.Element => {
+  const { mode } = useLayoutContext();
   const { data: apiLinks, isLoading } = useShortLinksItem(itemId);
   const { data: publishedEntry } = useItemPublishedInformation({ itemId });
   const [modalOpen, setOpen] = useState(false);
@@ -59,6 +61,11 @@ const ShortLinksRenderer = ({
       const clientHostManager = ClientHostManager.getInstance();
       const url = clientHostManager.getItemAsURL(platform, itemId);
 
+      // not ideal, provide a select to choose the mode?
+      if (platform === Context.Builder) {
+        url.searchParams.set('mode', mode);
+      }
+
       const shortLink = {
         alias: randomAlias(),
         platform,

diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx
@@ -1,4 +1,9 @@
-import { Link, useLocation, useParams } from 'react-router-dom';
+import {
+  Link,
+  useLocation,
+  useParams,
+  useSearchParams,
+} from 'react-router-dom';
 
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 import { IconButton } from '@mui/material';
@@ -20,6 +25,7 @@ import { buildExtraItems } from './utils';
 const { useItem, useParents, useCurrentMember, useChildren } = hooks;
 
 const Navigator = (): JSX.Element | null => {
+  const [searchParams] = useSearchParams();
   const { t: translateBuilder } = useBuilderTranslation();
   const { itemId } = useParams();
   const { pathname } = useLocation();
@@ -39,7 +45,8 @@ const Navigator = (): JSX.Element | null => {
     return null;
   }
 
-  const buildToItemPath = (id: string) => buildItemPath(id);
+  const buildToItemPath = (id: string) =>
+    `${buildItemPath(id)}?${searchParams.toString()}`;
 
   const renderRoot = () => {
     // no access to root if signed out
@@ -49,7 +56,7 @@ const Navigator = (): JSX.Element | null => {
 
     return (
       <>
-        <Link to={HOME_PATH}>
+        <Link to={{ pathname: HOME_PATH, search: searchParams.toString() }}>
           <IconButton id={NAVIGATION_HOME_ID}>
             <Home />
           </IconButton>

diff --git a/src/components/layout/utils.tsx b/src/components/layout/utils.tsx
@@ -1,16 +1,12 @@
 import GroupsIcon from '@mui/icons-material/Groups';
-import InfoIcon from '@mui/icons-material/Info';
 import SettingsIcon from '@mui/icons-material/Settings';
 
 import { LibraryIcon } from '@graasp/ui';
 
 import {
-  ITEM_INFORMATION_PATH,
   ITEM_PUBLISH_PATH,
   ITEM_SETTINGS_PATH,
   ITEM_SHARE_PATH,
-  buildItemInformationPath,
-  buildItemPath,
   buildItemPublishPath,
   buildItemSettingsPath,
   buildItemSharePath,
@@ -41,7 +37,7 @@ export const buildExtraItems = ({
     return [];
   }
 
-  const page = buildItemPath(location);
+  const page = location;
 
   // we don't switch to sub pages
   // const menuItems = [
@@ -100,15 +96,6 @@ export const buildExtraItems = ({
           menuItems: [],
         },
       ];
-    case page.includes(ITEM_INFORMATION_PATH):
-      return [
-        {
-          name: translate(BUILDER.ITEM_ACTION_INFORMATION),
-          icon: <InfoIcon />,
-          path: buildItemInformationPath(itemId),
-          menuItems: [],
-        },
-      ];
     default:
       return [];
   }