ERM-3220 Update pagination mechanisms for MCLs to work without stats (#…

…680)

* ERM-3220 Update pagination mechanisms for MCLs to work without stats

* add pageCount property

* ERM-3220 Update pagination mechanisms for MCLs to work without stats

* create new hook for fetch with no stats
* add hasNextPage prop to usePrevNextPagination

* ERM-3220 Update pagination mechanisms for MCLs to work without stats

* create new hook for fetch with no stats
* add hasNextPage prop to usePrevNextPagination

* refactor: Changed hasNextPage functionality

Now the hasNextPage overwrites the canGoNext calculation if it is provided

* refactor: Spread params tidy up

* ERM-3220 Update pagination mechanisms for MCLs to work without stats

* rename hook
* set defaukt page

* ERM-3220 Update pagination mechanisms for MCLs to work without stats

* remove comments
* add resetPageStore function

* ERM-3220 Update pagination mechanisms for MCLs to work without stats

* remove resetPageStore function

* feat: useFetchMultiplePages

Renamed hook to "useFetchMultiplePages", so it will be primed for any future logic to expand past just two pages. For now it will make use of the page passed in the params object

Also changed out keyArray for getQueryKey which allows finer control over the queryKey for the implementing code

refs ERM-3220

---------

Co-authored-by: Jack Golding <[email protected]>
Co-authored-by: Ethan Freestone <[email protected]>

lib/hooks/index.js

@@ -11,6 +11,7 @@ export { default as useInterfaceCredentials } from './useInterfaceCredentials';
 export { default as useSingleFetchInterfaceCredentials } from './useSingleFetchInterfaceCredentials';
 export { default as useChunkedCQLFetch } from './useChunkedCQLFetch';
 export { default as useChunkedUsers } from './useChunkedUsers';
+export { default as useFetchMultiplePages } from './useFetchMultiplePages';
 export { default as useParallelBatchFetch } from './useParallelBatchFetch';
 export { default as usePrevNextPagination } from './usePrevNextPagination';
 export { default as usePrevious } from './usePrevious';

lib/hooks/useFetchMultiplePages.js

@@ -0,0 +1,58 @@
+import { useMemo } from 'react';
+import { useQueries } from 'react-query';
+import { useOkapiKy } from '@folio/stripes/core';
+import { generateKiwtQueryParams } from '@k-int/stripes-kint-components';
+
+const defaultParams = { page: 1 };
+
+const useFetchMultiplePages = ({
+  getQueryKey = ({ params, pathStr, pageNum }) => [pathStr, pageNum, params],
+  params = {}, // Accepts an object of the shape expected by the first parameter of generateKiwtQueryParams
+  path = '',
+  // At some point in the future I'd like this to be able to accept a list of pages, and run those all in parallel (possibly with some chunking logic)
+} = {}) => {
+  const ky = useOkapiKy();
+  const queryArray = [];
+
+  // Apply defaultParams ensuring that 'page' is defaulted properly
+  const effectiveParams = useMemo(() => ({ ...defaultParams, ...params }), [params]);
+
+  const currentPageParams = useMemo(() => (
+    generateKiwtQueryParams(
+      { ...effectiveParams },
+      {}
+    )
+  ), [effectiveParams]);
+  queryArray.push({
+    queryKey: getQueryKey({
+      params: currentPageParams,
+      pageNum: effectiveParams.page,
+      pathStr: path
+    }),
+    queryFn: () => ky.get(`${path}?${currentPageParams?.join('&')}`).json(),
+  });
+
+  const nextPageParams = useMemo(() => (
+    generateKiwtQueryParams(
+      { ...effectiveParams, page: effectiveParams.page + 1 },
+      {}
+    )
+  ), [effectiveParams]);
+  queryArray.push({
+    queryKey: getQueryKey({
+      params: nextPageParams,
+      pageNum: effectiveParams.page + 1,
+      pathStr: path
+    }),
+    queryFn: () => ky.get(`${path}?${nextPageParams?.join('&')}`).json(),
+  });
+
+  const queries = useQueries(queryArray);
+
+  return ({
+    [effectiveParams.page]: queries[0],
+    [effectiveParams.page + 1]: queries[1], // For now this is just "current" and "next", but longer term this could be expanded to n pages from a list for prefetching etc
+  });
+};
+
+export default useFetchMultiplePages;

lib/hooks/usePrevNextPagination.js

@@ -12,12 +12,16 @@ import {
 
 import useLocalPageStore from './useLocalPageStore';
 
+// Currently there are several places in which this hook is used twice within the same component
+// Once in order to get the current page, and again in order to handle changes to paginations
+// This hook should be refactored in order to resolve these issue - @EthanFreestone
 const usePrevNextPagination = ({
   count = 0, // Only needed for reading back MCL props
   defaultToPageOne = true, // A prop to allow the implementor to turn off the defaulting to page=1
   pageSize = DEFAULT_PAGINATION_SIZE, // Only needed for reading back MCL props
   id = DEFAULT_PAGE_KEY, // This id is ONLY used for syncToLocation: false cases, as a key to the zustand store
-  syncToLocation = true // Used to turn on/off location syncing, so can be used as standalone state if required
+  syncToLocation = true, // Used to turn on/off location syncing, so can be used as standalone state if required,
+  hasNextPage = null // Override for canGoNext, used in the case in which resources are fetched with no stats
 } = {}) => {
   /* ------ ZUSTAND STORE ------ */
   // For NON-SYNC-TO-LOCATION use cases, store the currentPage in a keyed store
@@ -146,7 +150,7 @@ const usePrevNextPagination = ({
   ]);
 
   // Set up MCL specific props based on page
-  const pagingCanGoNext = currentPage && currentPage < Number(count) / pageSize;
+  const pagingCanGoNext = hasNextPage ?? (currentPage && (currentPage < Number(count) / pageSize));
   const pagingCanGoPrevious = currentPage && Number(currentPage) > 1;
   const pagingOffset = currentPage ? (currentPage - 1) * pageSize : 0;
   const onNeedMoreData = (...args) => {