fix: default route and conventions for route screens (#976)

cypress/support/commands.ts

@@ -6,8 +6,6 @@ import 'cypress-localstorage-commands';
 import { DEFAULT_ITEM_LAYOUT_MODE } from '../../src/config/constants';
 import {
   ITEM_INFORMATION_BUTTON_ID,
-  ITEM_INFORMATION_ICON_IS_OPEN_CLASS,
-  ITEM_PANEL_ID,
   MODE_GRID_BUTTON_ID,
   MODE_LIST_BUTTON_ID,
 } from '../../src/config/selectors';
@@ -398,11 +396,7 @@ Cypress.Commands.add(
 );
 
 Cypress.Commands.add('openMetadataPanel', () => {
-  cy.get(`#${ITEM_PANEL_ID}`).then(($itemPanel) => {
-    if (!$itemPanel.hasClass(ITEM_INFORMATION_ICON_IS_OPEN_CLASS)) {
-      cy.get(`#${ITEM_INFORMATION_BUTTON_ID}`).click();
-    }
-  });
+  cy.get(`#${ITEM_INFORMATION_BUTTON_ID}`).click();
 });
 
 Cypress.Commands.add('attachFile', (selector, file, options = {}) => {

package.json

@@ -14,14 +14,15 @@
   },
   "type": "module",
   "dependencies": {
+    "@ag-grid-community/styles": "31.0.3",
     "@emotion/cache": "11.11.0",
     "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "3.0.1",
     "@graasp/query-client": "2.4.1",
     "@graasp/sdk": "3.4.1",
     "@graasp/translations": "1.22.1",
-    "@graasp/ui": "4.5.0",
+    "@graasp/ui": "4.5.1",
     "@mui/icons-material": "5.14.19",
     "@mui/lab": "5.0.0-alpha.151",
     "@mui/material": "5.14.19",

src/components/App.tsx

@@ -1,11 +1,9 @@
-import { useLocation } from 'react-router';
+import { Outlet, useLocation } from 'react-router';
 import { Route, Routes } from 'react-router-dom';
 
 import { saveUrlForRedirection } from '@graasp/sdk';
 import { CustomInitialLoader, withAuthorization } from '@graasp/ui';
 
-import * as Sentry from '@sentry/react';
-
 import { DOMAIN } from '@/config/env';
 import { SIGN_IN_PATH } from '@/config/externalPaths';
 
@@ -20,15 +18,15 @@ import {
   buildItemPath,
 } from '../config/paths';
 import { hooks } from '../config/queryClient';
-import FallbackComponent from './Fallback';
-import RecycleBinScreen from './RecycleBinScreen';
-import SharedItems from './SharedItems';
 import { useCurrentUserContext } from './context/CurrentUserContext';
-import FavoriteItems from './main/FavoriteItems';
-import Home from './main/Home';
-import ItemScreen from './main/ItemScreen';
-import PublishedItems from './main/PublishedItems';
+import Main from './main/Main';
 import Redirect from './main/Redirect';
+import FavoriteItemsScreen from './pages/FavoriteItemsScreen';
+import HomeScreen from './pages/HomeScreen';
+import ItemScreen from './pages/ItemScreen';
+import PublishedItemsScreen from './pages/PublishedItemsScreen';
+import RecycledItemsScreen from './pages/RecycledItemsScreen';
+import SharedItemsScreen from './pages/SharedItemsScreen';
 
 const { useItemFeedbackUpdates } = hooks;
 
@@ -51,27 +49,36 @@ const App = (): JSX.Element => {
       saveUrlForRedirection(pathname, DOMAIN);
     },
   };
-  const HomeWithAuthorization = withAuthorization(Home, withAuthorizationProps);
+  const HomeWithAuthorization = withAuthorization(
+    HomeScreen,
+    withAuthorizationProps,
+  );
   const SharedWithAuthorization = withAuthorization(
-    SharedItems,
+    SharedItemsScreen,
     withAuthorizationProps,
   );
   const FavoriteWithAuthorization = withAuthorization(
-    FavoriteItems,
+    FavoriteItemsScreen,
     withAuthorizationProps,
   );
-  const RecycleWithAuthorization = withAuthorization(
-    RecycleBinScreen,
+  const PublishedWithAuthorization = withAuthorization(
+    PublishedItemsScreen,
     withAuthorizationProps,
   );
-  const PublishedWithAuthorization = withAuthorization(
-    PublishedItems,
+  const RecycleWithAuthorization = withAuthorization(
+    RecycledItemsScreen,
     withAuthorizationProps,
   );
 
   return (
-    <Sentry.ErrorBoundary fallback={<FallbackComponent />}>
-      <Routes>
+    <Routes>
+      <Route
+        element={
+          <Main>
+            <Outlet />
+          </Main>
+        }
+      >
         <Route path={HOME_PATH} element={<HomeWithAuthorization />} />
         <Route path={SHARED_ITEMS_PATH} element={<SharedWithAuthorization />} />
         <Route
@@ -82,13 +89,13 @@ const App = (): JSX.Element => {
           path={PUBLISHED_ITEMS_PATH}
           element={<PublishedWithAuthorization />}
         />
-        <Route path={buildItemPath()} element={<ItemScreen />} />
         <Route path={RECYCLE_BIN_PATH} element={<RecycleWithAuthorization />} />
+        <Route path={buildItemPath()} element={<ItemScreen />} />
         <Route path={ITEMS_PATH} element={<HomeWithAuthorization />} />
         <Route path={REDIRECT_PATH} element={<Redirect />} />
-        <Route element={<Redirect />} />
-      </Routes>
-    </Sentry.ErrorBoundary>
+        <Route path="*" element={<Redirect />} />
+      </Route>
+    </Routes>
   );
 };
 

src/components/Root.tsx

@@ -8,6 +8,7 @@ import { ThemeProvider } from '@mui/material/styles';
 
 import { theme as GraaspTheme } from '@graasp/ui';
 
+import * as Sentry from '@sentry/react';
 import '@uppy/core/dist/style.css';
 import 'ag-grid-community/styles/ag-grid.min.css';
 import 'ag-grid-community/styles/ag-theme-material.min.css';
@@ -19,28 +20,31 @@ import {
   queryClient,
 } from '../config/queryClient';
 import App from './App';
+import FallbackComponent from './Fallback';
 import { CurrentUserContextProvider } from './context/CurrentUserContext';
 import ModalProviders from './context/ModalProviders';
 
 const Root = (): JSX.Element => (
-  <QueryClientProvider client={queryClient}>
-    <I18nextProvider i18n={i18nConfig}>
-      <ThemeProvider theme={GraaspTheme}>
-        <CssBaseline />
-        {true && <ToastContainer position="bottom-right" theme="colored" />}
-        <Router>
-          <ModalProviders>
-            <CurrentUserContextProvider>
-              <App />
-            </CurrentUserContextProvider>
-          </ModalProviders>
-        </Router>
-      </ThemeProvider>
-    </I18nextProvider>
-    {import.meta.env.DEV && import.meta.env.MODE !== 'test' && (
-      <ReactQueryDevtools position="bottom-right" />
-    )}
-  </QueryClientProvider>
+  <Sentry.ErrorBoundary fallback={<FallbackComponent />}>
+    <QueryClientProvider client={queryClient}>
+      <I18nextProvider i18n={i18nConfig}>
+        <ThemeProvider theme={GraaspTheme}>
+          <CssBaseline />
+          <ToastContainer position="bottom-right" theme="colored" />
+          <Router>
+            <ModalProviders>
+              <CurrentUserContextProvider>
+                <App />
+              </CurrentUserContextProvider>
+            </ModalProviders>
+          </Router>
+        </ThemeProvider>
+      </I18nextProvider>
+      {import.meta.env.DEV && import.meta.env.MODE !== 'test' && (
+        <ReactQueryDevtools position="bottom-right" />
+      )}
+    </QueryClientProvider>
+  </Sentry.ErrorBoundary>
 );
 
 export default Root;

src/components/context/LayoutContext.tsx

@@ -10,8 +10,6 @@ interface LayoutContextInterface {
   setMode: (mode: string) => void;
   editingItemId: string | null;
   setEditingItemId: (itemId: string | null) => void;
-  isMainMenuOpen: boolean;
-  setIsMainMenuOpen: (isOpen: boolean) => void;
   openedActionTabId: string | null;
   setOpenedActionTabId: (action: string | null) => void;
   isItemMetadataMenuOpen: boolean;
@@ -31,10 +29,6 @@ export const LayoutContext = createContext<LayoutContextInterface>({
   setEditingItemId: () => {
     // do nothing
   },
-  isMainMenuOpen: true,
-  setIsMainMenuOpen: () => {
-    // do nothing
-  },
   openedActionTabId: null,
   setOpenedActionTabId: () => {
     // do nothing
@@ -71,7 +65,6 @@ export const LayoutContextProvider = ({
     null,
   );
 
-  const [isMainMenuOpen, setIsMainMenuOpen] = useState(true);
   const [isItemSharingOpen, setIsItemSharingOpen] = useState(true);
 
   const [isItemMetadataMenuOpen, setIsItemMetadataMenuOpen] = useState(false);
@@ -86,8 +79,6 @@ export const LayoutContextProvider = ({
       setMode,
       editingItemId,
       setEditingItemId,
-      isMainMenuOpen,
-      setIsMainMenuOpen,
       openedActionTabId,
       setOpenedActionTabId,
       isItemMetadataMenuOpen,
@@ -101,7 +92,6 @@ export const LayoutContextProvider = ({
       editingItemId,
       isChatboxMenuOpen,
       isItemMetadataMenuOpen,
-      isMainMenuOpen,
       mode,
       openedActionTabId,
       isItemSharingOpen,