From c3568354aa5611a12ce87c961cd89ec564030979 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C4=B1dvan=20Akca?= <akca.ridvann@gmail.com>
Date: Tue, 12 Mar 2024 12:10:26 +0300
Subject: [PATCH] feat: use useInfinityQuery instead of useQuery in
 useExecutionSteps

---
 packages/web/src/hooks/useExecutionSteps.js | 17 +++++----
 packages/web/src/pages/Execution/index.jsx  | 38 ++++++++++++++-------
 2 files changed, 37 insertions(+), 18 deletions(-)

diff --git a/packages/web/src/hooks/useExecutionSteps.js b/packages/web/src/hooks/useExecutionSteps.js
index dc177c44..ddbd5643 100644
--- a/packages/web/src/hooks/useExecutionSteps.js
+++ b/packages/web/src/hooks/useExecutionSteps.js
@@ -1,16 +1,16 @@
-import { useQuery } from '@tanstack/react-query';
+import { useInfiniteQuery } from '@tanstack/react-query';
 
 import api from 'helpers/api';
 
-export default function useExecutionSteps(executionId, page) {
-  const query = useQuery({
-    queryKey: ['executionSteps', executionId, page],
-    queryFn: async ({ payload, signal }) => {
+export default function useExecutionSteps({ executionId }) {
+  const query = useInfiniteQuery({
+    queryKey: ['executionSteps', executionId],
+    queryFn: async ({ pageParam = 1, signal }) => {
       const { data } = await api.get(
         `/v1/executions/${executionId}/execution-steps`,
         {
           params: {
-            page: page,
+            page: pageParam,
           },
           signal,
         },
@@ -18,6 +18,11 @@ export default function useExecutionSteps(executionId, page) {
 
       return data;
     },
+    initialPageParam: 1,
+    getNextPageParam: (lastPage) =>
+      lastPage?.meta?.currentPage < lastPage?.meta?.totalPages
+        ? lastPage?.meta?.currentPage + 1
+        : null,
   });
 
   return query;
diff --git a/packages/web/src/pages/Execution/index.jsx b/packages/web/src/pages/Execution/index.jsx
index 0f860038..b6a702d1 100644
--- a/packages/web/src/pages/Execution/index.jsx
+++ b/packages/web/src/pages/Execution/index.jsx
@@ -21,19 +21,29 @@ export default function Execution() {
     variables: { executionId },
   });
 
-  const { data, isLoading: isExecutionLoading } = useExecutionSteps(
-    executionId,
-    1,
-  );
+  const {
+    data,
+    isLoading: isExecutionStepsLoading,
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+    isFetchingNextPage,
+  } = useExecutionSteps({
+    executionId: executionId,
+  });
 
-  const executionSteps = data?.data;
+  React.useEffect(() => {
+    if (!isFetching && !isFetchingNextPage && hasNextPage) {
+      fetchNextPage();
+    }
+  }, [isFetching, isFetchingNextPage, hasNextPage, fetchNextPage]);
 
   return (
     <Container sx={{ py: 3 }}>
       <ExecutionHeader execution={execution?.getExecution} />
 
       <Grid container item sx={{ mt: 2, mb: [2, 5] }} rowGap={3}>
-        {!isExecutionLoading && !executionSteps?.length && (
+        {!isExecutionStepsLoading && !data?.pages?.[0].data.length && (
           <Alert severity="warning" sx={{ flex: 1 }}>
             <AlertTitle sx={{ fontWeight: 700 }}>
               {formatMessage('execution.noDataTitle')}
@@ -45,12 +55,16 @@ export default function Execution() {
           </Alert>
         )}
 
-        {executionSteps?.map((executionStep) => (
-          <ExecutionStep
-            key={executionStep.id}
-            executionStep={executionStep}
-            step={executionStep.step}
-          />
+        {data?.pages?.map((group, i) => (
+          <React.Fragment key={i}>
+            {group?.data?.map((executionStep) => (
+              <ExecutionStep
+                key={executionStep.id}
+                executionStep={executionStep}
+                step={executionStep.step}
+              />
+            ))}
+          </React.Fragment>
         ))}
       </Grid>
     </Container>