refactor: apply changes

package.json

@@ -22,7 +22,7 @@
     "@graasp/query-client": "2.5.0",
     "@graasp/sdk": "3.4.1",
     "@graasp/translations": "1.22.1",
-    "@graasp/ui": "https://github.com/graasp/graasp-ui.git#686-navigator-item-settings-menu",
+    "@graasp/ui": "https://github.com/graasp/graasp-ui.git#navigation-icon",
     "@mui/icons-material": "5.14.19",
     "@mui/lab": "5.0.0-alpha.151",
     "@mui/material": "5.14.19",

src/components/App.tsx

@@ -27,15 +27,16 @@ import Main from './main/Main';
 import Redirect from './main/Redirect';
 import FavoriteItemsScreen from './pages/FavoriteItemsScreen';
 import HomeScreen from './pages/HomeScreen';
-import ItemInformationScreen from './pages/ItemScreens/ItemInformationScreen';
-import ItemScreen from './pages/ItemScreens/ItemScreen';
-import ItemScreenLayout from './pages/ItemScreens/ItemScreenLayout';
-import PublishItemScreen from './pages/ItemScreens/PublishItemScreen';
-import SettingsItemScreen from './pages/ItemScreens/SettingsItemScreen';
-import ShareItemScreen from './pages/ItemScreens/ShareItemScreen';
 import PublishedItemsScreen from './pages/PublishedItemsScreen';
 import RecycledItemsScreen from './pages/RecycledItemsScreen';
 import SharedItemsScreen from './pages/SharedItemsScreen';
+import ItemInformationPage from './pages/item/ItemInformationPage';
+import ItemPageLayout from './pages/item/ItemPageLayout';
+import ItemScreen from './pages/item/ItemScreen';
+import ItemScreenLayout from './pages/item/ItemScreenLayout';
+import ItemSettingsPage from './pages/item/ItemSettingsPage';
+import ItemSharingPage from './pages/item/ItemSharingPage';
+import LibrarySettingsPage from './pages/item/LibrarySettingsPage';
 
 const { useItemFeedbackUpdates } = hooks;
 
@@ -100,13 +101,15 @@ const App = (): JSX.Element => {
         />
         <Route path={buildItemPath()} element={<ItemScreenLayout />}>
           <Route index element={<ItemScreen />} />
-          <Route path={ITEM_SHARE_PATH} element={<ShareItemScreen />} />
-          <Route path={ITEM_PUBLISH_PATH} element={<PublishItemScreen />} />
-          <Route path={ITEM_SETTINGS_PATH} element={<SettingsItemScreen />} />
-          <Route
-            path={ITEM_INFORMATION_PATH}
-            element={<ItemInformationScreen />}
-          />
+          <Route element={<ItemPageLayout />}>
+            <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 />} />
         <Route path={ITEMS_PATH} element={<HomeWithAuthorization />} />

src/components/common/BackButton.tsx

@@ -1,15 +1,21 @@
-import React from 'react';
-
 import ArrowCircleLeftRoundedIcon from '@mui/icons-material/ArrowCircleLeftRounded';
-import { IconButton } from '@mui/material';
+import { IconButton, Tooltip } from '@mui/material';
+
+import { useBuilderTranslation } from '@/config/i18n';
 
 interface Props {
   onClick: () => void;
 }
-const BackButton = ({ onClick }: Props): JSX.Element => (
-  <IconButton onClick={onClick} sx={{ padding: 0 }}>
-    <ArrowCircleLeftRoundedIcon fontSize="large" />
-  </IconButton>
-);
+const BackButton = ({ onClick }: Props): JSX.Element => {
+  const { t } = useBuilderTranslation();
+
+  return (
+    <Tooltip title={t('Go Back')}>
+      <IconButton onClick={onClick}>
+        <ArrowCircleLeftRoundedIcon fontSize="large" />
+      </IconButton>
+    </Tooltip>
+  );
+};
 
 export default BackButton;

src/components/item/ItemContent.tsx

@@ -51,7 +51,7 @@ import { useCurrentUserContext } from '../context/CurrentUserContext';
 import ItemActions from '../main/ItemActions';
 import Items from '../main/Items';
 import NewItemButton from '../main/NewItemButton';
-import { OutletType } from '../pages/ItemScreens/type';
+import { OutletType } from '../pages/item/type';
 
 const { useChildren, useFileContentUrl, useEtherpad } = hooks;
 

src/components/item/ItemMetadataContent.tsx

@@ -26,7 +26,7 @@ import {
   ITEM_PANEL_TABLE_ID,
 } from '../../config/selectors';
 import { BUILDER } from '../../langs/constants';
-import { OutletType } from '../pages/ItemScreens/type';
+import { OutletType } from '../pages/item/type';
 import ItemMemberships from './ItemMemberships';
 import ThumbnailSetting from './settings/ThumbnailSetting';
 

src/components/item/header/ItemHeader.tsx

@@ -1,8 +1,8 @@
-import Stack from '@mui/material/Stack';
+import { useParams } from 'react-router';
 
-import { Loader, useShortenURLParams } from '@graasp/ui';
+import Stack from '@mui/material/Stack';
 
-import { ITEM_ID_PARAMS } from '@/config/paths';
+import { Loader } from '@graasp/ui';
 
 import { hooks } from '../../../config/queryClient';
 import { ITEM_HEADER_ID } from '../../../config/selectors';
