feat: hide and show peer counter

src/ShellContext.ts

@@ -4,6 +4,7 @@ import { AlertOptions } from 'models/shell'
 
 interface ShellContextProps {
   numberOfPeers: number
+  setDoShowPeers: Dispatch<SetStateAction<boolean>>
   setNumberOfPeers: Dispatch<SetStateAction<number>>
   setTitle: Dispatch<SetStateAction<string>>
   showAlert: (message: string, options?: AlertOptions) => void
@@ -11,6 +12,7 @@ interface ShellContextProps {
 
 export const ShellContext = createContext<ShellContextProps>({
   numberOfPeers: 1,
+  setDoShowPeers: () => {},
   setNumberOfPeers: () => {},
   setTitle: () => {},
   showAlert: () => {},

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<UnsentMessage>(

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<AlertColor>('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) => {
               >
                 <MenuIcon />
               </IconButton>
-              <Typography variant="h6" noWrap component="div">
+              <Typography
+                variant="h6"
+                noWrap
+                component="div"
+                sx={{ marginRight: 'auto' }}
+              >
                 {title}
               </Typography>
-              <Tooltip title="Number of peers in the room">
-                <StepIcon icon={numberOfPeers} sx={{ marginLeft: 'auto' }} />
-              </Tooltip>
+              {doShowPeers ? (
+                <Tooltip title="Number of peers in the room">
+                  <StepIcon icon={numberOfPeers} sx={{ marginLeft: 'auto' }} />
+                </Tooltip>
+              ) : null}
             </Toolbar>
           </AppBar>
           <Drawer