diff --git a/package.json b/package.json index a724de3f3..ed7ba0486 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.3", "@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 ( - }> - - } /> - } /> - } - /> - } - /> - } /> - } /> - } /> - } /> - } /> - - + + } /> + } /> + } + /> + } + /> + } /> + } /> + } /> + } /> + } /> + ); }; 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 => ( - <> - - - -); - -type ToolbarActionsProps = { - selectedIds: string[]; -}; - -const ToolbarActions = ({ selectedIds }: ToolbarActionsProps): JSX.Element => ( - <> - - - -); - -const RecycleBinLoadableContent = (): JSX.Element => { - const { t: translateBuilder } = useBuilderTranslation(); - const { data: recycledItems, isLoading, isError } = hooks.useRecycledItems(); - if (isError) { - return ; - } - - if (isLoading) { - return ; - } - - return ( - - - - - ); -}; - -const RecycleBinScreen = (): JSX.Element => ( -
- -
-); - -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 => ( - - - - - {true && } - - - - - - - - - - {import.meta.env.DEV && } - + }> + + + + + {true && } + + + + + + + + + + {import.meta.env.DEV && } + + ); 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 ( - + {isChatboxMenuOpen && ( { )} - - { - setIsItemMetadataMenuOpen(false); - }} - // todo - direction="rtl" - > - - {translateBuilder(BUILDER.ITEM_METADATA_TITLE)} - - - - - + {isItemMetadataMenuOpen && ( + + { + setIsItemMetadataMenuOpen(false); + }} + // todo + direction="rtl" + > + + {translateBuilder(BUILDER.ITEM_METADATA_TITLE)} + + + + + + )} 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 ; - } - - if (isLoading) { - return ; - } - - return ( - - - - - ); -}; - -const PublishedItems = (): JSX.Element => { - const { data: member, isError } = useCurrentUserContext(); - - if (!member || isError) { - return ; - } - - return ( -
- -
- ); -}; - -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 ( + + d.item as DiscriminatedItem)} /> - ); - } + + ); + } - if (isMemberLoading || isItemsLoading) { - return ; - } + if (isItemsLoading) { + return ; + } + if (isError) { return ; - }; - - return ( -
- - - {renderContent()} - -
- ); + } + return null; }; -export default FavoriteItems; +const FavoriteItemsScreen = (): JSX.Element => ( +
+ +
+); + +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 ( - + { return ; }; -const Home = (): JSX.Element => ( +const HomeScreen = (): JSX.Element => (
); -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 ( + + + + + ); + } + + if (isLoading) { + return ; + } + if (isError) { + return ; + } + return null; +}; + +const PublishedItemsScreen = (): JSX.Element => ( +
+ +
+); + +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 => ( + <> + + + +); + +type ToolbarActionsProps = { + selectedIds: string[]; +}; + +const ToolbarActions = ({ selectedIds }: ToolbarActionsProps): JSX.Element => ( + <> + + + +); + +const RecycleBinLoadableContent = (): JSX.Element | null => { + const { t: translateBuilder } = useBuilderTranslation(); + const { data: recycledItems, isLoading, isError } = hooks.useRecycledItems(); + + if (recycledItems) { + return ( + + + + + ); + } + if (isLoading) { + return ; + } + if (isError) { + return ; + } + return null; +}; + +const RecycledItemsScreen = (): JSX.Element => ( +
+ +
+); + +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 ( - - + + {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 => (
); -export default SharedItems; +export default SharedItemsScreen; diff --git a/src/config/queryClient.ts b/src/config/queryClient.ts index e761dcb61..d4c11ffb3 100644 --- a/src/config/queryClient.ts +++ b/src/config/queryClient.ts @@ -17,10 +17,7 @@ const { enableWebsocket: true, defaultQueryOptions: { keepPreviousData: true, - refetchOnMount: false, - // avoid refetching when same data are closely fetched - staleTime: 3 * 1000, // ms - cacheTime: 1000, // ms + refetchOnMount: true, }, 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 31bb74752..349319181 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" @@ -6323,6 +6330,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"