Merge pull request #1954 from mkholjuraev/paginated-requests

create helper function to fetch data with concurrent requests

packages/utils/package.json

@@ -32,8 +32,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-redux": ">=7.0.0",
-        "react-router-dom": "^5.0.0 || ^6.0.0",
-        "cypress": ">=12.0.0 < 14.0.0"
+        "react-router-dom": "^5.0.0 || ^6.0.0"
     },
     "dependencies": {
         "@redhat-cloud-services/rbac-client": "^1.0.100",
@@ -43,6 +42,7 @@
         "axios": "^0.28.0",
         "commander": "^2.20.3",
         "mkdirp": "^1.0.4",
+        "p-all": "^5.0.0",
         "react-content-loader": "^6.2.0"
     },
     "devDependencies": {

packages/utils/src/index.ts

@@ -18,3 +18,5 @@ export { useInventory } from './useInventory';
 export * from './CypressUtils';
 export * from './useInsightsNavigate';
 export * from './useExportPDF';
+export * from './usePromiseQueue';
+export * from './useFetchBatched';

packages/utils/src/useFetchBatched/index.ts

@@ -0,0 +1 @@
+export { default } from './useFetchBatched';

packages/utils/src/useFetchBatched/useFetchBatched.ts

@@ -0,0 +1,30 @@
+import usePromiseQueue from '../usePromiseQueue';
+
+type FetchFunctionType = (filter: object | Array<string>, options?: object) => void;
+
+//hook to enable fetching a lot of data from the API in concurrent API calls
+const useFetchBatched = () => {
+  const { isResolving: isLoading, resolve } = usePromiseQueue();
+
+  return {
+    isLoading,
+    fetchBatched: (fetchFunction: FetchFunctionType, total: number, filter: object, batchSize = 50) => {
+      const pages = Math.ceil(total / batchSize) || 1;
+
+      const results = resolve([...new Array(pages)].map((_, pageIdx) => () => fetchFunction(filter, { page: pageIdx + 1, per_page: batchSize })));
+
+      return results;
+    },
+    fetchBatchedInline: (fetchFunction: FetchFunctionType, list: Array<string>, batchSize = 20) => {
+      const pages = Math.ceil(list.length / batchSize) || 1;
+
+      const results = resolve(
+        [...new Array(pages)].map((_, pageIdx) => () => fetchFunction(list.slice(batchSize * pageIdx, batchSize * (pageIdx + 1))))
+      );
+
+      return results;
+    },
+  };
+};
+
+export default useFetchBatched;

packages/utils/src/usePromiseQueue/index.ts

@@ -0,0 +1 @@
+export { default } from './usePromiseQueue';

packages/utils/src/usePromiseQueue/usePromiseQueue.ts

@@ -0,0 +1,46 @@
+import { useCallback, useState } from 'react';
+import pAll from 'p-all';
+
+const DEFAULT_CONCURRENT_PROMISES = 2;
+
+type PromiseQueueStateType = {
+  isResolving: boolean;
+  //undeterministic result type by p-all package
+  promiseResults: any;
+};
+
+// hook that provides queued promises with state
+const usePromiseQueue = (concurrency = DEFAULT_CONCURRENT_PROMISES) => {
+  const defaultState: PromiseQueueStateType = {
+    isResolving: false,
+    promiseResults: undefined,
+  };
+  const [results, setResults] = useState(defaultState);
+
+  const resolve = useCallback(
+    async (fns: any) => {
+      setResults((state) => ({
+        ...state,
+        isResolving: true,
+      }));
+      const results: any = await pAll(fns, {
+        concurrency,
+      });
+      setResults({
+        isResolving: false,
+        promiseResults: results,
+      });
+
+      return results;
+    },
+    [concurrency]
+  );
+
+  return {
+    isResolving: results.isResolving,
+    results: results.promiseResults,
+    resolve,
+  };
+};
+
+export default usePromiseQueue;