refactor: introduced SymmetricGrid

src/Components/MeetingLayout/MeetingLayout.tsx

+import React, { useEffect, useRef, useState } from 'react'
+import { Box } from '@mui/material'
+import { useTheme, type Theme } from '@mui/material/styles'
+import {
+  useLocalCameraTrack,
+  useLocalMicrophoneTrack,
+  useRemoteUsers,
+  usePublish,
+} from 'agora-rtc-react'
+import SymmetricGrid from '../SymmetricGrid/SymmetricGrid'
+
+const MeetingLayout = () => {
+  const theme: Theme = useTheme()
+
+  const { localCameraTrack } = useLocalCameraTrack()
+  const { localMicrophoneTrack } = useLocalMicrophoneTrack()
+  usePublish([localMicrophoneTrack, localCameraTrack])
+  const remoteUsers = useRemoteUsers()
+
+  const gridContainerRef = useRef<HTMLDivElement>(null)
+  const [gridContainerHeight, setGridContainerHeight] = useState(0)
+
+  const [totalUsers, setTotalUsers] = useState(20)
+
+  useEffect(() => {
+    setTotalUsers(remoteUsers.length + 1)
+  }, [remoteUsers])
+
+  useEffect(() => {
+    if (gridContainerRef.current) {
+      setGridContainerHeight(gridContainerRef.current.offsetHeight)
+    }
+  }, [gridContainerRef?.current?.offsetHeight])
+
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        height: '80%',
+        backgroundColor: theme.palette.background.default,
+        padding: '30px',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'row',
+          width: '100%',
+          height: '100%',
+        }}
+        ref={gridContainerRef}
+      >
+        <SymmetricGrid
+          totalUsers={totalUsers}
+          setTotalUsers={setTotalUsers}
+          gridContainerHeight={gridContainerHeight}
+          setGridContainerHeight={setGridContainerHeight}
+        />
+      </Box>
+    </Box>
+  )
+}
+
+export default MeetingLayout

src/Components/MeetingGrid/MeetingGrid.tsx → src/Components/SymmetricGrid/SymmetricGrid.tsx

-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Box, Grid } from '@mui/material'
-import { useTheme, type Theme } from '@mui/material/styles'
 import useMediaQuery from '@mui/material/useMediaQuery'
-import {
-  LocalVideoTrack,
-  RemoteUser,
-  useLocalCameraTrack,
-  useLocalMicrophoneTrack,
-  useRemoteUsers,
-  usePublish,
-} from 'agora-rtc-react'
+import { LocalVideoTrack, RemoteUser, useLocalCameraTrack, useRemoteUsers } from 'agora-rtc-react'
+import { useTheme, type Theme } from '@mui/material/styles'
 
