feat: show number of peers in the room

This commit is contained in:
Jeremy Kahn 2022-08-29 22:05:56 -05:00
parent c0b6d4c543
commit caaa59d014
4 changed files with 50 additions and 6 deletions

View File

@ -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 ? (

View File

@ -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,
})

View File

@ -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

View File

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