From 5bbdaf4e70aec565e830485796ac54fec8871fa9 Mon Sep 17 00:00:00 2001
From: Lokananda Prabhu <lprabhu@redhat.com>
Date: Thu, 24 Oct 2024 13:40:06 +0530
Subject: [PATCH] Created custom hook to handle fetch on scroll

---
 .../pipelineRuns-list/PipelineRunsList.tsx    | 23 ++++---------------
 .../pipelines-tasks/TaskRunsList.tsx          | 18 ++-------------
 src/components/utils/tekton-results.ts        | 22 ++++++++++++++++++
 3 files changed, 28 insertions(+), 35 deletions(-)

diff --git a/src/components/pipelineRuns-list/PipelineRunsList.tsx b/src/components/pipelineRuns-list/PipelineRunsList.tsx
index 27252d1..280fab6 100644
--- a/src/components/pipelineRuns-list/PipelineRunsList.tsx
+++ b/src/components/pipelineRuns-list/PipelineRunsList.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom-v5-compat';
 import { SortByDirection } from '@patternfly/react-table';
 import {
   ListPageBody,
@@ -11,8 +13,7 @@ import { usePipelineRunsFilters } from './usePipelineRunsFilters';
 import { PipelineRunKind } from '../../types';
 import { useGetPipelineRuns } from '../hooks/useTektonResult';
 import PipelineRunsRow from './PipelineRunsRow';
-import { useTranslation } from 'react-i18next';
-import { useParams } from 'react-router-dom-v5-compat';
+import { useLoadMoreOnScroll } from '../utils/tekton-results';
 
 import './PipelineRunsList.scss';
 
@@ -56,23 +57,7 @@ const PipelineRunsList: React.FC<PipelineRunsListProps> = ({
     filters,
   );
 
-  // Once OCPBUGS-43538 ticket is closed, use onRowsRendered prop in VirtualizedTable for load more on scroll
-  React.useEffect(() => {
-    if (!loadMoreRef.current || !pipelineRunsLoaded) return;
-
-    const observer = new IntersectionObserver((entries) => {
-      const entry = entries[0];
-      if (entry.isIntersecting && nextPageToken) {
-        nextPageToken();
-      }
-    });
-
-    observer.observe(loadMoreRef.current);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [nextPageToken, pipelineRunsLoaded]);
+  useLoadMoreOnScroll(loadMoreRef, nextPageToken, pipelineRunsLoaded);
 
   return (
     <ListPageBody>
diff --git a/src/components/pipelines-tasks/TaskRunsList.tsx b/src/components/pipelines-tasks/TaskRunsList.tsx
index 2648795..3903409 100644
--- a/src/components/pipelines-tasks/TaskRunsList.tsx
+++ b/src/components/pipelines-tasks/TaskRunsList.tsx
@@ -19,6 +19,7 @@ import { TaskRunModel } from '../../models';
 import { ALL_NAMESPACES_KEY, TektonResourceLabel } from '../../consts';
 import { getReferenceForModel } from '../pipelines-overview/utils';
 import { useTaskRunsFilters } from './useTaskRunsFilters';
+import { useLoadMoreOnScroll } from '../utils/tekton-results';
 
 interface TaskRunsListPageProps {
   showTitle?: boolean;
@@ -123,23 +124,8 @@ const TaskRunsList: React.FC<TaskRunsListPageProps> = ({
     useTaskRunsFilters(),
   );
 
-  // Once OCPBUGS-43538 ticket is closed, use onRowsRendered prop in VirtualizedTable for load more on scroll
-  React.useEffect(() => {
-    if (!loadMoreRef.current || !loaded) return;
+  useLoadMoreOnScroll(loadMoreRef, nextPageToken, loaded);
 
-    const observer = new IntersectionObserver((entries) => {
-      const entry = entries[0];
-      if (entry.isIntersecting && nextPageToken) {
-        nextPageToken();
-      }
-    });
-
-    observer.observe(loadMoreRef.current);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [nextPageToken, loaded]);
   return (
     <>
       <ListPageBody>
diff --git a/src/components/utils/tekton-results.ts b/src/components/utils/tekton-results.ts
index 953cea2..9d6d04d 100644
--- a/src/components/utils/tekton-results.ts
+++ b/src/components/utils/tekton-results.ts
@@ -7,6 +7,7 @@ import {
   k8sGet,
 } from '@openshift-console/dynamic-plugin-sdk';
 import _ from 'lodash';
+import { RefObject, useEffect } from 'react';
 import {
   ALL_NAMESPACES_KEY,
   DELETED_RESOURCE_IN_K8S_ANNOTATION,
@@ -491,3 +492,24 @@ export const getTaskRunLog = async (taskRunPath: string): Promise<string> => {
   )}`;
   return consoleProxyFetchLog({ url, method: 'GET', allowInsecure: true });
 };
+
+export const useLoadMoreOnScroll = (
+  loadMoreRef: RefObject<HTMLElement>,
+  nextPageToken: (() => void) | null,
+  loaded: boolean,
+) => {
+  useEffect(() => {
+    if (!loadMoreRef.current || !loaded) return;
+
+    const observer = new IntersectionObserver((entries) => {
+      const entry = entries[0];
+      if (entry.isIntersecting && nextPageToken) {
+        nextPageToken();
+      }
+    });
+    observer.observe(loadMoreRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [nextPageToken, loaded, loadMoreRef]);
+};