From 04c20be3f9932343ff4e5ba5d76d5fde34244489 Mon Sep 17 00:00:00 2001 From: spaenleh Date: Fri, 26 Jan 2024 12:35:44 +0100 Subject: [PATCH 1/3] fix: uniformize routes and add 'real' fallback route --- package.json | 1 + src/components/App.tsx | 68 +++++++------- src/components/RecycleBinScreen.tsx | 84 ------------------ src/components/Root.tsx | 40 +++++---- src/components/context/LayoutContext.tsx | 4 +- src/components/item/ItemMain.tsx | 34 +++---- src/components/main/PublishedItems.tsx | 61 ------------- .../FavoriteItemsScreen.tsx} | 50 +++++------ .../{main/Home.tsx => pages/HomeScreen.tsx} | 16 ++-- src/components/{main => pages}/ItemScreen.tsx | 4 +- src/components/pages/PublishedItemsScreen.tsx | 55 ++++++++++++ src/components/pages/RecycledItemsScreen.tsx | 88 +++++++++++++++++++ .../SharedItemsScreen.tsx} | 23 ++--- src/config/queryClient.ts | 5 +- src/config/selectors.ts | 5 +- yarn.lock | 8 ++ 16 files changed, 280 insertions(+), 266 deletions(-) delete mode 100644 src/components/RecycleBinScreen.tsx delete mode 100644 src/components/main/PublishedItems.tsx rename src/components/{main/FavoriteItems.tsx => pages/FavoriteItemsScreen.tsx} (59%) rename src/components/{main/Home.tsx => pages/HomeScreen.tsx} (93%) rename src/components/{main => pages}/ItemScreen.tsx (97%) create mode 100644 src/components/pages/PublishedItemsScreen.tsx create mode 100644 src/components/pages/RecycledItemsScreen.tsx rename src/components/{SharedItems.tsx => pages/SharedItemsScreen.tsx} (67%) diff --git a/package.json b/package.json index 6452c8494..a17f400e3 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 0f3ef6857..d06d235a7 100644 --- a/src/components/Root.tsx +++ b/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 => ( - - - - - {true && } - - - - - - - - - - {import.meta.env.DEV && import.meta.env.MODE !== 'test' && ( - - )} - + }> + + + + + {true && } + + + + + + + + + + {import.meta.env.DEV && import.meta.env.MODE !== 'test' && ( + + )} + + ); export default Root; diff --git a/src/components/context/LayoutContext.tsx b/src/components/context/LayoutContext.tsx index d0855c376..09d93b3b6 100644 --- a/src/components/context/LayoutContext.tsx +++ b/src/components/context/LayoutContext.tsx @@ -1,6 +1,7 @@ import { createContext, useContext, useMemo, useState } from 'react'; import { ChatStatus } from '@graasp/sdk'; +import { useMobileView } from '@graasp/ui'; import { DEFAULT_ITEM_LAYOUT_MODE } from '../../config/constants'; import { ITEM_LAYOUT_MODES } from '../../enums'; @@ -58,6 +59,7 @@ export const LayoutContextProvider = ({ }: { children: JSX.Element; }): JSX.Element => { + const { isMobile } = useMobileView(); // layout mode: grid or list const [mode, setMode] = useState(DEFAULT_ITEM_LAYOUT_MODE); @@ -71,7 +73,7 @@ export const LayoutContextProvider = ({ null, ); - const [isMainMenuOpen, setIsMainMenuOpen] = useState(true); + const [isMainMenuOpen, setIsMainMenuOpen] = useState(!isMobile); const [isItemSharingOpen, setIsItemSharingOpen] = useState(true); const [isItemMetadataMenuOpen, setIsItemMetadataMenuOpen] = useState(false); 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 874437e67..40da494cb 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" From 1531c3f01cf1516b4b09ff67f42a7c5acb05bb0c Mon Sep 17 00:00:00 2001 From: spaenleh Date: Wed, 31 Jan 2024 13:01:55 +0100 Subject: [PATCH 2/3] fix: uppy container and view memberships test --- cypress/support/commands.ts | 8 +-- package.json | 2 +- src/components/App.tsx | 39 ++++++++----- src/components/context/LayoutContext.tsx | 26 +++++---- src/components/file/FileUploader.tsx | 55 +++++++------------ src/components/main/Main.tsx | 5 +- src/components/pages/FavoriteItemsScreen.tsx | 7 +-- src/components/pages/HomeScreen.tsx | 7 +-- src/components/pages/ItemScreen.tsx | 11 ++-- src/components/pages/PublishedItemsScreen.tsx | 5 +- src/components/pages/RecycledItemsScreen.tsx | 7 +-- src/components/pages/SharedItemsScreen.tsx | 7 +-- yarn.lock | 8 +-- 13 files changed, 75 insertions(+), 112 deletions(-) diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 1a9b1c710..1a1566470 100644 --- a/cypress/support/commands.ts +++ b/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 = {}) => { diff --git a/package.json b/package.json index a17f400e3..c40d6f1ce 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "@graasp/query-client": "2.4.1", "@graasp/sdk": "3.4.1", "@graasp/translations": "1.22.1", - "@graasp/ui": "4.5.0", + "@graasp/ui": "github:graasp/graasp-ui#fix-missing-flex", "@mui/icons-material": "5.14.19", "@mui/lab": "5.0.0-alpha.151", "@mui/material": "5.14.19", diff --git a/src/components/App.tsx b/src/components/App.tsx index 7be9ef9b9..e950ca9d5 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1,4 +1,4 @@ -import { useLocation } from 'react-router'; +import { Outlet, useLocation } from 'react-router'; import { Route, Routes } from 'react-router-dom'; import { saveUrlForRedirection } from '@graasp/sdk'; @@ -19,6 +19,7 @@ import { } from '../config/paths'; import { hooks } from '../config/queryClient'; import { useCurrentUserContext } from './context/CurrentUserContext'; +import Main from './main/Main'; import Redirect from './main/Redirect'; import FavoriteItemsScreen from './pages/FavoriteItemsScreen'; import HomeScreen from './pages/HomeScreen'; @@ -71,21 +72,29 @@ const App = (): JSX.Element => { return ( - } /> - } /> } - /> - } - /> - } /> - } /> - } /> - } /> - } /> + element={ +
+ +
+ } + > + } /> + } /> + } + /> + } + /> + } /> + } /> + } /> + } /> + } /> + ); }; diff --git a/src/components/context/LayoutContext.tsx b/src/components/context/LayoutContext.tsx index 09d93b3b6..5041c29c5 100644 --- a/src/components/context/LayoutContext.tsx +++ b/src/components/context/LayoutContext.tsx @@ -1,7 +1,6 @@ import { createContext, useContext, useMemo, useState } from 'react'; import { ChatStatus } from '@graasp/sdk'; -import { useMobileView } from '@graasp/ui'; import { DEFAULT_ITEM_LAYOUT_MODE } from '../../config/constants'; import { ITEM_LAYOUT_MODES } from '../../enums'; @@ -11,8 +10,8 @@ interface LayoutContextInterface { setMode: (mode: string) => void; editingItemId: string | null; setEditingItemId: (itemId: string | null) => void; - isMainMenuOpen: boolean; - setIsMainMenuOpen: (isOpen: boolean) => void; + // isMainMenuOpen?: boolean; + // setIsMainMenuOpen: (isOpen: boolean) => void; openedActionTabId: string | null; setOpenedActionTabId: (action: string | null) => void; isItemMetadataMenuOpen: boolean; @@ -32,10 +31,10 @@ export const LayoutContext = createContext({ setEditingItemId: () => { // do nothing }, - isMainMenuOpen: true, - setIsMainMenuOpen: () => { - // do nothing - }, + // isMainMenuOpen: true, + // setIsMainMenuOpen: () => { + // // do nothing + // }, openedActionTabId: null, setOpenedActionTabId: () => { // do nothing @@ -59,7 +58,6 @@ export const LayoutContextProvider = ({ }: { children: JSX.Element; }): JSX.Element => { - const { isMobile } = useMobileView(); // layout mode: grid or list const [mode, setMode] = useState(DEFAULT_ITEM_LAYOUT_MODE); @@ -73,7 +71,7 @@ export const LayoutContextProvider = ({ null, ); - const [isMainMenuOpen, setIsMainMenuOpen] = useState(!isMobile); + // const [isMainMenuOpen, setIsMainMenuOpen] = useState(); const [isItemSharingOpen, setIsItemSharingOpen] = useState(true); const [isItemMetadataMenuOpen, setIsItemMetadataMenuOpen] = useState(false); @@ -88,8 +86,12 @@ export const LayoutContextProvider = ({ setMode, editingItemId, setEditingItemId, - isMainMenuOpen, - setIsMainMenuOpen, + // isMainMenuOpen, + // setIsMainMenuOpen: (state: boolean) => { + // // eslint-disable-next-line no-console + // console.log('toggling main menu to ', state); + // setIsMainMenuOpen(state); + // }, openedActionTabId, setOpenedActionTabId, isItemMetadataMenuOpen, @@ -103,7 +105,7 @@ export const LayoutContextProvider = ({ editingItemId, isChatboxMenuOpen, isItemMetadataMenuOpen, - isMainMenuOpen, + // isMainMenuOpen, mode, openedActionTabId, isItemSharingOpen, diff --git a/src/components/file/FileUploader.tsx b/src/components/file/FileUploader.tsx index f9fa8d885..360fa2097 100644 --- a/src/components/file/FileUploader.tsx +++ b/src/components/file/FileUploader.tsx @@ -7,57 +7,45 @@ import { MAX_FILE_SIZE } from '@graasp/sdk'; import '@uppy/drag-drop/dist/style.css'; import { DragDrop } from '@uppy/react'; -import { - DRAWER_WIDTH, - FILE_UPLOAD_MAX_FILES, - HEADER_HEIGHT, -} from '../../config/constants'; +import { FILE_UPLOAD_MAX_FILES } from '../../config/constants'; import { useBuilderTranslation } from '../../config/i18n'; import { UPLOADER_ID } from '../../config/selectors'; import { BUILDER } from '../../langs/constants'; import { humanFileSize } from '../../utils/uppy'; -import { useLayoutContext } from '../context/LayoutContext'; import { UppyContext } from './UppyContext'; -const StyledContainer = styled(Box, { - shouldForwardProp: (prop) => prop !== 'color' && prop !== 'myProp', -})<{ isMainMenuOpen: boolean }>(({ theme, isMainMenuOpen }) => ({ +const StyledContainer = styled(Box)(({ theme }) => ({ display: 'none', - height: '100vh', - width: '100%', - boxSizing: 'border-box', - position: 'fixed', + + // used to position the uppy container above the rest of the content + position: 'absolute', + // sets the borders of the container to stick to the border of the parent top: 0, + bottom: 0, left: 0, + right: 0, + + // width: '100%', + boxSizing: 'border-box', + // show above drawer zIndex: theme.zIndex.drawer + 1, opacity: 0.8, +})); +const StyledDragDrop = styled(DragDrop)(({ theme }) => ({ + // sets uppy to stretch to full width + width: '100%', + boxSizing: 'border-box', + padding: theme.spacing(2), + // these styles are necessary and can not be lifted up '& > div': { - width: '100%', - height: '100vh', boxSizing: 'border-box', - paddingLeft: `${ - Number(theme.spacing(2).slice(0, -2)) + - (isMainMenuOpen ? DRAWER_WIDTH : 0) - }px`, - paddingTop: `${Number(theme.spacing(2).slice(0, -2)) + HEADER_HEIGHT}px`, - paddingBottom: theme.spacing(2), - paddingRight: theme.spacing(2), - - '& > div': { - boxSizing: 'border-box', - height: '100vh', - // container's top and bottom padding - paddingBottom: `${ - Number(theme.spacing(4).slice(0, -2)) + HEADER_HEIGHT - }px`, - }, + height: '100%', }, })); const FileUploader = (): JSX.Element | null => { - const { isMainMenuOpen } = useLayoutContext(); const { uppy } = useContext(UppyContext); const [isDragging, setIsDragging] = useState(false); const [isValid, setIsValid] = useState(true); @@ -141,9 +129,8 @@ const FileUploader = (): JSX.Element | null => { onDragEnd={() => handleDragEnd()} onDragLeave={() => handleDragEnd()} onDrop={handleDrop} - isMainMenuOpen={isMainMenuOpen} > - { - const { isMainMenuOpen } = useLayoutContext(); + // const { isMainMenuOpen } = useLayoutContext(); const { t } = useBuilderTranslation(); const itemId = useShortenURLParams(ITEM_ID_PARAMS); @@ -79,7 +78,6 @@ const Main = ({ children }: Props): JSX.Element => { ); - return ( { drawerOpenAriaLabel={t(BUILDER.ARIA_OPEN_DRAWER)} headerRightContent={rightContent} drawerContent={} - open={isMainMenuOpen} LinkComponent={LinkComponent} PlatformComponent={ { const { t: translateBuilder } = useBuilderTranslation(); @@ -41,10 +40,6 @@ const FavoriteItemsLoadableContent = (): JSX.Element | null => { return null; }; -const FavoriteItemsScreen = (): JSX.Element => ( -
- -
-); +const FavoriteItemsScreen = (): JSX.Element => ; export default FavoriteItemsScreen; diff --git a/src/components/pages/HomeScreen.tsx b/src/components/pages/HomeScreen.tsx index 40ddd0d85..c3a98a3a8 100644 --- a/src/components/pages/HomeScreen.tsx +++ b/src/components/pages/HomeScreen.tsx @@ -23,7 +23,6 @@ import ItemHeader from '../item/header/ItemHeader'; 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 = @@ -140,10 +139,6 @@ const HomeLoadableContent = (): JSX.Element => { return ; }; -const HomeScreen = (): JSX.Element => ( -
- -
-); +const HomeScreen = (): JSX.Element => ; export default HomeScreen; diff --git a/src/components/pages/ItemScreen.tsx b/src/components/pages/ItemScreen.tsx index b525ac35c..5d7399327 100644 --- a/src/components/pages/ItemScreen.tsx +++ b/src/components/pages/ItemScreen.tsx @@ -31,7 +31,6 @@ import ItemPublishTab from '../item/publish/ItemPublishTab'; import ItemSettings from '../item/settings/ItemSettings'; import ItemSharingTab from '../item/sharing/ItemSharingTab'; import ItemForbiddenScreen from '../main/ItemForbiddenScreen'; -import Main from '../main/Main'; const { useItem, @@ -94,12 +93,10 @@ const ItemScreen = (): JSX.Element => { })(); return ( -
- - {item.type === ItemType.FOLDER ? : undefined} - {content} - -
+ + {item.type === ItemType.FOLDER ? : undefined} + {content} + ); }; diff --git a/src/components/pages/PublishedItemsScreen.tsx b/src/components/pages/PublishedItemsScreen.tsx index 44e17f2a2..e46632e1a 100644 --- a/src/components/pages/PublishedItemsScreen.tsx +++ b/src/components/pages/PublishedItemsScreen.tsx @@ -13,7 +13,6 @@ 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(); @@ -47,9 +46,7 @@ const PublishedItemsLoadableContent = (): JSX.Element | null => { }; const PublishedItemsScreen = (): JSX.Element => ( -
- -
+ ); export default PublishedItemsScreen; diff --git a/src/components/pages/RecycledItemsScreen.tsx b/src/components/pages/RecycledItemsScreen.tsx index 06dfa80ff..04afef7b4 100644 --- a/src/components/pages/RecycledItemsScreen.tsx +++ b/src/components/pages/RecycledItemsScreen.tsx @@ -17,7 +17,6 @@ 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 }; @@ -79,10 +78,6 @@ const RecycleBinLoadableContent = (): JSX.Element | null => { return null; }; -const RecycledItemsScreen = (): JSX.Element => ( -
- -
-); +const RecycledItemsScreen = (): JSX.Element => ; export default RecycledItemsScreen; diff --git a/src/components/pages/SharedItemsScreen.tsx b/src/components/pages/SharedItemsScreen.tsx index 813186024..8e6e46b7d 100644 --- a/src/components/pages/SharedItemsScreen.tsx +++ b/src/components/pages/SharedItemsScreen.tsx @@ -15,7 +15,6 @@ import { 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(); @@ -47,10 +46,6 @@ const SharedItemsLoadableContent = (): JSX.Element => { ); }; -const SharedItemsScreen = (): JSX.Element => ( -
- -
-); +const SharedItemsScreen = (): JSX.Element => ; export default SharedItemsScreen; diff --git a/yarn.lock b/yarn.lock index 40da494cb..94c2bc5bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1315,9 +1315,9 @@ __metadata: languageName: node linkType: hard -"@graasp/ui@npm:4.5.0": +"@graasp/ui@github:graasp/graasp-ui#fix-missing-flex": version: 4.5.0 - resolution: "@graasp/ui@npm:4.5.0" + resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=b9d708e323975a323f261313185112795da1c99c" dependencies: "@graasp/sdk": "npm:3.5.0" http-status-codes: "npm:2.3.0" @@ -1351,7 +1351,7 @@ __metadata: optional: true ag-grid-react: optional: true - checksum: eecd53f0d9d7824c526179b84db29ff303c70f0405d19ad74fc48c5b4966ed47620da06fdda981bfc7ed70eba08d02d1bc9f3e3a958ec430c556fa6b191f5878 + checksum: aebd5cf2e8a308f9222ad54c82c0702333f239183dfee2ca2bf95943c54207517b0e72a70cc0135f89c7cf0ff71dc65a3c8f28de1ad67e10690d08a4c68054d1 languageName: node linkType: hard @@ -6341,7 +6341,7 @@ __metadata: "@graasp/query-client": "npm:2.4.1" "@graasp/sdk": "npm:3.4.1" "@graasp/translations": "npm:1.22.1" - "@graasp/ui": "npm:4.5.0" + "@graasp/ui": "github:graasp/graasp-ui#fix-missing-flex" "@mui/icons-material": "npm:5.14.19" "@mui/lab": "npm:5.0.0-alpha.151" "@mui/material": "npm:5.14.19" From 63a874bfb0cda03dd0d6e4a9294cb6c8d8497172 Mon Sep 17 00:00:00 2001 From: spaenleh Date: Fri, 2 Feb 2024 10:38:34 +0100 Subject: [PATCH 3/3] fix: make PR requested changes --- package.json | 2 +- src/components/Root.tsx | 2 +- src/components/context/LayoutContext.tsx | 14 -------------- src/components/file/FileUploader.tsx | 1 - src/components/main/Main.tsx | 6 ++---- src/config/queryClient.ts | 2 +- yarn.lock | 10 +++++----- 7 files changed, 10 insertions(+), 27 deletions(-) diff --git a/package.json b/package.json index c40d6f1ce..df69428c1 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "@graasp/query-client": "2.4.1", "@graasp/sdk": "3.4.1", "@graasp/translations": "1.22.1", - "@graasp/ui": "github:graasp/graasp-ui#fix-missing-flex", + "@graasp/ui": "4.5.1", "@mui/icons-material": "5.14.19", "@mui/lab": "5.0.0-alpha.151", "@mui/material": "5.14.19", diff --git a/src/components/Root.tsx b/src/components/Root.tsx index d06d235a7..04e9fd61f 100644 --- a/src/components/Root.tsx +++ b/src/components/Root.tsx @@ -30,7 +30,7 @@ const Root = (): JSX.Element => ( - {true && } + diff --git a/src/components/context/LayoutContext.tsx b/src/components/context/LayoutContext.tsx index 5041c29c5..251fdff0d 100644 --- a/src/components/context/LayoutContext.tsx +++ b/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({ 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(); const [isItemSharingOpen, setIsItemSharingOpen] = useState(true); const [isItemMetadataMenuOpen, setIsItemMetadataMenuOpen] = useState(false); @@ -86,12 +79,6 @@ export const LayoutContextProvider = ({ setMode, editingItemId, setEditingItemId, - // isMainMenuOpen, - // setIsMainMenuOpen: (state: boolean) => { - // // eslint-disable-next-line no-console - // console.log('toggling main menu to ', state); - // setIsMainMenuOpen(state); - // }, openedActionTabId, setOpenedActionTabId, isItemMetadataMenuOpen, @@ -105,7 +92,6 @@ export const LayoutContextProvider = ({ editingItemId, isChatboxMenuOpen, isItemMetadataMenuOpen, - // isMainMenuOpen, mode, openedActionTabId, isItemSharingOpen, diff --git a/src/components/file/FileUploader.tsx b/src/components/file/FileUploader.tsx index 360fa2097..9277803f7 100644 --- a/src/components/file/FileUploader.tsx +++ b/src/components/file/FileUploader.tsx @@ -25,7 +25,6 @@ const StyledContainer = styled(Box)(({ theme }) => ({ left: 0, right: 0, - // width: '100%', boxSizing: 'border-box', // show above drawer diff --git a/src/components/main/Main.tsx b/src/components/main/Main.tsx index a1d63e605..6700aa97f 100644 --- a/src/components/main/Main.tsx +++ b/src/components/main/Main.tsx @@ -1,4 +1,4 @@ -import { Link } from 'react-router-dom'; +import { Link, useParams } from 'react-router-dom'; import { Stack, styled } from '@mui/material'; @@ -9,7 +9,6 @@ import { PlatformSwitch, defaultHostsMapper, usePlatformNavigation, - useShortenURLParams, } from '@graasp/ui'; import { HOST_MAP } from '@/config/externalPaths'; @@ -47,10 +46,9 @@ export const platformsHostsMap = defaultHostsMapper({ type Props = { children: JSX.Element | (JSX.Element & string) }; const Main = ({ children }: Props): JSX.Element => { - // const { isMainMenuOpen } = useLayoutContext(); const { t } = useBuilderTranslation(); - const itemId = useShortenURLParams(ITEM_ID_PARAMS); + const itemId = useParams()[ITEM_ID_PARAMS]; const getNavigationEvents = usePlatformNavigation(platformsHostsMap, itemId); const platformProps = { diff --git a/src/config/queryClient.ts b/src/config/queryClient.ts index d4c11ffb3..c387daacc 100644 --- a/src/config/queryClient.ts +++ b/src/config/queryClient.ts @@ -17,7 +17,7 @@ const { enableWebsocket: true, defaultQueryOptions: { keepPreviousData: true, - refetchOnMount: true, + refetchOnMount: false, }, DOMAIN, }); diff --git a/yarn.lock b/yarn.lock index 94c2bc5bc..eca374614 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1315,9 +1315,9 @@ __metadata: languageName: node linkType: hard -"@graasp/ui@github:graasp/graasp-ui#fix-missing-flex": - version: 4.5.0 - resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=b9d708e323975a323f261313185112795da1c99c" +"@graasp/ui@npm:4.5.1": + version: 4.5.1 + resolution: "@graasp/ui@npm:4.5.1" dependencies: "@graasp/sdk": "npm:3.5.0" http-status-codes: "npm:2.3.0" @@ -1351,7 +1351,7 @@ __metadata: optional: true ag-grid-react: optional: true - checksum: aebd5cf2e8a308f9222ad54c82c0702333f239183dfee2ca2bf95943c54207517b0e72a70cc0135f89c7cf0ff71dc65a3c8f28de1ad67e10690d08a4c68054d1 + checksum: 659135ea821492202155706c4ae6c0effda5aa862ae302c9b056c3220476bc1d4042d2a25ed6d3f808f061370c8f2b970b81de1db88fb9dd9f3ab71712640db4 languageName: node linkType: hard @@ -6341,7 +6341,7 @@ __metadata: "@graasp/query-client": "npm:2.4.1" "@graasp/sdk": "npm:3.4.1" "@graasp/translations": "npm:1.22.1" - "@graasp/ui": "github:graasp/graasp-ui#fix-missing-flex" + "@graasp/ui": "npm:4.5.1" "@mui/icons-material": "npm:5.14.19" "@mui/lab": "npm:5.0.0-alpha.151" "@mui/material": "npm:5.14.19"