fix: use params in descendants

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",

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,16 +296,17 @@ 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,
   });
 
   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 (
     <FolderCard

src/modules/layout/PageWrapper.tsx

@@ -24,7 +24,6 @@ import {
   APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS,
   APP_NAVIGATION_PLATFORM_SWITCH_ID,
 } from '@/config/selectors';
-import { ItemContextProvider } from '@/contexts/ItemContext';
 import { PLAYER } from '@/langs/constants';
 
 import HomeNavigation from '../navigation/HomeNavigation';
@@ -84,54 +83,39 @@ const PageWrapper = ({ fullscreen }: PageWrapperProps): JSX.Element => {
 
   if (fullscreen) {
     return (
-      <ItemContextProvider rootId={rootId}>
-        {/* necessary for item login screen to be centered */}
-        <Box
-          height="100vh"
-          overflow="auto"
-          display="flex"
-          flexDirection="column"
-        >
-          <Outlet />
-        </Box>
-      </ItemContextProvider>
+      /* necessary for item login screen to be centered */
+      <Box height="100vh" overflow="auto" display="flex" flexDirection="column">
+        <Outlet />
+      </Box>
     );
   }
 
   return (
-    <ItemContextProvider rootId={rootId}>
-      <Main
-        open={Boolean(rootId)}
-        context={Context.Player}
-        drawerContent={
-          rootId ? <ItemStructureNavigation /> : <HomeNavigation />
-        }
-        drawerOpenAriaLabel={t(PLAYER.DRAWER_ARIAL_LABEL)}
-        LinkComponent={LinkComponent}
-        PlatformComponent={
-          <PlatformSwitch
-            id={APP_NAVIGATION_PLATFORM_SWITCH_ID}
-            selected={Platform.Player}
-            platformsProps={platformProps}
-            disabledColor="#999"
-            color={
-              isMobile
-                ? theme.palette.primary.main
-                : theme.palette.secondary.main
-            }
-            accentColor={
-              isMobile
-                ? theme.palette.secondary.main
-                : theme.palette.primary.main
-            }
-          />
-        }
-        headerLeftContent={<Typography noWrap>{item?.displayName}</Typography>}
-        headerRightContent={<UserSwitchWrapper />}
-      >
-        <Outlet />
-      </Main>
-    </ItemContextProvider>
+    <Main
+      open={Boolean(rootId)}
+      context={Context.Player}
+      drawerContent={rootId ? <ItemStructureNavigation /> : <HomeNavigation />}
+      drawerOpenAriaLabel={t(PLAYER.DRAWER_ARIAL_LABEL)}
+      LinkComponent={LinkComponent}
+      PlatformComponent={
+        <PlatformSwitch
+          id={APP_NAVIGATION_PLATFORM_SWITCH_ID}
+          selected={Platform.Player}
+          platformsProps={platformProps}
+          disabledColor="#999"
+          color={
+            isMobile ? theme.palette.primary.main : theme.palette.secondary.main
+          }
+          accentColor={
+            isMobile ? theme.palette.secondary.main : theme.palette.primary.main
+          }
+        />
+      }
+      headerLeftContent={<Typography noWrap>{item?.displayName}</Typography>}
+      headerRightContent={<UserSwitchWrapper />}
+    >
+      <Outlet />
+    </Main>
   );
 };
 export default PageWrapper;

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 => {
           <TreeView
             id={TREE_VIEW_ID}
             rootItems={[rootItem]}
-            items={[rootItem, ...descendants].filter((ele) => !ele.hidden)}
+            items={[rootItem, ...descendants]}
             firstLevelStyle={{ fontWeight: 'bold' }}
             onTreeItemSelect={handleNavigationOnClick}
           />

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(

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;

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

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"