Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: project overview pagination (#5248)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2023-11-02 13:32:47 +01:00 committed by GitHub
parent 9cfade926e
commit 0a805490aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/component/project/Project/ProjectOverview.tsx
View File

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