From 49e337e9648e02965b73d540862a1977badb322d Mon Sep 17 00:00:00 2001
From: raviteja83 <ravi.theja@100ms.live>
Date: Wed, 4 Oct 2023 11:22:07 +0530
Subject: [PATCH] refactor: simplify component

---
 .../Footer/PaginatedParticipants.tsx          | 20 ++++---------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/packages/roomkit-react/src/Prebuilt/components/Footer/PaginatedParticipants.tsx b/packages/roomkit-react/src/Prebuilt/components/Footer/PaginatedParticipants.tsx
index 3d36d27fde..32d7fb1141 100644
--- a/packages/roomkit-react/src/Prebuilt/components/Footer/PaginatedParticipants.tsx
+++ b/packages/roomkit-react/src/Prebuilt/components/Footer/PaginatedParticipants.tsx
@@ -47,18 +47,14 @@ const VirtualizedParticipantItem = React.memo(
   ({
     index,
     data,
-    hasNext,
-    loadMore,
     style,
   }: {
     index: number;
-    data: ItemData;
-    hasNext: boolean;
-    loadMore: () => Promise<void>;
+    data: ItemData & { hasNext: boolean; loadMorePeers: () => Promise<void> };
     style: React.CSSProperties;
   }) => {
     if (!data.peerList[index]) {
-      return <LoadMoreParticipants hasNext={hasNext} loadMore={loadMore} style={style} />;
+      return <LoadMoreParticipants hasNext={data.hasNext} loadMore={data.loadMorePeers} style={style} />;
     }
     return (
       <Participant
@@ -115,21 +111,13 @@ 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, isConnected: isConnected === true }}
+            itemData={{ peerList: filteredPeers, hasNext, loadMorePeers, isConnected: isConnected === true }}
             itemKey={itemKey}
             itemCount={filteredPeers.length + 1}
             width={width}
             height={height}
           >
-            {({ index, data, style }) => (
-              <VirtualizedParticipantItem
-                index={index}
-                data={data}
-                style={style}
-                hasNext={hasNext}
-                loadMore={loadMorePeers}
-              />
-            )}
+            {VirtualizedParticipantItem}
           </VariableSizeList>
         </Box>
       </Flex>