fix: uniformize routes and add 'real' fallback route

package.json

@@ -14,6 +14,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@ag-grid-community/styles": "31.0.3",
     "@emotion/cache": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",

src/components/App.tsx

@@ -4,8 +4,6 @@ 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,14 @@ 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 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,44 +48,45 @@ 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>
-        <Route path={HOME_PATH} element={<HomeWithAuthorization />} />
-        <Route path={SHARED_ITEMS_PATH} element={<SharedWithAuthorization />} />
-        <Route
-          path={FAVORITE_ITEMS_PATH}
-          element={<FavoriteWithAuthorization />}
-        />
-        <Route
-          path={PUBLISHED_ITEMS_PATH}
-          element={<PublishedWithAuthorization />}
-        />
-        <Route path={buildItemPath()} element={<ItemScreen />} />
-        <Route path={RECYCLE_BIN_PATH} element={<RecycleWithAuthorization />} />
-        <Route path={ITEMS_PATH} element={<HomeWithAuthorization />} />
-        <Route path={REDIRECT_PATH} element={<Redirect />} />
-        <Route element={<Redirect />} />
-      </Routes>
-    </Sentry.ErrorBoundary>
+    <Routes>
+      <Route path={HOME_PATH} element={<HomeWithAuthorization />} />
+      <Route path={SHARED_ITEMS_PATH} element={<SharedWithAuthorization />} />
+      <Route
+        path={FAVORITE_ITEMS_PATH}
+        element={<FavoriteWithAuthorization />}
+      />
+      <Route
+        path={PUBLISHED_ITEMS_PATH}
+        element={<PublishedWithAuthorization />}
+      />
+      <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 path="*" element={<Redirect />} />
+    </Routes>
   );
 };
 

src/components/Root.tsx

@@ -8,9 +8,10 @@ import { ThemeProvider } from '@mui/material/styles';
 
 import { theme as GraaspTheme } from '@graasp/ui';
 
+import '@ag-grid-community/styles/ag-grid.min.css';
+import '@ag-grid-community/styles/ag-theme-material.min.css';
+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';
 
 import i18nConfig from '../config/i18n';
 import {
@@ -19,26 +20,29 @@ 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 && <ReactQueryDevtools position="bottom-right" />}
-  </QueryClientProvider>
+  <Sentry.ErrorBoundary fallback={<FallbackComponent />}>
+    <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 && <ReactQueryDevtools position="bottom-right" />}
+    </QueryClientProvider>
+  </Sentry.ErrorBoundary>
 );
 
 export default Root;

src/components/item/ItemMain.tsx

@@ -55,7 +55,7 @@ const ItemMain = ({ id, children, item }: Props): JSX.Element => {
   } = useLayoutContext();
 
   return (
-    <Box id={id} className={ITEM_MAIN_CLASS}>
+    <Box id={id} m={2} className={ITEM_MAIN_CLASS}>
       {isChatboxMenuOpen && (
         <ItemPanel open={isChatboxMenuOpen}>
           <DrawerHeader
@@ -73,21 +73,23 @@ const ItemMain = ({ id, children, item }: Props): JSX.Element => {
           <Chatbox item={item} />
         </ItemPanel>
       )}
-      <ItemPanel open={isItemMetadataMenuOpen}>
-        <DrawerHeader
-          handleDrawerClose={() => {
-            setIsItemMetadataMenuOpen(false);
-          }}
-          // todo
-          direction="rtl"
-        >
-          <Typography variant="h6">
-            {translateBuilder(BUILDER.ITEM_METADATA_TITLE)}
-          </Typography>
-        </DrawerHeader>
-        <Divider />
-        <ItemMetadataContent item={item} />
-      </ItemPanel>
+      {isItemMetadataMenuOpen && (
+        <ItemPanel open={isItemMetadataMenuOpen}>
+          <DrawerHeader
+            handleDrawerClose={() => {
+              setIsItemMetadataMenuOpen(false);
+            }}
+            // todo
+            direction="rtl"
+          >
+            <Typography variant="h6">
+              {translateBuilder(BUILDER.ITEM_METADATA_TITLE)}
+            </Typography>
+          </DrawerHeader>
+          <Divider />
+          <ItemMetadataContent item={item} />
+        </ItemPanel>
+      )}
 
       <StyledContainer open={isChatboxMenuOpen || isItemMetadataMenuOpen}>
         <ItemHeader showNavigation />