diff --git a/assets/src/components/policies/PoliciesFilter.tsx b/assets/src/components/policies/PoliciesFilter.tsx index 2421f689e..c04e2777f 100644 --- a/assets/src/components/policies/PoliciesFilter.tsx +++ b/assets/src/components/policies/PoliciesFilter.tsx @@ -10,15 +10,16 @@ import { useClustersQuery, useViolationStatisticsQuery, } from 'generated/graphql' -import { Dispatch, SetStateAction, useMemo, useState } from 'react' +import { Dispatch, SetStateAction, useCallback, useMemo, useState } from 'react' import styled, { useTheme } from 'styled-components' import { useDebounce } from '@react-hooks-library/core' import { useProjectId } from '../contexts/ProjectsContext' import { mapExistingNodes } from '../../utils/graphql' -import { StandardScroller } from '../utils/SmoothScroller' import { useFetchPaginatedData } from '../utils/table/useFetchPaginatedData' +const FETCH_MARGIN = 30 + function PoliciesFilter({ selectedKinds, setSelectedKinds, @@ -36,7 +37,6 @@ function PoliciesFilter({ }) { const theme = useTheme() const projectId = useProjectId() - const [listRef, setListRef] = useState(null) const [searchString, setSearchString] = useState('') const debouncedSearchString = useDebounce(searchString, 100) @@ -60,7 +60,6 @@ function PoliciesFilter({ { queryHook: useClustersQuery, keyPath: ['clusters'], - pageSize: 5, // TODO }, { q: debouncedSearchString, @@ -105,6 +104,23 @@ function PoliciesFilter({ }) } + const fetchMoreOnBottomReached = useCallback( + (element?: HTMLDivElement | undefined) => { + if (!element) return + + const { scrollHeight, scrollTop, clientHeight } = element + + if ( + scrollHeight - scrollTop - clientHeight < FETCH_MARGIN && + !loading && + pageInfo.hasNextPage + ) { + fetchNextPage() + } + }, + [fetchNextPage, loading, pageInfo] + ) + return ( setSearchString?.(e.currentTarget.value)} /> -
-
} - hasNextPage={pageInfo?.hasNextPage} - mapper={(node) => ( - { - handleCheckboxChange(setSelectedClusters, node.id, checked) - }} - > - {node.name} - - )} - loadNextPage={() => pageInfo?.hasNextPage && fetchNextPage()} - refreshKey={undefined} - setLoader={undefined} - handleScroll={undefined} - /> +
+ fetchMoreOnBottomReached(e?.target as HTMLDivElement) + } + > + {[{ id: null, name: 'No cluster' }, ...clusters].map((cluster) => ( + { + handleCheckboxChange(setSelectedClusters, cluster.id, checked) + }} + > + {cluster.name} + + ))}