fix: update for use with correct queries

graasp · Oct 7, 2024 · 1ac7230 · 1ac7230
1 parent f7ab65b
commit 1ac7230
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 102 deletions.
diff --git a/cypress/e2e/appAnalytics.cy.ts b/cypress/e2e/appAnalytics.cy.ts
@@ -13,24 +13,17 @@ import MOCK_ITEMS, {
 } from '../fixtures/items';
 import MOCK_MEMBERSHIP from '../fixtures/membership';
 
-const visitItemPage = (
-  item: { id: string },
-  options: { moveToAnalytics?: boolean } = {},
-) => {
-  const { moveToAnalytics = true } = options;
-
+const visitItemPage = (item: { id: string }) => {
   cy.visit(buildItemPath(item.id));
-  if (moveToAnalytics) {
-    cy.get(`#${buildSidebarListItemId(APP_ITEM)}`).click();
-  }
+  cy.get(`#${buildSidebarListItemId(APP_ITEM)}`).click();
 };
 
 const checkContainAppAnalytics = () => {
   cy.get(`#${buildSidebarListItemId(APP_ITEM)}`).should('exist');
   cy.get(`#${APPS_ID}`).should('exist');
 };
 
-describe('Check An App Item has an app analytics ', () => {
+describe.only('Check An App Item has an app analytics ', () => {
   beforeEach(() => {
     cy.setUpApi({ items: [CALC_APP_ITEM] });
   });
@@ -66,7 +59,7 @@ describe('Check non-app item does not show app analytics', () => {
   });
 
   it('Check that app section and list do not exist', () => {
-    visitItemPage(MOCK_ITEMS[1], { moveToAnalytics: false });
+    cy.visit(buildItemPath(MOCK_ITEMS[1].id));
     cy.get(`#${APPS_ID}`).should('not.exist');
   });
 });
diff --git a/mockServer/mockServer.ts b/mockServer/mockServer.ts
@@ -170,17 +170,11 @@ const mockServer = ({
         if (!itemId) {
           throw new Error('item id does not exist');
         }
-
-        return (
-          schema
-            .all('item')
-            // TODO: remove any after figuring out the type
-            .filter(({ id, path }: any) =>
-              path.includes(
-                `${buildPathFromId(itemId)}.${buildPathFromId(id)}`,
-              ),
-            )
+        const allItems = schema.all('item');
+        const descendantsOfItem = allItems.filter(({ id, path }: any) =>
+          path.includes(`${buildPathFromId(itemId)}.${buildPathFromId(id)}`),
         );
+        return descendantsOfItem;
       });
 
       // get parents

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -2,6 +2,8 @@ import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Outlet, Route, Routes } from 'react-router-dom';
 
+import { Box } from '@mui/material';
+
 import { AccountType, buildSignInPath } from '@graasp/sdk';
 import { DEFAULT_LANG } from '@graasp/translations';
 import { Loader, SignedInWrapper } from '@graasp/ui';
@@ -19,7 +21,9 @@ import {
   USERS_ANALYTICS_PATH,
   buildItemPath,
 } from '../config/paths';
-import ContextsWrapper from './context/ContextsWrapper';
+import DataProvider from './context/DataProvider';
+import ViewDataProvider from './context/ViewDataProvider';
+import Navigator from './layout/Navigator';
 import PageWrapper from './layout/PageWrapper';
 import HomePageWrapper from './pages/HomePage';
 import AppsAnalyticPage from './pages/Item/AppsAnalyticPage';
@@ -61,9 +65,11 @@ const App = (): JSX.Element => {
               redirectionUrl: window.location.toString(),
             })}
           >
-            <PageWrapper>
-              <Outlet />
-            </PageWrapper>
+            <DataProvider>
+              <PageWrapper>
+                <Outlet />
+              </PageWrapper>
+            </DataProvider>
           </SignedInWrapper>
         }
       >
