diff --git a/package.json b/package.json
index 1868569d5..a8d12cc59 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 61d422788..7be9ef9b9 100644
--- a/src/components/App.tsx
+++ b/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>
);
};
diff --git a/src/components/RecycleBinScreen.tsx b/src/components/RecycleBinScreen.tsx
deleted file mode 100644
index 35742b2f1..000000000
--- a/src/components/RecycleBinScreen.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Box } from '@mui/material';
-
-import { Loader } from '@graasp/ui';
-
-import { useBuilderTranslation } from '../config/i18n';
-import { hooks } from '../config/queryClient';
-import {
- ITEMS_TABLE_DELETE_SELECTED_ITEMS_ID,
- ITEMS_TABLE_RESTORE_SELECTED_ITEMS_ID,
- RECYCLED_ITEMS_ID,
-} from '../config/selectors';
-import { BUILDER } from '../langs/constants';
-import DeleteButton from './common/DeleteButton';
-import ErrorAlert from './common/ErrorAlert';
-import RestoreButton from './common/RestoreButton';
-import ItemHeader from './item/header/ItemHeader';
-import Items from './main/Items';
-import Main from './main/Main';
-
-type RowActionsProps = {
- data: { id: string };
-};
-
-const RowActions = ({ data: item }: RowActionsProps): JSX.Element => (
- <>
- <RestoreButton itemIds={[item.id]} />
- <DeleteButton itemIds={[item.id]} />
- </>
-);
-
-type ToolbarActionsProps = {
- selectedIds: string[];
-};
-
-const ToolbarActions = ({ selectedIds }: ToolbarActionsProps): JSX.Element => (
- <>
- <RestoreButton
- itemIds={selectedIds}
- color="secondary"
- id={ITEMS_TABLE_RESTORE_SELECTED_ITEMS_ID}
- />
- <DeleteButton
- id={ITEMS_TABLE_DELETE_SELECTED_ITEMS_ID}
- itemIds={selectedIds}
- color="secondary"
- />
- </>
-);
-
-const RecycleBinLoadableContent = (): JSX.Element => {
- const { t: translateBuilder } = useBuilderTranslation();
- const { data: recycledItems, isLoading, isError } = hooks.useRecycledItems();
- if (isError) {
- return <ErrorAlert />;
- }
-
- if (isLoading) {
- return <Loader />;
- }
-
- return (
- <Box mx={2}>
- <ItemHeader showNavigation={false} />
- <Items
- id={RECYCLED_ITEMS_ID}
- clickable={false}
- title={translateBuilder(BUILDER.RECYCLE_BIN_TITLE)}
- items={recycledItems}
- actions={RowActions}
- ToolbarActions={ToolbarActions}
- showThumbnails={false}
- enableMemberships={false}
- />
- </Box>
- );
-};
-
-const RecycleBinScreen = (): JSX.Element => (
- <Main>
- <RecycleBinLoadableContent />
- </Main>
-);
-
-export default RecycleBinScreen;
diff --git a/src/components/Root.tsx b/src/components/Root.tsx
index e77c2ab98..ac1b71361 100644
--- a/src/components/Root.tsx
+++ b/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;
diff --git a/src/components/item/ItemMain.tsx b/src/components/item/ItemMain.tsx
index 7d727a335..be3b7103f 100644
--- a/src/components/item/ItemMain.tsx
+++ b/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 />
diff --git a/src/components/main/PublishedItems.tsx b/src/components/main/PublishedItems.tsx
deleted file mode 100644
index facd74c34..000000000
--- a/src/components/main/PublishedItems.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Box } from '@mui/material';
-
-import { Member } from '@graasp/sdk';
-import { Loader } from '@graasp/ui';
-
-import { useBuilderTranslation } from '../../config/i18n';
-import { hooks } from '../../config/queryClient';
-import {
- PUBLISHED_ITEMS_ERROR_ALERT_ID,
- PUBLISHED_ITEMS_ID,
-} from '../../config/selectors';
-import { BUILDER } from '../../langs/constants';
-import ErrorAlert from '../common/ErrorAlert';
-import { useCurrentUserContext } from '../context/CurrentUserContext';
-import ItemHeader from '../item/header/ItemHeader';
-import Items from './Items';
-import Main from './Main';
-
-const PublishedItemsDisplay = ({ member }: { member: Member }): JSX.Element => {
- const { t: translateBuilder } = useBuilderTranslation();
- const {
- data: sharedItems,
- isLoading,
- isError,
- } = hooks.usePublishedItemsForMember(member.id);
-
- if (isError) {
- return <ErrorAlert id={PUBLISHED_ITEMS_ERROR_ALERT_ID} />;
- }
-
- if (isLoading) {
- return <Loader />;
- }
-
- return (
- <Box mx={2}>
- <ItemHeader showNavigation={false} />
- <Items
- id={PUBLISHED_ITEMS_ID}
- title={translateBuilder(BUILDER.PUBLISHED_ITEMS_TITLE)}
- items={sharedItems ?? []}
- />
- </Box>
- );
-};
-
-const PublishedItems = (): JSX.Element => {
- const { data: member, isError } = useCurrentUserContext();
-
- if (!member || isError) {
- return <ErrorAlert id={PUBLISHED_ITEMS_ERROR_ALERT_ID} />;
- }
-
- return (
- <Main>
- <PublishedItemsDisplay member={member} />
- </Main>
- );
-};
-
-export default PublishedItems;
diff --git a/src/components/main/FavoriteItems.tsx b/src/components/pages/FavoriteItemsScreen.tsx
similarity index 59%
rename from src/components/main/FavoriteItems.tsx
rename to src/components/pages/FavoriteItemsScreen.tsx
index b59970b1f..84f81f513 100644
--- a/src/components/main/FavoriteItems.tsx
+++ b/src/components/pages/FavoriteItemsScreen.tsx
@@ -11,40 +11,40 @@ import {
} from '../../config/selectors';
import { BUILDER } from '../../langs/constants';
import ErrorAlert from '../common/ErrorAlert';
-import { useCurrentUserContext } from '../context/CurrentUserContext';
import ItemHeader from '../item/header/ItemHeader';
-import Items from './Items';
-import Main from './Main';
+import Items from '../main/Items';
+import Main from '../main/Main';
-const FavoriteItems = (): JSX.Element => {
+const FavoriteItemsLoadableContent = (): JSX.Element | null => {
const { t: translateBuilder } = useBuilderTranslation();
- const { isLoading: isMemberLoading } = useCurrentUserContext();
- const { data, isLoading: isItemsLoading } = hooks.useFavoriteItems();
- const renderContent = () => {
- if (data) {
- return (
+ const { data, isLoading: isItemsLoading, isError } = hooks.useFavoriteItems();
+
+ if (data) {
+ return (
+ <Box m={2}>
+ <ItemHeader showNavigation={false} />
<Items
id={FAVORITE_ITEMS_ID}
title={translateBuilder(BUILDER.FAVORITE_ITEMS_TITLE)}
items={data.map((d) => d.item as DiscriminatedItem)}
/>
- );
- }
+ </Box>
+ );
+ }
- if (isMemberLoading || isItemsLoading) {
- return <Loader />;
- }
+ if (isItemsLoading) {
+ return <Loader />;
+ }
+ if (isError) {
return <ErrorAlert id={FAVORITE_ITEMS_ERROR_ALERT_ID} />;
- };
-
- return (
- <Main>
- <Box mx={2}>
- <ItemHeader showNavigation={false} />
- {renderContent()}
- </Box>
- </Main>
- );
+ }
+ return null;
};
-export default FavoriteItems;
+const FavoriteItemsScreen = (): JSX.Element => (
+ <Main>
+ <FavoriteItemsLoadableContent />
+ </Main>
+);
+
+export default FavoriteItemsScreen;
diff --git a/src/components/main/Home.tsx b/src/components/pages/HomeScreen.tsx
similarity index 93%
rename from src/components/main/Home.tsx
rename to src/components/pages/HomeScreen.tsx
index 4e2db8f45..40ddd0d85 100644
--- a/src/components/main/Home.tsx
+++ b/src/components/pages/HomeScreen.tsx
@@ -20,11 +20,11 @@ import FileUploader from '../file/FileUploader';
import { UppyContextProvider } from '../file/UppyContext';
import { useItemSearch } from '../item/ItemSearch';
import ItemHeader from '../item/header/ItemHeader';
-import ItemActions from './ItemActions';
-import Items from './Items';
-import { ItemsTableProps } from './ItemsTable';
-import Main from './Main';
-import NewItemButton from './NewItemButton';
+import ItemActions from '../main/ItemActions';
+import Items from '../main/Items';
+import { ItemsTableProps } from '../main/ItemsTable';
+import Main from '../main/Main';
+import NewItemButton from '../main/NewItemButton';
type HomeItemSortableColumn =
| 'item.name'
@@ -104,7 +104,7 @@ const HomeLoadableContent = (): JSX.Element => {
return (
<UppyContextProvider enable={isSuccess}>
<FileUploader />
- <Box mx={2}>
+ <Box m={2}>
<ItemHeader showNavigation={false} />
<Items
id={ACCESSIBLE_ITEMS_TABLE_ID}
@@ -140,10 +140,10 @@ const HomeLoadableContent = (): JSX.Element => {
return <ErrorAlert id={HOME_ERROR_ALERT_ID} />;
};
-const Home = (): JSX.Element => (
+const HomeScreen = (): JSX.Element => (
<Main>
<HomeLoadableContent />
</Main>
);
-export default Home;
+export default HomeScreen;
diff --git a/src/components/main/ItemScreen.tsx b/src/components/pages/ItemScreen.tsx
similarity index 97%
rename from src/components/main/ItemScreen.tsx
rename to src/components/pages/ItemScreen.tsx
index 544d87cc4..b525ac35c 100644
--- a/src/components/main/ItemScreen.tsx
+++ b/src/components/pages/ItemScreen.tsx
@@ -30,8 +30,8 @@ import ItemMain from '../item/ItemMain';
import ItemPublishTab from '../item/publish/ItemPublishTab';
import ItemSettings from '../item/settings/ItemSettings';
import ItemSharingTab from '../item/sharing/ItemSharingTab';
-import ItemForbiddenScreen from './ItemForbiddenScreen';
-import Main from './Main';
+import ItemForbiddenScreen from '../main/ItemForbiddenScreen';
+import Main from '../main/Main';
const {
useItem,
diff --git a/src/components/pages/PublishedItemsScreen.tsx b/src/components/pages/PublishedItemsScreen.tsx
new file mode 100644
index 000000000..44e17f2a2
--- /dev/null
+++ b/src/components/pages/PublishedItemsScreen.tsx
@@ -0,0 +1,55 @@
+import { Box } from '@mui/material';
+
+import { Loader } from '@graasp/ui';
+
+import { useBuilderTranslation } from '../../config/i18n';
+import { hooks } from '../../config/queryClient';
+import {
+ PUBLISHED_ITEMS_ERROR_ALERT_ID,
+ PUBLISHED_ITEMS_ID,
+} from '../../config/selectors';
+import { BUILDER } from '../../langs/constants';
+import ErrorAlert from '../common/ErrorAlert';
+import { useCurrentUserContext } from '../context/CurrentUserContext';
+import ItemHeader from '../item/header/ItemHeader';
+import Items from '../main/Items';
+import Main from '../main/Main';
+
+const PublishedItemsLoadableContent = (): JSX.Element | null => {
+ const { t: translateBuilder } = useBuilderTranslation();
+ const { data: member } = useCurrentUserContext();
+ const {
+ data: sharedItems,
+ isLoading,
+ isError,
+ } = hooks.usePublishedItemsForMember(member?.id);
+
+ if (sharedItems) {
+ return (
+ <Box m={2}>
+ <ItemHeader showNavigation={false} />
+ <Items
+ id={PUBLISHED_ITEMS_ID}
+ title={translateBuilder(BUILDER.PUBLISHED_ITEMS_TITLE)}
+ items={sharedItems ?? []}
+ />
+ </Box>
+ );
+ }
+
+ if (isLoading) {
+ return <Loader />;
+ }
+ if (isError) {
+ return <ErrorAlert id={PUBLISHED_ITEMS_ERROR_ALERT_ID} />;
+ }
+ return null;
+};
+
+const PublishedItemsScreen = (): JSX.Element => (
+ <Main>
+ <PublishedItemsLoadableContent />
+ </Main>
+);
+
+export default PublishedItemsScreen;
diff --git a/src/components/pages/RecycledItemsScreen.tsx b/src/components/pages/RecycledItemsScreen.tsx
new file mode 100644
index 000000000..06dfa80ff
--- /dev/null
+++ b/src/components/pages/RecycledItemsScreen.tsx
@@ -0,0 +1,88 @@
+import { Box } from '@mui/material';
+
+import { Loader } from '@graasp/ui';
+
+import { useBuilderTranslation } from '../../config/i18n';
+import { hooks } from '../../config/queryClient';
+import {
+ ITEMS_TABLE_DELETE_SELECTED_ITEMS_ID,
+ ITEMS_TABLE_RESTORE_SELECTED_ITEMS_ID,
+ RECYCLED_ITEMS_ERROR_ALERT_ID,
+ RECYCLED_ITEMS_ID,
+ RECYCLED_ITEMS_ROOT_CONTAINER,
+} from '../../config/selectors';
+import { BUILDER } from '../../langs/constants';
+import DeleteButton from '../common/DeleteButton';
+import ErrorAlert from '../common/ErrorAlert';
+import RestoreButton from '../common/RestoreButton';
+import ItemHeader from '../item/header/ItemHeader';
+import Items from '../main/Items';
+import Main from '../main/Main';
+
+type RowActionsProps = {
+ data: { id: string };
+};
+
+const RowActions = ({ data: item }: RowActionsProps): JSX.Element => (
+ <>
+ <RestoreButton itemIds={[item.id]} />
+ <DeleteButton itemIds={[item.id]} />
+ </>
+);
+
+type ToolbarActionsProps = {
+ selectedIds: string[];
+};
+
+const ToolbarActions = ({ selectedIds }: ToolbarActionsProps): JSX.Element => (
+ <>
+ <RestoreButton
+ itemIds={selectedIds}
+ color="secondary"
+ id={ITEMS_TABLE_RESTORE_SELECTED_ITEMS_ID}
+ />
+ <DeleteButton
+ id={ITEMS_TABLE_DELETE_SELECTED_ITEMS_ID}
+ itemIds={selectedIds}
+ color="secondary"
+ />
+ </>
+);
+
+const RecycleBinLoadableContent = (): JSX.Element | null => {
+ const { t: translateBuilder } = useBuilderTranslation();
+ const { data: recycledItems, isLoading, isError } = hooks.useRecycledItems();
+
+ if (recycledItems) {
+ return (
+ <Box id={RECYCLED_ITEMS_ROOT_CONTAINER} m={2}>
+ <ItemHeader showNavigation={false} />
+ <Items
+ id={RECYCLED_ITEMS_ID}
+ clickable={false}
+ title={translateBuilder(BUILDER.RECYCLE_BIN_TITLE)}
+ items={recycledItems}
+ actions={RowActions}
+ ToolbarActions={ToolbarActions}
+ showThumbnails={false}
+ enableMemberships={false}
+ />
+ </Box>
+ );
+ }
+ if (isLoading) {
+ return <Loader />;
+ }
+ if (isError) {
+ return <ErrorAlert id={RECYCLED_ITEMS_ERROR_ALERT_ID} />;
+ }
+ return null;
+};
+
+const RecycledItemsScreen = (): JSX.Element => (
+ <Main>
+ <RecycleBinLoadableContent />
+ </Main>
+);
+
+export default RecycledItemsScreen;
diff --git a/src/components/SharedItems.tsx b/src/components/pages/SharedItemsScreen.tsx
similarity index 67%
rename from src/components/SharedItems.tsx
rename to src/components/pages/SharedItemsScreen.tsx
index 00d3bc6d6..813186024 100644
--- a/src/components/SharedItems.tsx
+++ b/src/components/pages/SharedItemsScreen.tsx
@@ -5,16 +5,17 @@ import { Loader } from '@graasp/ui';
import { BUILDER } from '@/langs/constants';
-import { useBuilderTranslation } from '../config/i18n';
-import { hooks } from '../config/queryClient';
+import { useBuilderTranslation } from '../../config/i18n';
+import { hooks } from '../../config/queryClient';
import {
SHARED_ITEMS_ERROR_ALERT_ID,
SHARED_ITEMS_ID,
-} from '../config/selectors';
-import ErrorAlert from './common/ErrorAlert';
-import ItemHeader from './item/header/ItemHeader';
-import Items from './main/Items';
-import Main from './main/Main';
+ SHARED_ITEMS_ROOT_CONTAINER,
+} from '../../config/selectors';
+import ErrorAlert from '../common/ErrorAlert';
+import ItemHeader from '../item/header/ItemHeader';
+import Items from '../main/Items';
+import Main from '../main/Main';
const SharedItemsLoadableContent = (): JSX.Element => {
const { t: translateBuilder } = useBuilderTranslation();
@@ -28,8 +29,8 @@ const SharedItemsLoadableContent = (): JSX.Element => {
}
return (
- <Box mx={2}>
- <Alert severity="warning" sx={{ mt: 3 }}>
+ <Box id={SHARED_ITEMS_ROOT_CONTAINER} m={2}>
+ <Alert severity="warning">
{translateBuilder(
"You can also find the items of this page in ''My Graasp''. This page will be unavailable soon.",
)}
@@ -46,10 +47,10 @@ const SharedItemsLoadableContent = (): JSX.Element => {
);
};
-const SharedItems = (): JSX.Element => (
+const SharedItemsScreen = (): JSX.Element => (
<Main>
<SharedItemsLoadableContent />
</Main>
);
-export default SharedItems;
+export default SharedItemsScreen;
diff --git a/src/config/queryClient.ts b/src/config/queryClient.ts
index 392651811..79c0b49e5 100644
--- a/src/config/queryClient.ts
+++ b/src/config/queryClient.ts
@@ -20,7 +20,7 @@ const {
refetchOnMount: false,
// avoid refetching when same data are closely fetched
staleTime: 1000, // ms
- cacheTime: 1000, // ms
+ cacheTime: 10 * 60 * 1000, // 10min cache time -> time the queries stay in the cache if they are not on screen
},
DOMAIN,
});
diff --git a/src/config/selectors.ts b/src/config/selectors.ts
index 3d49272c3..854e057bb 100644
--- a/src/config/selectors.ts
+++ b/src/config/selectors.ts
@@ -2,6 +2,8 @@
// import { Platform } from '@graasp/ui';
import { ShortLinkPlatform } from '@/utils/shortLink';
+export const SHARED_ITEMS_ROOT_CONTAINER = 'sharedItemsPageRootContainer';
+export const RECYCLED_ITEMS_ROOT_CONTAINER = 'recycledItemsPageRootContainer';
export const HEADER_APP_BAR_ID = 'headerAppBar';
export const ITEM_DELETE_BUTTON_CLASS = 'itemDeleteButton';
export const ITEM_COPY_BUTTON_CLASS = 'itemCopyButton';
@@ -95,8 +97,9 @@ export const ITEM_LOGIN_SIGN_IN_MODE_ID = 'itemLoginSignInMode';
export const ITEM_MAIN_CLASS = 'itemMain';
export const HOME_ERROR_ALERT_ID = 'homeErrorAlert';
export const SHARED_ITEMS_ERROR_ALERT_ID = 'sharedItemsErrorAlert';
-export const PUBLISHED_ITEMS_ERROR_ALERT_ID = 'publishedItemsErrorAlert';
export const FAVORITE_ITEMS_ERROR_ALERT_ID = 'favoriteItemsErrorAlert';
+export const PUBLISHED_ITEMS_ERROR_ALERT_ID = 'publishedItemsErrorAlert';
+export const RECYCLED_ITEMS_ERROR_ALERT_ID = 'recycledItemsErrorAlert';
export const ITEM_MENU_SHORTCUT_BUTTON_CLASS = 'itemMenuShortcutButton';
export const ITEM_MENU_DUPLICATE_BUTTON_CLASS = 'itemMenuDuplicateButton';
export const ITEM_MENU_FAVORITE_BUTTON_CLASS = 'itemMenuFavoriteButton';
diff --git a/yarn.lock b/yarn.lock
index 4991661a2..163365b3d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19,6 +19,13 @@ __metadata:
languageName: node
linkType: hard
+"@ag-grid-community/styles@npm:31.0.3":
+ version: 31.0.3
+ resolution: "@ag-grid-community/styles@npm:31.0.3"
+ checksum: 9caa12c9231a9df0d5cfd787a668da01e628b2c55e5c7c2c558473880bdc6e07c15790f5404e1fc566288e62b3ca16f2da1591ee78d2575c0ca01474af70f764
+ languageName: node
+ linkType: hard
+
"@ampproject/remapping@npm:^2.2.0":
version: 2.2.1
resolution: "@ampproject/remapping@npm:2.2.1"
@@ -1296,7 +1303,7 @@ __metadata:
"@graasp/ui@github:graasp/graasp-ui#636-update-main-comp":
version: 4.3.1
- resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=d693b30feb2c5aa8748dcb5dd569da97c02552ac"
+ resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=886325f6207418720364edcaa75dc53b7a1fda7e"
dependencies:
"@graasp/sdk": "npm:3.4.1"
http-status-codes: "npm:2.3.0"
@@ -1330,7 +1337,7 @@ __metadata:
optional: true
ag-grid-react:
optional: true
- checksum: 35be26f24bf4327ba8ae0d1f5eb7ab4c3908897121c0e11df518266430ed780f1dae184ed7edd1450e1a7944c36197b192c984284b14d65ea534da15cd642869
+ checksum: 0f06e7b0468e40ff9ab16d030f3353bc67d007001fff7941b5f459d5297aba4c6267de0b42edb1092239ba619cb6272eaffb188d86204be822967f5197580c47
languageName: node
linkType: hard
@@ -6302,6 +6309,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "graasp-builder@workspace:."
dependencies:
+ "@ag-grid-community/styles": "npm:31.0.3"
"@commitlint/cli": "npm:18.4.4"
"@commitlint/config-conventional": "npm:18.4.4"
"@cypress/code-coverage": "npm:3.12.12"