From 899286369ef88b88b69f8b9fe74612c306dc14a8 Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Thu, 1 Sep 2022 21:28:45 -0500
Subject: [PATCH] feat: hide and show peer counter

---
 src/ShellContext.ts            |  2 ++
 src/components/Room/Room.tsx   |  6 ++++++
 src/components/Shell/Shell.tsx | 26 ++++++++++++++++++++------
 3 files changed, 28 insertions(+), 6 deletions(-)

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<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: () => {},
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<UnsentMessage>(
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<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