diff --git a/packages/features/data-table/components/useFetchMoreOnBottomReached.ts b/packages/features/data-table/components/useFetchMoreOnBottomReached.ts index f1407c5001..fbcf61ba84 100644 --- a/packages/features/data-table/components/useFetchMoreOnBottomReached.ts +++ b/packages/features/data-table/components/useFetchMoreOnBottomReached.ts @@ -2,23 +2,27 @@ import { useCallback, useEffect } from "react"; -export const useFetchMoreOnBottomReached = ( - tableContainerRef: React.RefObject, - fetchNextPage: () => void, - isFetching: boolean, - totalFetched: number, - totalDBRowCount: number -) => { +export const useFetchMoreOnBottomReached = ({ + tableContainerRef, + hasNextPage, + fetchNextPage, + isFetching, +}: { + tableContainerRef: React.RefObject; + hasNextPage: boolean; + fetchNextPage: () => void; + isFetching: boolean; +}) => { const fetchMoreOnBottomReached = useCallback( (containerRefElement?: HTMLDivElement | null) => { if (containerRefElement) { const { scrollHeight, scrollTop, clientHeight } = containerRefElement; - if (scrollHeight - scrollTop - clientHeight < 300 && !isFetching && totalFetched < totalDBRowCount) { + if (scrollHeight - scrollTop - clientHeight < 300 && !isFetching && hasNextPage) { fetchNextPage(); } } }, - [fetchNextPage, isFetching, totalFetched, totalDBRowCount] + [fetchNextPage, isFetching] ); useEffect(() => { diff --git a/packages/features/ee/teams/components/MemberList.tsx b/packages/features/ee/teams/components/MemberList.tsx index f5fdc0cca4..9af2657967 100644 --- a/packages/features/ee/teams/components/MemberList.tsx +++ b/packages/features/ee/teams/components/MemberList.tsx @@ -162,21 +162,22 @@ export default function MemberList(props: Props) { const [state, dispatch] = useReducer(reducer, initialState); const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(""); - const { data, isPending, fetchNextPage, isFetching } = trpc.viewer.teams.listMembers.useInfiniteQuery( - { - limit: 10, - searchTerm: debouncedSearchTerm, - teamId: props.team.id, - }, - { - enabled: !!props.team.id, - getNextPageParam: (lastPage) => lastPage.nextCursor, - placeholderData: keepPreviousData, - refetchOnWindowFocus: true, - refetchOnMount: true, - staleTime: 0, - } - ); + const { data, isPending, hasNextPage, fetchNextPage, isFetching } = + trpc.viewer.teams.listMembers.useInfiniteQuery( + { + limit: 10, + searchTerm: debouncedSearchTerm, + teamId: props.team.id, + }, + { + enabled: !!props.team.id, + getNextPageParam: (lastPage) => lastPage.nextCursor, + placeholderData: keepPreviousData, + refetchOnWindowFocus: true, + refetchOnMount: true, + staleTime: 0, + } + ); // TODO (SEAN): Make Column filters a trpc query param so we can fetch serverside even if the data is not loaded const [columnFilters, setColumnFilters] = useState([]); @@ -633,13 +634,12 @@ export default function MemberList(props: Props) { getRowId: (row) => `${row.id}`, }); - const fetchMoreOnBottomReached = useFetchMoreOnBottomReached( + const fetchMoreOnBottomReached = useFetchMoreOnBottomReached({ tableContainerRef, + hasNextPage, fetchNextPage, isFetching, - totalFetched, - totalDBRowCount - ); + }); const numberOfSelectedRows = table.getSelectedRowModel().rows.length; diff --git a/packages/features/insights/components/RoutingFormResponsesTable.tsx b/packages/features/insights/components/RoutingFormResponsesTable.tsx index 17259e886f..cf4041962e 100644 --- a/packages/features/insights/components/RoutingFormResponsesTable.tsx +++ b/packages/features/insights/components/RoutingFormResponsesTable.tsx @@ -422,13 +422,12 @@ export function RoutingFormResponsesTable({ }, }); - const fetchMoreOnBottomReached = useFetchMoreOnBottomReached( + const fetchMoreOnBottomReached = useFetchMoreOnBottomReached({ tableContainerRef, + hasNextPage, fetchNextPage, isFetching, - totalFetched, - totalDBRowCount - ); + }); if (isHeadersLoading || ((isFetching || isLoading) && !data)) { return ; diff --git a/packages/features/users/components/UserTable/UserListTable.tsx b/packages/features/users/components/UserTable/UserListTable.tsx index ca77ced459..53ed8296c6 100644 --- a/packages/features/users/components/UserTable/UserListTable.tsx +++ b/packages/features/users/components/UserTable/UserListTable.tsx @@ -117,7 +117,7 @@ export function UserListTable() { const columnFilters = useColumnFilters(); - const { data, isPending, fetchNextPage, isFetching } = + const { data, isPending, hasNextPage, fetchNextPage, isFetching } = trpc.viewer.organizations.listMembers.useInfiniteQuery( { limit: 30, @@ -428,13 +428,12 @@ export function UserListTable() { }, }); - const fetchMoreOnBottomReached = useFetchMoreOnBottomReached( + const fetchMoreOnBottomReached = useFetchMoreOnBottomReached({ tableContainerRef, + hasNextPage, fetchNextPage, isFetching, - totalFetched, - totalDBRowCount - ); + }); const numberOfSelectedRows = table.getSelectedRowModel().rows.length;