Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +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 { 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>