diff --git a/src/ShellContext.ts b/src/ShellContext.ts index b773386..682369a 100644 --- a/src/ShellContext.ts +++ b/src/ShellContext.ts @@ -4,6 +4,7 @@ import { AlertOptions } from 'models/shell' interface ShellContextProps { numberOfPeers: number + setDoShowPeers: Dispatch> setNumberOfPeers: Dispatch> setTitle: Dispatch> showAlert: (message: string, options?: AlertOptions) => void @@ -11,6 +12,7 @@ interface ShellContextProps { export const ShellContext = createContext({ numberOfPeers: 1, + setDoShowPeers: () => {}, setNumberOfPeers: () => {}, setTitle: () => {}, showAlert: () => {}, diff --git a/src/components/Room/Room.tsx b/src/components/Room/Room.tsx index eea925b..5089ad4 100644 --- a/src/components/Room/Room.tsx +++ b/src/components/Room/Room.tsx @@ -67,6 +67,8 @@ export function Room({ ) useEffect(() => { + shellContext.setDoShowPeers(true) + peerRoom.onPeerJoin(() => { shellContext.showAlert(`Someone has joined the room`, { severity: 'success', @@ -86,6 +88,10 @@ export function Room({ setNumberOfPeers(newNumberOfPeers) shellContext.setNumberOfPeers(newNumberOfPeers) }) + + return () => { + shellContext.setDoShowPeers(false) + } }, [numberOfPeers, peerRoom, shellContext]) const [sendMessage, receiveMessage] = usePeerRoomAction( diff --git a/src/components/Shell/Shell.tsx b/src/components/Shell/Shell.tsx index db08ffa..b282d26 100644 --- a/src/components/Shell/Shell.tsx +++ b/src/components/Shell/Shell.tsx @@ -105,6 +105,7 @@ export const Shell = ({ children }: ShellProps) => { const theme = useTheme() const [isAlertShowing, setIsAlertShowing] = useState(false) const [isDrawerOpen, setIsDrawerOpen] = useState(false) + const [doShowPeers, setDoShowPeers] = useState(false) const [alertSeverity, setAlertSeverity] = useState('info') const [title, setTitle] = useState('') const [alertText, setAlertText] = useState('') @@ -119,8 +120,14 @@ export const Shell = ({ children }: ShellProps) => { }, []) const shellContextValue = useMemo( - () => ({ numberOfPeers, setNumberOfPeers, setTitle, showAlert }), - [numberOfPeers, setNumberOfPeers, setTitle, showAlert] + () => ({ + numberOfPeers, + setDoShowPeers, + setNumberOfPeers, + setTitle, + showAlert, + }), + [numberOfPeers, setDoShowPeers, setNumberOfPeers, setTitle, showAlert] ) const handleAlertClose = ( @@ -191,12 +198,19 @@ export const Shell = ({ children }: ShellProps) => { > - + {title} - - - + {doShowPeers ? ( + + + + ) : null}