From 90e60c5a01224aa4e2f7ae432ff796df138c87a1 Mon Sep 17 00:00:00 2001
From: raviteja83 <ravi.theja@100ms.live>
Date: Mon, 9 Oct 2023 12:43:32 +0530
Subject: [PATCH] feat: add hasNext to paginated participants

---
 packages/react-sdk/src/hooks/usePaginatedParticipants.ts     | 2 ++
 .../src/Prebuilt/components/Footer/PaginatedParticipants.tsx | 5 ++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/react-sdk/src/hooks/usePaginatedParticipants.ts b/packages/react-sdk/src/hooks/usePaginatedParticipants.ts
index cdcbc6fae3..9da090035d 100644
--- a/packages/react-sdk/src/hooks/usePaginatedParticipants.ts
+++ b/packages/react-sdk/src/hooks/usePaginatedParticipants.ts
@@ -11,6 +11,7 @@ export interface usePaginatedParticipantsResult {
    * this function is to be called when loadPeers is called atleast once. This will fetch the next batch of peers
    */
   loadMorePeers: Promise<void>;
+  hasNext: () => boolean;
   // list of peers loaded
   peers: HMSPeer[];
   // total number of peers matching the input options at the time of the request
@@ -48,6 +49,7 @@ export const usePaginatedParticipants = (options: HMSPeerListIteratorOptions) =>
         });
         setTotal(iterator.current.getTotal());
       }),
+    hasNext: () => iterator.current.hasNext(),
     total,
     peers: Object.values(peers),
   };
diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/PaginatedParticipants.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/PaginatedParticipants.tsx
index 32d7fb1141..e42806719a 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Footer/PaginatedParticipants.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Footer/PaginatedParticipants.tsx
@@ -68,14 +68,13 @@ const VirtualizedParticipantItem = React.memo(
 );
 
 export const PaginatedParticipants = ({ roleName, onBack }: { roleName: string; onBack: () => void }) => {
-  const { peers, total, loadPeers, loadMorePeers } = usePaginatedParticipants({ role: roleName, limit: 20 });
+  const { peers, total, hasNext, loadPeers, loadMorePeers } = usePaginatedParticipants({ role: roleName, limit: 20 });
   const [search, setSearch] = useState<string>('');
   const filteredPeers = peers.filter(p => p.name?.toLowerCase().includes(search));
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const [ref, { width }] = useMeasure<HTMLDivElement>();
   const height = ROW_HEIGHT * (filteredPeers.length + 1);
   const resetSidePane = useSidepaneReset();
-  const hasNext = total > peers.length;
 
   useEffect(() => {
     loadPeers();
@@ -111,7 +110,7 @@ export const PaginatedParticipants = ({ roleName, onBack }: { roleName: string;
         <Box css={{ flex: '1 1 0', overflowY: 'auto', overflowX: 'hidden', mr: '-$10' }}>
           <VariableSizeList
             itemSize={index => (index === filteredPeers.length + 1 ? 16 : ROW_HEIGHT)}
-            itemData={{ peerList: filteredPeers, hasNext, loadMorePeers, isConnected: isConnected === true }}
+            itemData={{ peerList: filteredPeers, hasNext: hasNext(), loadMorePeers, isConnected: isConnected === true }}
             itemKey={itemKey}
             itemCount={filteredPeers.length + 1}
             width={width}