added param to query, removed local storage

content-services · Jan 29, 2024 · 1fae8b5 · 1fae8b5
1 parent 5bab9de
commit 1fae8b5
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 42 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -3,22 +3,22 @@ import 'react18-json-view/src/style.css';
 import NotificationsPortal from '@redhat-cloud-services/frontend-components-notifications/NotificationPortal';
 import { Bullseye, Spinner } from '@patternfly/react-core';
 import { useEffect, useMemo, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { last } from 'lodash';
 
 import Routes from './Routes';
 import { useAppContext } from './middleware/AppContext';
 import { NoPermissionsPage } from './components/NoPermissionsPage/NoPermissionsPage';
-import { FilterData } from './services/Content/ContentApi';
+import { ContentOrigin, FilterData } from './services/Content/ContentApi';
 import { useContentListQuery } from './services/Content/ContentQueries';
 import { perPageKey } from './Pages/ContentListTable/ContentListTable';
-import { useLocation } from 'react-router-dom';
-import { last } from 'lodash';
 import { DEFAULT_ROUTE } from './Routes/useTabbedRoutes';
 
 export default function App() {
-  const { rbac, isFetchingFeatures, zeroState, saveZeroState } = useAppContext();
+  const { rbac, isFetchingFeatures, zeroState, setZeroState } = useAppContext();
   const storedPerPage = Number(localStorage.getItem(perPageKey)) || 20;
   const { pathname } = useLocation();
-  const currentRoute = useMemo(() => last(pathname.split('/')), [pathname]);
+  const isDefaultRoute = useMemo(() => last(pathname.split('/')) === DEFAULT_ROUTE, [pathname]);
 
   const [filterData] = useState<FilterData>({
     searchQuery: '',
@@ -27,18 +27,16 @@ export default function App() {
     statuses: [],
   });
 
-  const { 
-    data = { data: [], meta: { count: 0, limit: 20, offset: 0 } },
-    isLoading
-  } = useContentListQuery(1, storedPerPage, filterData, '');
+  const { data = { data: [], meta: { count: 0, limit: 20, offset: 0 } }, isLoading } =
+    useContentListQuery(1, storedPerPage, filterData, '', ContentOrigin.EXTERNAL, !isDefaultRoute);
 
-  // Check for user's custom repositories to determine whether we need to show zero state 
+  // Check for user's custom repositories to determine whether we need to show zero state
   useEffect(() => {
     // Zero state may be true AND a user may have repositories if they have signed in via a different machine for the first time
-    if(zeroState && data.data.length > 0 && currentRoute != DEFAULT_ROUTE) { 
-      saveZeroState(false);
+    if (zeroState && data.data.length > 0 && !isDefaultRoute) {
+      setZeroState(false);
     }
-  }, [data.data.length]) 
+  }, [data.data.length]);
 
   switch (true) {
     case !rbac || isFetchingFeatures || isLoading:

diff --git a/src/Routes/index.tsx b/src/Routes/index.tsx
@@ -1,9 +1,10 @@
 import { Grid } from '@patternfly/react-core';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import { createUseStyles } from 'react-jss';
+import { useMemo } from 'react';
+
 import { ErrorPage } from '../components/Error/ErrorPage';
 import Layout from './Layout';
-import { useMemo } from 'react';
 import { ZeroState } from '../components/ZeroState/ZeroState';
 import useTabbedRoutes, { DEFAULT_ROUTE } from './useTabbedRoutes';
 import { useAppContext } from '../middleware/AppContext';
@@ -23,7 +24,7 @@ export default function MainRoutes() {
   return (
     <Routes key={key}>
       {zeroState ? <Route path={DEFAULT_ROUTE} element={<ZeroState />} /> : <></>}
-      
+
       <Route element={<Layout tabs={tabs} />}>
         {tabs.map(({ route, Element, ChildRoutes }, key) => (
           <Route
@@ -43,7 +44,7 @@ export default function MainRoutes() {
           </Route>
         ))}
       </Route>
-      
+
       <Route path='*' element={<Navigate to={DEFAULT_ROUTE} replace />} />
     </Routes>
   );

diff --git a/src/components/ZeroState/ZeroState.tsx b/src/components/ZeroState/ZeroState.tsx
@@ -12,41 +12,41 @@ const useStyles = createUseStyles({
     minHeight: '100%',
     '& .bannerBefore': { maxHeight: '320px!important' },
   },
-})
+});
 
 export const ZeroState = () => {
   const classes = useStyles();
   const navigate = useNavigate();
-  const { saveZeroState } = useAppContext();
+  const { setZeroState } = useAppContext();
 
   const handleClick = () => {
-    saveZeroState(false);
+    setZeroState(false);
     navigate('add-repository');
-  }
+  };
 
   return (
     <>
       <Suspense
         fallback={
           <Bullseye>
-            <Spinner size="xl" />
+            <Spinner size='xl' />
           </Bullseye>
         }
       >
         <Grid className={classes.minHeight}>
           <AsyncComponent
-            appId="content_zero_state"
-            appName="dashboard"
-            module="./AppZeroState"
-            scope="dashboard"
+            appId='content_zero_state'
+            appName='dashboard'
+            module='./AppZeroState'
+            scope='dashboard'
             ErrorComponent={<ErrorState />}
-            app="Content_management"
-            customText="Get started with Insights by adding custom repositories"
+            app='Content_management'
+            customText='Get started with Insights by adding custom repositories'
             customButton={
               <Button
-                id="add-custom-repositories-button"
-                ouiaId="add_custom_repositories_button"
-                className="pf-c-button pf-m-primary pf-u-p-md pf-u-font-size-md"
+                id='add-custom-repositories-button'
+                ouiaId='add_custom_repositories_button'
+                className='pf-c-button pf-m-primary pf-u-p-md pf-u-font-size-md'
                 onClick={() => handleClick()}
               >
                 Add custom repositories
@@ -55,7 +55,7 @@ export const ZeroState = () => {
           />
         </Grid>
       </Suspense>
-      <Outlet/>
+      <Outlet />
     </>
-  )
+  );
 };
diff --git a/src/middleware/AppContext.tsx b/src/middleware/AppContext.tsx
@@ -18,7 +18,7 @@ export interface AppContextInterface {
   contentOrigin: ContentOrigin;
   setContentOrigin: (contentOrigin: ContentOrigin) => void;
   zeroState: boolean;
-  saveZeroState: (isZeroState: boolean) => void;
+  setZeroState: (zeroState: boolean) => void;
 }
 export const AppContext = createContext({} as AppContextInterface);
 
@@ -30,11 +30,6 @@ export const ContextProvider = ({ children }: { children: ReactNode }) => {
   const [contentOrigin, setContentOrigin] = useState<ContentOrigin>(ContentOrigin.EXTERNAL);
   const { fetchFeatures, isLoading: isFetchingFeatures } = useFetchFeaturesQuery();
 
-  const saveZeroState = (isZeroState) => {
-    localStorage.setItem('zeroState', isZeroState.toString());
-    setZeroState(isZeroState)
-  }
-
   useEffect(() => {
     // Get chrome and register app
     const registry = getRegistry();
@@ -49,9 +44,6 @@ export const ContextProvider = ({ children }: { children: ReactNode }) => {
       const fetchedFeatures = await fetchFeatures();
       setFeatures(fetchedFeatures);
     })();
-
-    if (zeroState) 
-      localStorage.setItem('zeroState', zeroState.toString());
   }, [!!chrome]);
 
   return (
@@ -68,7 +60,7 @@ export const ContextProvider = ({ children }: { children: ReactNode }) => {
         contentOrigin,
         setContentOrigin,
         zeroState,
-        saveZeroState
+        setZeroState,
       }}
     >
       {children}

diff --git a/src/services/Content/ContentQueries.ts b/src/services/Content/ContentQueries.ts
@@ -85,6 +85,7 @@ export const useContentListQuery = (
   filterData: FilterData,
   sortBy: string,
   contentOrigin: ContentOrigin = ContentOrigin.EXTERNAL,
+  enabled: boolean = true,
 ) => {
   const [polling, setPolling] = useState(false);
   const [pollCount, setPollCount] = useState(0);
@@ -123,6 +124,7 @@ export const useContentListQuery = (
       refetchOnWindowFocus: polling, // If polling and navigate to another tab, on refocus, we want to poll once more. (This is based off of the stalestime below)
       keepPreviousData: true,
       staleTime: 20000,
+      enabled,
     },
   );
 };