-const MeetingGrid = () => {
+interface Props {
+  totalUsers: number
+  setTotalUsers: (value: number) => void
+  gridContainerHeight: number
+  setGridContainerHeight: (value: number) => void
+}
+
+const SymmetricGrid = ({
+  totalUsers,
+  setTotalUsers,
+  gridContainerHeight,
+  setGridContainerHeight,
+}: Props) => {
   const theme: Theme = useTheme()
   const isSm = useMediaQuery(theme.breakpoints.up('sm'))
   const isMd = useMediaQuery(theme.breakpoints.up('md'))
   const isLg = useMediaQuery(theme.breakpoints.up('lg'))
 
   const { localCameraTrack } = useLocalCameraTrack()
-  const { localMicrophoneTrack } = useLocalMicrophoneTrack()
-  usePublish([localMicrophoneTrack, localCameraTrack])
   const remoteUsers = useRemoteUsers()
 
-  const gridContainerRef = useRef<HTMLDivElement>(null)
-  const [gridContainerHeight, setGridContainerHeight] = useState(0)
-
-  const [totalUsers, setTotalUsers] = useState(20)
   const [itemOffset, setItemOffset] = useState(12)
   const [itemHeight, setItemHeight] = useState(230)
   const [numOfItems, setNumOfItems] = useState(1)
@@ -40,12 +39,6 @@ const MeetingGrid = () => {
     setNumOfItems(totalUsers > maxUsersDisplay ? maxUsersDisplay : totalUsers)
   }, [totalUsers])
 
-  useEffect(() => {
-    if (gridContainerRef.current) {
-      setGridContainerHeight(gridContainerRef.current.offsetHeight)
-    }
-  }, [gridContainerRef?.current?.offsetHeight])
-
   useEffect(() => {
     switch (numOfItems) {
       case 1:
@@ -132,77 +125,45 @@ const MeetingGrid = () => {
     }
   }, [totalUsers, isSm, isMd, isLg, gridContainerHeight, numOfItems])
 
-  //   const onUserPublish = async (user: IAgoraRTCRemoteUser, mediaType: 'video' | 'audio') => {
-  //     if (mediaType === 'video') {
-  //       const remoteTrack = await agoraEngine.subscribe(user, mediaType)
-  //       remoteTrack.play('remote-video')
-  //     }
-  //     if (mediaType === 'audio') {
-  //       const remoteTrack = await agoraEngine.subscribe(user, mediaType)
-  //       remoteTrack.play()
-  //     }
-  //   }
-
   return (
-    <Box
-      sx={{
-        width: '100%',
-        height: '80%',
-        backgroundColor: theme.palette.background.default,
-        padding: '30px',
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'row',
-          width: '100%',
-          height: '100%',
-        }}
-        ref={gridContainerRef}
-      >
-        <Box sx={{ display: 'flex', width: '100%' }}>
-          <Grid container spacing={3} width={'100%'} padding={0}>
-            <Grid item xs={itemOffset}>
-              <Box
-                sx={{
-                  backgroundColor: '#262625',
-                  height: `${itemHeight}px`,
-                  borderRadius: '15px',
-                }}
-              >
-                <LocalVideoTrack
-                  track={localCameraTrack}
-                  play={true}
-                  style={{ width: '100%', height: '100%', borderRadius: '20%' }}
-                />
-              </Box>
-            </Grid>
-            {remoteUsers.map((remoteUser, index) => (
-              <Grid item xs={itemOffset} key={index}>
-                <Box
-                  sx={{
-                    backgroundColor: '#262625',
-                    height: `${itemHeight}px`,
-                    borderRadius: '15px',
-                  }}
-                >
-                  <RemoteUser
-                    user={remoteUser}
-                    playVideo={true}
-                    playAudio={true}
-                    style={{ width: '100%', height: '100%', borderRadius: '15px' }}
-                  />
-                </Box>
-              </Grid>
-            ))}
+    <Box sx={{ display: 'flex', width: '100%' }}>
+      <Grid container spacing={3} width={'100%'} padding={0}>
+        <Grid item xs={itemOffset}>
+          <Box
+            sx={{
+              backgroundColor: '#262625',
+              height: `${itemHeight}px`,
+              borderRadius: '15px',
+            }}
+          >
+            <LocalVideoTrack
+              track={localCameraTrack}
+              play={true}
+              style={{ width: '100%', height: '100%', borderRadius: '20%' }}
+            />
+          </Box>
+        </Grid>
+        {remoteUsers.map((remoteUser, index) => (
+          <Grid item xs={itemOffset} key={index}>
+            <Box
+              sx={{
+                backgroundColor: '#262625',
+                height: `${itemHeight}px`,
+                borderRadius: '15px',
+              }}
+            >
+              <RemoteUser
+                user={remoteUser}
+                playVideo={true}
+                playAudio={true}
+                style={{ width: '100%', height: '100%', borderRadius: '15px' }}
+              />
+            </Box>
           </Grid>
-        </Box>
-      </Box>
+        ))}
+      </Grid>
     </Box>
   )
 }
 
-export default MeetingGrid
+export default SymmetricGrid

src/Services/AgoraManager/AgoraManager.tsx

@@ -5,7 +5,7 @@ import type { IMicrophoneAudioTrack, ICameraVideoTrack } from 'agora-rtc-sdk-ng'
 import { Box } from '@mui/material'
 import { useTheme, type Theme } from '@mui/material/styles'
 import MeetingLoading from '../../Components/MeetingLoading/MeetingLoading'
-import MeetingGrid from '../../Components/MeetingGrid/MeetingGrid'
+import MeetingGrid from '../../Components/MeetingLayout/MeetingLayout'
 
 interface AgoraContextType {
   localCameraTrack: ICameraVideoTrack | null