@@ -73,9 +79,12 @@ const App = (): JSX.Element => {
         <Route
           path={buildItemPath()}
           element={
-            <ContextsWrapper>
-              <ItemPage />
-            </ContextsWrapper>
+            <Box id="navigatorContainer" width="100%">
+              <Navigator />
+              <ViewDataProvider>
+                <ItemPage />
+              </ViewDataProvider>
+            </Box>
           }
         >
           <Route index element={<GeneralAnalyticsPage />} />

diff --git a/src/components/context/ContextsWrapper.tsx b/src/components/context/ContextsWrapper.tsx
diff --git a/src/components/context/DataProvider.tsx b/src/components/context/DataProvider.tsx
@@ -152,7 +152,6 @@ const DataProvider = ({ children }: Props): JSX.Element => {
   const { data: itemChildren } = hooks.useChildren(itemId, undefined, {
     enabled: itemData?.type === ItemType.FOLDER,
   });
-
   const descendantApps =
     itemData?.type === ItemType.APP
       ? [itemData, ...appDescendants]
@@ -257,9 +256,7 @@ const DataProvider = ({ children }: Props): JSX.Element => {
     ],
   );
 
-  return (
-    <DataContext.Provider value={value}> {children} </DataContext.Provider>
-  );
+  return <DataContext.Provider value={value}> {children}</DataContext.Provider>;
 };
 
 export default DataProvider;
