From 299b3ea544b4fdbcb5f4cadc2b125357387610a9 Mon Sep 17 00:00:00 2001 From: spaenleh Date: Mon, 17 Jun 2024 11:45:32 +0200 Subject: [PATCH] fix: use params in descendants --- package.json | 2 +- src/contexts/ItemContext.tsx | 79 ------------------- src/modules/item/Item.tsx | 10 +-- src/modules/layout/PageWrapper.tsx | 74 +++++++---------- src/modules/navigation/ItemNavigation.tsx | 9 ++- src/modules/navigationIsland/ChatButton.tsx | 9 ++- .../navigationIsland/PinnedItemsButton.tsx | 7 +- .../navigationIsland/PreviousNextButtons.tsx | 10 +-- yarn.lock | 10 +-- 9 files changed, 63 insertions(+), 147 deletions(-) delete mode 100644 src/contexts/ItemContext.tsx diff --git a/package.json b/package.json index 52ebefcf6..781243207 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "@emotion/react": "11.11.4", "@emotion/styled": "11.11.5", "@graasp/chatbox": "3.1.0", - "@graasp/query-client": "3.9.0", + "@graasp/query-client": "github:graasp/graasp-query-client#795-update-get-descendants", "@graasp/sdk": "4.12.2", "@graasp/translations": "1.28.1", "@graasp/ui": "4.19.3", diff --git a/src/contexts/ItemContext.tsx b/src/contexts/ItemContext.tsx deleted file mode 100644 index 1c361961d..000000000 --- a/src/contexts/ItemContext.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React, { useContext, useMemo, useState } from 'react'; - -import { DiscriminatedItem } from '@graasp/sdk'; - -import { hooks } from '@/config/queryClient'; - -type Props = { - rootId?: string; - children: JSX.Element | JSX.Element[]; -}; - -type ItemContextType = { - rootId?: string; - focusedItemId?: string; - setFocusedItemId: (id: string) => void; - rootItem?: DiscriminatedItem; - isRootItemLoading: boolean; - isRootItemError: boolean; - descendants?: DiscriminatedItem[]; - isDescendantsLoading: boolean; - isDescendantsError: boolean; -}; - -const ItemContext = React.createContext({ - rootId: '', - focusedItemId: '', - setFocusedItemId: (id: string) => { - console.error(`Called setFocusedItemId(${id}) without a matching Provider`); - }, - isRootItemLoading: true, - isRootItemError: false, - isDescendantsLoading: true, - isDescendantsError: false, -}); - -const ItemContextProvider = ({ children, rootId }: Props): JSX.Element => { - const [focusedItemId, setFocusedItemId] = useState(); - const { - data: rootItem, - isLoading: isRootItemLoading, - isError: isRootItemError, - } = hooks.useItem(rootId); - const { - data: descendants, - isLoading: isDescendantsLoading, - isError: isDescendantsError, - } = hooks.useDescendants({ id: rootId ?? '', enabled: true }); - - const value = useMemo( - () => ({ - rootId, - focusedItemId, - setFocusedItemId, - rootItem, - isRootItemLoading, - isRootItemError, - descendants, - isDescendantsLoading, - isDescendantsError, - }), - [ - rootId, - focusedItemId, - setFocusedItemId, - rootItem, - isRootItemLoading, - isRootItemError, - descendants, - isDescendantsLoading, - isDescendantsError, - ], - ); - - return {children}; -}; - -export const useItemContext = (): ItemContextType => useContext(ItemContext); - -export { ItemContext, ItemContextProvider }; diff --git a/src/modules/item/Item.tsx b/src/modules/item/Item.tsx index 8d7afcdaf..db301b903 100644 --- a/src/modules/item/Item.tsx +++ b/src/modules/item/Item.tsx @@ -1,7 +1,7 @@ import { Fragment, useCallback, useEffect } from 'react'; import { Helmet } from 'react-helmet'; import { useInView } from 'react-intersection-observer'; -import { useSearchParams } from 'react-router-dom'; +import { useParams, useSearchParams } from 'react-router-dom'; import { Alert, Box, Container, Divider, Skeleton, Stack } from '@mui/material'; @@ -57,7 +57,6 @@ import { buildLinkItemId, } from '@/config/selectors'; import { useCurrentMemberContext } from '@/contexts/CurrentMemberContext'; -import { useItemContext } from '@/contexts/ItemContext'; import { PLAYER } from '@/langs/constants'; import { paginationContentFilter } from '@/utils/item'; @@ -297,7 +296,8 @@ const ShortcutContent = ({ item }: { item: ShortcutItemType }): JSX.Element => { const FolderButtonContent = ({ item }: { item: FolderItemType }) => { const [searchParams] = useSearchParams(); - const { rootItem } = useItemContext(); + const { itemId } = useParams(); + const { data: currentDisplayedItem } = useItem(itemId); const { data: thumbnail } = hooks.useItemThumbnailUrl({ id: item.id, size: ThumbnailSize.Medium, @@ -305,8 +305,8 @@ const FolderButtonContent = ({ item }: { item: FolderItemType }) => { const newSearchParams = new URLSearchParams(searchParams.toString()); newSearchParams.set('from', window.location.pathname); - if (rootItem) { - newSearchParams.set('fromName', rootItem.name); + if (currentDisplayedItem) { + newSearchParams.set('fromName', currentDisplayedItem.name); } return ( { if (fullscreen) { return ( - - {/* necessary for item login screen to be centered */} - - - - + /* necessary for item login screen to be centered */ + + + ); } return ( - -
: - } - drawerOpenAriaLabel={t(PLAYER.DRAWER_ARIAL_LABEL)} - LinkComponent={LinkComponent} - PlatformComponent={ - - } - headerLeftContent={{item?.displayName}} - headerRightContent={} - > - -
- +
: } + drawerOpenAriaLabel={t(PLAYER.DRAWER_ARIAL_LABEL)} + LinkComponent={LinkComponent} + PlatformComponent={ + + } + headerLeftContent={{item?.displayName}} + headerRightContent={} + > + +
); }; export default PageWrapper; diff --git a/src/modules/navigation/ItemNavigation.tsx b/src/modules/navigation/ItemNavigation.tsx index 2bc727b8c..e314f5520 100644 --- a/src/modules/navigation/ItemNavigation.tsx +++ b/src/modules/navigation/ItemNavigation.tsx @@ -33,9 +33,12 @@ const DrawerNavigation = (): JSX.Element | null => { const { t: translateMessage } = useMessagesTranslation(); - let { data: descendants } = useDescendants({ id: rootId ?? '' }); - const { isInitialLoading: isLoadingTree } = useDescendants({ + // shuffling requires to have a let here, but this is not clean, refactor to use const as soon as possible + // eslint-disable-next-line prefer-const + let { data: descendants, isInitialLoading: isLoadingTree } = useDescendants({ id: rootId ?? '', + // remove hidden + showHidden: false, }); const { data: rootItem, isLoading, isError, error } = useItem(rootId); @@ -74,7 +77,7 @@ const DrawerNavigation = (): JSX.Element | null => { !ele.hidden)} + items={[rootItem, ...descendants]} firstLevelStyle={{ fontWeight: 'bold' }} onTreeItemSelect={handleNavigationOnClick} /> diff --git a/src/modules/navigationIsland/ChatButton.tsx b/src/modules/navigationIsland/ChatButton.tsx index 21255dbd4..5b86ed31f 100644 --- a/src/modules/navigationIsland/ChatButton.tsx +++ b/src/modules/navigationIsland/ChatButton.tsx @@ -2,7 +2,7 @@ import { useParams } from 'react-router-dom'; import { Tooltip } from '@mui/material'; -import { PermissionLevel, PermissionLevelCompare } from '@graasp/sdk'; +import { ItemType, PermissionLevel, PermissionLevelCompare } from '@graasp/sdk'; import { MessageSquareOff, MessageSquareText } from 'lucide-react'; @@ -19,7 +19,12 @@ const useChatButton = (): { chatButton: JSX.Element | false } => { const { itemId, rootId } = useParams(); const { data: item } = hooks.useItem(itemId); const { data: root } = hooks.useItem(rootId); - const { data: descendants } = hooks.useDescendants({ id: rootId }); + const { data: descendants } = hooks.useDescendants({ + id: rootId, + // only fetch folder descendants as this is what the button will show + types: [ItemType.FOLDER], + showHidden: false, + }); const { toggleChatbox, isChatboxOpen } = useLayoutContext(); const chatEnabledItems = descendants?.filter( diff --git a/src/modules/navigationIsland/PinnedItemsButton.tsx b/src/modules/navigationIsland/PinnedItemsButton.tsx index 9e5e0a964..786018b89 100644 --- a/src/modules/navigationIsland/PinnedItemsButton.tsx +++ b/src/modules/navigationIsland/PinnedItemsButton.tsx @@ -22,7 +22,12 @@ const usePinnedItemsButton = (): { pinnedButton: JSX.Element | false } => { const { data: children } = hooks.useChildren(itemId, undefined, { enabled: !!item, }); - const { data: descendants } = hooks.useDescendants({ id: rootId }); + // this call is an issue for the optimization we are looking to accomplish with the useDescendants + // as it relies on the full tree + const { data: descendants } = hooks.useDescendants({ + id: rootId, + showHidden: false, + }); const childrenPinnedCount = children?.filter(({ settings: s, hidden }) => s.isPinned && !hidden) ?.length || 0; diff --git a/src/modules/navigationIsland/PreviousNextButtons.tsx b/src/modules/navigationIsland/PreviousNextButtons.tsx index d61c80761..ec205d8bb 100644 --- a/src/modules/navigationIsland/PreviousNextButtons.tsx +++ b/src/modules/navigationIsland/PreviousNextButtons.tsx @@ -25,8 +25,9 @@ const usePreviousNextButtons = (): { const shuffle = Boolean(searchParams.get('shuffle') === 'true'); const { data: descendants, isInitialLoading } = hooks.useDescendants({ - // not correct but enabled - id: rootId ?? '', + id: rootId, + types: [ItemType.FOLDER], + showHidden: false, enabled: Boolean(rootId), }); @@ -54,10 +55,7 @@ const usePreviousNextButtons = (): { return { previousButton: false, nextButton: false }; } - // we only navigate through folders - let folderHierarchy: DiscriminatedItem[] = descendants.filter( - ({ type }) => type === ItemType.FOLDER, - ); + let folderHierarchy = descendants; if (shuffle) { // seed for shuffling is consistent for member + root (base) item combination diff --git a/yarn.lock b/yarn.lock index ad86750e4..f936be8bd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1303,9 +1303,9 @@ __metadata: languageName: node linkType: hard -"@graasp/query-client@npm:3.9.0": - version: 3.9.0 - resolution: "@graasp/query-client@npm:3.9.0" +"@graasp/query-client@github:graasp/graasp-query-client#795-update-get-descendants": + version: 3.13.1 + resolution: "@graasp/query-client@https://github.com/graasp/graasp-query-client.git#commit=2a6f08aff87b58b1433f4b71663c3d0bd7380f8b" dependencies: "@tanstack/react-query": "npm:4.36.1" "@tanstack/react-query-devtools": "npm:4.36.1" @@ -1316,7 +1316,7 @@ __metadata: "@graasp/sdk": ^4.0.0 "@graasp/translations": ^1.23.0 react: ^18.0.0 - checksum: 10/23490dceb1be2f95759b296099165c2d20be0a7a5fa3b7176c034e2fd30242635d167af39e69074385704d4bc11c8b3aba694c9a5f11e954099b75c395da537b + checksum: 10/168cb8ba0789c5d43d07f864c22e59ac22ad787b3a2b4d8a69ad97c9a145ec1e68a8150d4fc03cc80a1e8dfff17082b6c1a168164d1ca3bbc3976a054b82771e languageName: node linkType: hard @@ -6252,7 +6252,7 @@ __metadata: "@emotion/react": "npm:11.11.4" "@emotion/styled": "npm:11.11.5" "@graasp/chatbox": "npm:3.1.0" - "@graasp/query-client": "npm:3.9.0" + "@graasp/query-client": "github:graasp/graasp-query-client#795-update-get-descendants" "@graasp/sdk": "npm:4.12.2" "@graasp/translations": "npm:1.28.1" "@graasp/ui": "npm:4.19.3"