@@ -17,7 +17,7 @@ type Props = {
 };
 
 const ItemHeader = ({ showNavigation = true }: Props): JSX.Element => {
-  const itemId = useShortenURLParams(ITEM_ID_PARAMS);
+  const { itemId } = useParams();
   const { data: item, isLoading: isItemLoading, isError } = useItem(itemId);
 
   if (isItemLoading) {

src/components/item/publish/ItemPublishTab.tsx

@@ -30,7 +30,7 @@ import { Loader } from '@graasp/ui';
 
 import groupBy from 'lodash.groupby';
 
-import { OutletType } from '@/components/pages/ItemScreens/type';
+import { OutletType } from '@/components/pages/item/type';
 
 import { ADMIN_CONTACT, CC_LICENSE_ABOUT_URL } from '../../../config/constants';
 import { useBuilderTranslation } from '../../../config/i18n';

src/components/item/settings/ClearChatButton.tsx

@@ -71,6 +71,7 @@ const ClearChatButton = ({
             variant="outlined"
             color="error"
             onClick={() => setOpenConfirmation(true)}
+            sx={{ minWidth: 150 }}
           >
             {text}
           </Button>

src/components/item/settings/ItemSettings.tsx

@@ -15,7 +15,7 @@ import Typography from '@mui/material/Typography';
 
 import { DiscriminatedItem, ItemType } from '@graasp/sdk';
 
-import { OutletType } from '@/components/pages/ItemScreens/type';
+import { OutletType } from '@/components/pages/item/type';
 import { buildItemInformationPath } from '@/config/paths';
 
 import {

src/components/item/settings/ThumbnailSetting.tsx

@@ -121,10 +121,7 @@ const ThumbnailSetting = ({ item }: Props): JSX.Element | null => {
       {uppy && (
         <StatusBar uppy={uppy} handleClose={handleClose} open={openStatusBar} />
       )}
-      <Stack spacing={2} mb={3}>
-        <Typography variant="h5">
-          {translateBuilder(BUILDER.SETTINGS_THUMBNAIL_TITLE)}
-        </Typography>
+      <Stack spacing={2} mb={3} alignItems="center">
         <Thumbnail
           id={itemId}
           isLoading={isLoading}

src/components/item/sharing/ItemSharingTab.tsx

@@ -1,4 +1,4 @@
-import { useOutletContext } from 'react-router';
+import { useOutletContext, useParams } from 'react-router';
 
 import { Divider } from '@mui/material';
 import Container from '@mui/material/Container';
@@ -10,12 +10,11 @@ import {
   PermissionLevelCompare,
   isPseudonymizedMember,
 } from '@graasp/sdk';
-import { Loader, useShortenURLParams } from '@graasp/ui';
+import { Loader } from '@graasp/ui';
 
 import partition from 'lodash.partition';
 
-import { OutletType } from '@/components/pages/ItemScreens/type';
-import { ITEM_ID_PARAMS } from '@/config/paths';
+import { OutletType } from '@/components/pages/item/type';
 
 import { useBuilderTranslation } from '../../../config/i18n';
 import { hooks } from '../../../config/queryClient';
@@ -58,7 +57,7 @@ const selectHighestMemberships = (
 const ItemSharingTab = (): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
   const { item } = useOutletContext<OutletType>();
-  const itemId = useShortenURLParams(ITEM_ID_PARAMS);
+  const { itemId } = useParams();
 
   const { data: memberships } = hooks.useItemMemberships(itemId);
 

src/components/layout/Navigation.tsx

@@ -1,17 +1,11 @@
-import { useLocation } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 
-import {
-  HomeMenu,
-  ItemMenu,
-  Navigation,
-  useShortenURLParams,
-} from '@graasp/ui';
+import { HomeMenu, ItemMenu, Navigation } from '@graasp/ui';
 
 import { useBuilderTranslation } from '../../config/i18n';
 import {
   FAVORITE_ITEMS_PATH,
   HOME_PATH,
-  ITEM_ID_PARAMS,
   SHARED_ITEMS_PATH,
   buildItemPath,
 } from '../../config/paths';
@@ -21,7 +15,7 @@ import {
   buildNavigationLink,
 } from '../../config/selectors';
 import { BUILDER } from '../../langs/constants';
-import { getActiveItemAction } from './utils';
+import { buildExtraItems } from './utils';
 
 const {
   useItem,
@@ -34,7 +28,7 @@ const {
 
 const Navigator = (): JSX.Element | null => {
   const { t: translateBuilder } = useBuilderTranslation();
-  const itemId = useShortenURLParams(ITEM_ID_PARAMS);
+  const { itemId } = useParams();
   const { pathname } = useLocation();
   const { data: currentMember } = useCurrentMember();
   const { data: item, isLoading: isItemLoading } = useItem(itemId);
@@ -118,7 +112,7 @@ const Navigator = (): JSX.Element | null => {
     return null;
   }
 
-  const activeItemAction = getActiveItemAction({
+  const extraItems = buildExtraItems({
     translate: translateBuilder,
     location: itemSettingsLocation,
     itemId,
@@ -134,7 +128,7 @@ const Navigator = (): JSX.Element | null => {
       renderRoot={renderRoot}
       buildMenuItemId={buildNavigationLink}
       useChildren={useChildren as any}
-      extraItems={activeItemAction && [activeItemAction]}
+      extraItems={extraItems}
     />
   );
 };