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) => {