feat: show number of peers in the room

src/Bootstrap.tsx

@@ -6,6 +6,8 @@ import AppBar from '@mui/material/AppBar'
 import Toolbar from '@mui/material/Toolbar'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
+import StepIcon from '@mui/material/StepIcon'
+import Tooltip from '@mui/material/Tooltip'
 
 import { ShellContext } from 'ShellContext'
 import { Home } from 'pages/Home/'
@@ -29,8 +31,12 @@ function Bootstrap({
   const [settings, setSettings] = useState({ userId: getUuid() })
   const { userId } = settings
   const [title, setTitle] = useState('')
+  const [numberOfPeers, setNumberOfPeers] = useState(1)
 
-  const shellContextValue = useMemo(() => ({ setTitle }), [setTitle])
+  const shellContextValue = useMemo(
+    () => ({ numberOfPeers, setNumberOfPeers, setTitle }),
+    [numberOfPeers, setNumberOfPeers, setTitle]
+  )
 
   useEffect(() => {
     ;(async () => {
@@ -61,8 +67,18 @@ function Bootstrap({
         sx={{ height: '100vh', display: 'flex', flexDirection: 'column' }}
       >
         <AppBar position="relative">
-          <Toolbar variant="regular">
+          <Toolbar
+            variant="regular"
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+            }}
+          >
             <Typography sx={{ fontWeight: 'bold' }}>{title}</Typography>
+            <Tooltip title="Number of peers in the room">
+              <StepIcon icon={numberOfPeers} sx={{ marginLeft: 'auto' }} />
+            </Tooltip>
           </Toolbar>
         </AppBar>
         {hasLoadedSettings ? (

src/ShellContext.ts

@@ -2,8 +2,12 @@ import { createContext, Dispatch, SetStateAction } from 'react'
 
 interface ShellContextProps {
   setTitle: Dispatch<SetStateAction<string>>
+  setNumberOfPeers: Dispatch<SetStateAction<number>>
+  numberOfPeers: number
 }
 
 export const ShellContext = createContext<ShellContextProps>({
   setTitle: () => {},
+  setNumberOfPeers: () => {},
+  numberOfPeers: 1,
 })

src/components/Room/Room.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { v4 as uuid } from 'uuid'
 import Box from '@mui/material/Box'
 import FormControl from '@mui/material/FormControl'
@@ -7,6 +7,7 @@ import TextField from '@mui/material/TextField'
 import Fab from '@mui/material/Fab'
 import ArrowUpward from '@mui/icons-material/ArrowUpward'
 
+import { ShellContext } from 'ShellContext'
 import { usePeerRoom, usePeerRoomAction } from 'hooks/usePeerRoom'
 import { PeerActions } from 'models/network'
 import { UnsentMessage, ReceivedMessage } from 'models/chat'
@@ -25,6 +26,7 @@ export function Room({
   roomId,
   userId,
 }: RoomProps) {
+  const shellContext = useContext(ShellContext)
   const [isMessageSending, setIsMessageSending] = useState(false)
   const [textMessage, setTextMessage] = useState('')
   const [messageLog, setMessageLog] = useState<
@@ -41,6 +43,12 @@ export function Room({
     roomId
   )
 
+  useEffect(() => {
+    peerRoom.onPeersChange((numberOfPeers: number) => {
+      shellContext.setNumberOfPeers(numberOfPeers)
+    })
+  }, [peerRoom, shellContext])
+
   const [sendMessage, receiveMessage] = usePeerRoomAction<UnsentMessage>(
     peerRoom,
     PeerActions.MESSAGE

src/services/PeerRoom/PeerRoom.ts

@@ -5,15 +5,31 @@ export class PeerRoom {
 
   private roomConfig: RoomConfig
 
+  private numberOfPeers: number
+
   constructor(config: RoomConfig, roomId: string) {
     this.roomConfig = config
     this.room = joinRoom(this.roomConfig, roomId)
+    this.numberOfPeers = 1 // Includes this peer
+  }
+
+  onPeersChange = (handlePeersChange: (numberOfPeers: number) => void) => {
+    if (!this.room) return
+
+    this.room.onPeerJoin(() => {
+      this.numberOfPeers++
+      handlePeersChange(this.numberOfPeers)
+    })
+
+    this.room.onPeerLeave(() => {
+      this.numberOfPeers--
+      handlePeersChange(this.numberOfPeers)
+    })
   }
 
   leaveRoom = () => {
-    if (this.room) {
-      this.room.leave()
-    }
+    if (!this.room) return
+    this.room.leave()
   }
 
   makeAction = <T>(namespace: string) => {