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,37 +125,7 @@ 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}>
@@ -200,9 +163,7 @@ const MeetingGrid = () => {
         ))}
       </Grid>
     </Box>
-      </Box>
-    </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