diff --git a/src/components/layout/PageWrapper.tsx b/src/components/layout/PageWrapper.tsx
@@ -1,4 +1,4 @@
-import { Link, useLocation, useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 
 import { Box, styled, useTheme } from '@mui/material';
 
@@ -17,7 +17,6 @@ import { useAnalyticsTranslation } from '@/config/i18n';
 import { HOME_PATH } from '@/config/paths';
 
 import UserSwitchWrapper from '../common/UserSwitchWrapper';
-import Navigator from './Navigator';
 import Sidebar from './Sidebar';
 
 export const platformsHostsMap = defaultHostsMapper({
@@ -39,7 +38,6 @@ const LinkComponent = ({ children }: { children: JSX.Element }) => (
 const PageWrapper = ({ children }: { children: JSX.Element }): JSX.Element => {
   const { t } = useAnalyticsTranslation();
   const { itemId } = useParams();
-  const { pathname } = useLocation();
 
   const theme = useTheme();
   const { isMobile } = useMobileView();
@@ -59,7 +57,6 @@ const PageWrapper = ({ children }: { children: JSX.Element }): JSX.Element => {
       ...getNavigationEvents(Platform.Analytics),
     },
   };
-  const isRoot = pathname === HOME_PATH;
 
   return (
     <Main
@@ -83,11 +80,6 @@ const PageWrapper = ({ children }: { children: JSX.Element }): JSX.Element => {
       LinkComponent={LinkComponent}
     >
       <Box height="100%" display="flex" flexGrow={1} flexDirection="column">
-        {!isRoot && (
-          <Box id="navigatorContainer" width="100%">
-            <Navigator />
-          </Box>
-        )}
         {children}
       </Box>
     </Main>

diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { FC, useContext } from 'react';
+import { useContext } from 'react';
 import { useParams } from 'react-router-dom';
 
 import AppsIcon from '@mui/icons-material/Apps';
@@ -33,11 +33,10 @@ import {
 import { DataContext } from '../context/DataProvider';
 import LinkMenuItem from '../custom/LinkMenuItem';
 
-const Sidebar: FC = () => {
+const Sidebar = (): JSX.Element => {
   const { t } = useAnalyticsTranslation();
   const { itemId } = useParams();
   const { descendantApps } = useContext(DataContext);
-
   const { data: item } = hooks.useItem(itemId);
 
   const menuItems = [];

diff --git a/src/components/pages/HomePage.tsx b/src/components/pages/HomePage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import {
   Alert,
@@ -10,7 +10,6 @@ import {
   Typography,
 } from '@mui/material';
 
-import { DiscriminatedItem, PackedItem } from '@graasp/sdk';
 import { SearchInput } from '@graasp/ui';
 
 import { ITEM_PAGE_SIZE } from '@/config/constants';
@@ -23,35 +22,17 @@ import ItemLoaderSkelton from '../common/ItemLoaderSkeleton';
 const HomePage = (): JSX.Element => {
   const { t } = useAnalyticsTranslation();
 
-  const [page, setPage] = useState(1);
-  const [items, setItems] = useState<DiscriminatedItem[]>([]);
   const [searchQuery, setSearchQuery] = useState('');
-  const {
-    data: accessibleItems,
-    isLoading,
-    error,
-  } = hooks.useAccessibleItems(
-    { keywords: searchQuery },
-    // get items cumulative
-    { pageSize: ITEM_PAGE_SIZE, page },
-  );
+  const { data, isLoading, fetchNextPage, isFetching } =
+    hooks.useInfiniteAccessibleItems(
+      { keywords: searchQuery },
+      // get items cumulative
+      { pageSize: ITEM_PAGE_SIZE },
+    );
 
-  useEffect(() => {
-    if (accessibleItems?.data) {
-      if (page === 1) {
-        setItems(accessibleItems?.data);
-      } else {
-        setItems((prev) => {
-          const newItems = accessibleItems.data.filter(
-            (item: PackedItem) => !prev.some((p) => p.id === item.id),
-          );
-          return [...prev, ...newItems];
-        });
-      }
-    }
-  }, [accessibleItems?.data, page]);
+  const accessibleItems = data?.pages.flatMap(({ data: i }) => i);
 
-  if (!isLoading && !error) {
+  if (accessibleItems) {
     return (
       <Stack direction="column" spacing={2}>
         <Alert severity="warning">{t('NO_ITEM_SELECTED')}</Alert>
@@ -67,29 +48,27 @@ const HomePage = (): JSX.Element => {
             size="small"
             onChange={(e) => {
               setSearchQuery(e.target.value);
-              setPage(1);
             }}
             value={searchQuery}
             placeholder={t('ITEM_SEARCH_PLACEHOLDER')}
           />
         </Stack>
-        {items.length ? (
+        {accessibleItems.length ? (
           <Stack spacing={1}>
             <Box>
-              {items.map((item) => (
+              {accessibleItems.map((item) => (
                 <ItemLink key={item.id} item={item} />
               ))}
             </Box>
-            {accessibleItems?.totalCount &&
-              items.length < accessibleItems?.totalCount && (
-                <Button
-                  variant="text"
-                  sx={{ textTransform: 'none', maxWidth: 'max-content' }}
-                  onClick={() => setPage((p) => p + 1)}
-                >
-                  {t('HOME_SHOW_MORE')}
-                </Button>
-              )}
+            {accessibleItems.length < (data?.pages?.[0]?.totalCount ?? 0) && (
+              <Button
+                variant="text"
+                sx={{ textTransform: 'none', maxWidth: 'max-content' }}
+                onClick={() => !isFetching && fetchNextPage()}
+              >
+                {t('HOME_SHOW_MORE')}
+              </Button>
+            )}
           </Stack>
         ) : (
           <Typography variant="subtitle1">

diff --git a/src/components/pages/Item/ItemPage.tsx b/src/components/pages/Item/ItemPage.tsx
@@ -13,9 +13,9 @@ import { useAnalyticsTranslation } from '@/config/i18n';
 const ItemPage = (): JSX.Element => {
   const { t } = useAnalyticsTranslation();
   const { view } = useContext(ViewDataContext);
-  const { error, isLoading, actions } = useContext(DataContext);
+  const { isLoading, actions } = useContext(DataContext);
 
-  if (!error && !isLoading) {
+  if (actions) {
     const types = [...new Set(actions.map((a) => a.type))];
 
     return (

diff --git a/src/config/queryClient.ts b/src/config/queryClient.ts
@@ -14,7 +14,7 @@ const {
   API_HOST,
   enableWebsocket: true,
   defaultQueryOptions: {
-    keepPreviousData: true,
+    keepPreviousData: false,
     refetchOnWindowFocus: true,
   },
   notifier,