From 0a805490aa29c8518c953307ab9be9cc8767ab18 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Thu, 2 Nov 2023 13:32:47 +0100
Subject: [PATCH] feat: project overview pagination (#5248)

---
 .../project/Project/ProjectOverview.tsx       | 39 +++++++++++--------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/frontend/src/component/project/Project/ProjectOverview.tsx b/frontend/src/component/project/Project/ProjectOverview.tsx
index ee5d582415..c0f50eb5f8 100644
--- a/frontend/src/component/project/Project/ProjectOverview.tsx
+++ b/frontend/src/component/project/Project/ProjectOverview.tsx
@@ -13,8 +13,6 @@ import { ProjectStats } from './ProjectStats/ProjectStats';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { useFeatureSearch } from 'hooks/api/getters/useFeatureSearch/useFeatureSearch';
-import { useOnVisible } from 'hooks/useOnVisible';
-import { IFeatureToggleListItem } from 'interfaces/featureToggle';
 
 const refreshInterval = 15 * 1000;
 
@@ -42,27 +40,31 @@ const InfiniteProjectOverview = () => {
     const { project, loading: projectLoading } = useProject(projectId, {
         refreshInterval,
     });
-    const [cursor, setCursor] = useState('');
+    const [prevCursors, setPrevCursors] = useState<string[]>([]);
+    const [currentCursor, setCurrentCursor] = useState('');
     const {
         features: searchFeatures,
         nextCursor,
         total,
         refetch,
         loading,
-    } = useFeatureSearch(cursor, projectId, { refreshInterval });
+    } = useFeatureSearch(currentCursor, projectId, { refreshInterval });
 
     const { members, features, health, description, environments, stats } =
         project;
-    const fetchNextPageRef = useOnVisible<HTMLDivElement>(() => {
-        if (!loading && nextCursor !== cursor && nextCursor !== '') {
-            setCursor(nextCursor);
+    const fetchNextPage = () => {
+        if (!loading && nextCursor !== currentCursor && nextCursor !== '') {
+            setPrevCursors([...prevCursors, currentCursor]);
+            setCurrentCursor(nextCursor);
         }
-    });
-    const [dataList, setDataList] = useState<IFeatureToggleListItem[]>([]);
-
-    useEffect(() => {
-        setDataList((prev) => [...prev, ...searchFeatures]);
-    }, [JSON.stringify(searchFeatures)]);
+    };
+    const fetchPrevPage = () => {
+        const prevCursor = prevCursors.pop();
+        if (prevCursor) {
+            setCurrentCursor(prevCursor);
+        }
+        setPrevCursors([...prevCursors]);
+    };
 
     return (
         <StyledContainer>
@@ -79,17 +81,20 @@ const InfiniteProjectOverview = () => {
                 <StyledProjectToggles>
                     <ProjectFeatureToggles
                         key={
-                            loading && dataList.length === 0
+                            loading && searchFeatures.length === 0
                                 ? 'loading'
                                 : 'ready'
                         }
-                        features={dataList}
+                        features={searchFeatures}
                         environments={environments}
-                        loading={loading && dataList.length === 0}
+                        loading={loading && searchFeatures.length === 0}
                         onChange={refetch}
                         total={total}
                     />
-                    <div ref={fetchNextPageRef} />
+                    {prevCursors.length > 0 ? (
+                        <Box onClick={fetchPrevPage}>Prev</Box>
+                    ) : null}
+                    {nextCursor && <Box onClick={fetchNextPage}>Next</Box>}
                 </StyledProjectToggles>
             </StyledContentContainer>
         </StyledContainer>