diff --git a/src/Bootstrap.tsx b/src/Bootstrap.tsx
index 4946466..d253faa 100644
--- a/src/Bootstrap.tsx
+++ b/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' }}
>
-
+
{title}
+
+
+
{hasLoadedSettings ? (
diff --git a/src/ShellContext.ts b/src/ShellContext.ts
index 21966cb..07298a4 100644
--- a/src/ShellContext.ts
+++ b/src/ShellContext.ts
@@ -2,8 +2,12 @@ import { createContext, Dispatch, SetStateAction } from 'react'
interface ShellContextProps {
setTitle: Dispatch>
+ setNumberOfPeers: Dispatch>
+ numberOfPeers: number
}
export const ShellContext = createContext({
setTitle: () => {},
+ setNumberOfPeers: () => {},
+ numberOfPeers: 1,
})
diff --git a/src/components/Room/Room.tsx b/src/components/Room/Room.tsx
index f22ef4a..f50c923 100644
--- a/src/components/Room/Room.tsx
+++ b/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(
peerRoom,
PeerActions.MESSAGE
diff --git a/src/services/PeerRoom/PeerRoom.ts b/src/services/PeerRoom/PeerRoom.ts
index 8767f40..4633ac0 100644
--- a/src/services/PeerRoom/PeerRoom.ts
+++ b/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 = (namespace: string) => {