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([]); + 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(() => { - if (!loading && nextCursor !== cursor && nextCursor !== '') { - setCursor(nextCursor); + const fetchNextPage = () => { + if (!loading && nextCursor !== currentCursor && nextCursor !== '') { + setPrevCursors([...prevCursors, currentCursor]); + setCurrentCursor(nextCursor); } - }); - const [dataList, setDataList] = useState([]); - - useEffect(() => { - setDataList((prev) => [...prev, ...searchFeatures]); - }, [JSON.stringify(searchFeatures)]); + }; + const fetchPrevPage = () => { + const prevCursor = prevCursors.pop(); + if (prevCursor) { + setCurrentCursor(prevCursor); + } + setPrevCursors([...prevCursors]); + }; return ( @@ -79,17 +81,20 @@ const InfiniteProjectOverview = () => { -
+ {prevCursors.length > 0 ? ( + Prev + ) : null} + {nextCursor && Next}