feat: don't automatically close sidebars

2023-03-15 09:48:35 -05:00 · 2023-03-15 09:48:35 -05:00 · d6f9b10ce2
commit d6f9b10ce2
parent 446ca466c7
5 changed files with 61 additions and 113 deletions
--- a/src/components/Room/useRoom.ts
+++ b/src/components/Room/useRoom.ts
@ -54,14 +54,12 @@ export function useRoom(
  const {
    numberOfPeers,
    setNumberOfPeers,
-    setDoShowPeers,
    peerList,
    setPeerList,
    tabHasFocus,
    showAlert,
    setRoomId,
    setPassword,
-    setIsPeerListOpen,
    customUsername,
  } = useContext(ShellContext)

@ -157,9 +155,9 @@ export function useRoom(
  useEffect(() => {
    return () => {
      peerRoom.leaveRoom()
-      setIsPeerListOpen(false)
+      setPeerList([])
    }
-  }, [peerRoom, setIsPeerListOpen])
+  }, [peerRoom, setPeerList])

  useEffect(() => {
    setPassword(password)
@ -177,14 +175,6 @@ export function useRoom(
    }
  }, [roomId, setRoomId])

-  useEffect(() => {
-    setDoShowPeers(true)
-
-    return () => {
-      setDoShowPeers(false)
-    }
-  }, [setDoShowPeers])
-
  useEffect(() => {
    if (isShowingMessages) setUnreadMessages(0)
  }, [isShowingMessages, setUnreadMessages])
--- a/src/components/Shell/Drawer.tsx
+++ b/src/components/Shell/Drawer.tsx
@ -32,23 +32,11 @@ export const drawerWidth = 240

 export interface DrawerProps extends PropsWithChildren {
  isDrawerOpen: boolean
-  onAboutLinkClick: () => void
-  onDisclaimerClick: () => void
  onDrawerClose: () => void
-  onHomeLinkClick: () => void
-  onSettingsLinkClick: () => void
  theme: Theme
 }

-export const Drawer = ({
-  isDrawerOpen,
-  onAboutLinkClick,
-  onDisclaimerClick,
-  onDrawerClose,
-  onHomeLinkClick,
-  onSettingsLinkClick,
-  theme,
-}: DrawerProps) => {
+export const Drawer = ({ isDrawerOpen, onDrawerClose, theme }: DrawerProps) => {
  const settingsContext = useContext(SettingsContext)
  const colorMode = settingsContext.getUserSettings().colorMode

@ -82,7 +70,7 @@ export const Drawer = ({
      </DrawerHeader>
      <Divider />
      <List role="navigation">
-        <Link to={routes.ROOT} onClick={onHomeLinkClick}>
+        <Link to={routes.ROOT}>
          <ListItem disablePadding>
            <ListItemButton>
              <ListItemIcon>
@ -92,7 +80,7 @@ export const Drawer = ({
            </ListItemButton>
          </ListItem>
        </Link>
-        <Link to={routes.SETTINGS} onClick={onSettingsLinkClick}>
+        <Link to={routes.SETTINGS}>
          <ListItem disablePadding>
            <ListItemButton>
              <ListItemIcon>
@ -102,7 +90,7 @@ export const Drawer = ({
            </ListItemButton>
          </ListItem>
        </Link>
-        <Link to={routes.ABOUT} onClick={onAboutLinkClick}>
+        <Link to={routes.ABOUT}>
          <ListItem disablePadding>
            <ListItemButton>
              <ListItemIcon>
@ -112,7 +100,7 @@ export const Drawer = ({
            </ListItemButton>
          </ListItem>
        </Link>
-        <Link to={routes.DISCLAIMER} onClick={onDisclaimerClick}>
+        <Link to={routes.DISCLAIMER}>
          <ListItem disablePadding>
            <ListItemButton>
              <ListItemIcon>
--- a/src/components/Shell/Shell.tsx
+++ b/src/components/Shell/Shell.tsx
@ -55,7 +55,6 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
  const [isDrawerOpen, setIsDrawerOpen] = useState(defaultSidebarsOpen)
  const [isQRCodeDialogOpen, setIsQRCodeDialogOpen] = useState(false)
  const [isRoomShareDialogOpen, setIsRoomShareDialogOpen] = useState(false)
-  const [doShowPeers, setDoShowPeers] = useState(false)
  const [alertSeverity, setAlertSeverity] = useState<AlertColor>('info')
  const [showAppBar, setShowAppBar] = useState(true)
  const [showRoomControls, setShowRoomControls] = useState(true)
@ -66,7 +65,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
  const [roomId, setRoomId] = useState<string | undefined>(undefined)
  const [password, setPassword] = useState<string | undefined>(undefined)
  const [isPeerListOpen, setIsPeerListOpen] = useState(defaultSidebarsOpen)
-  const [peerList, setPeerList] = useState<Peer[]>([]) // except you
+  const [peerList, setPeerList] = useState<Peer[]>([]) // except self
  const [tabHasFocus, setTabHasFocus] = useState(true)
  const [audioState, setAudioState] = useState<AudioState>(AudioState.STOPPED)
  const [videoState, setVideoState] = useState<VideoState>(VideoState.STOPPED)
@ -91,7 +90,6 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
    () => ({
      numberOfPeers,
      tabHasFocus,
-      setDoShowPeers,
      setNumberOfPeers,
      showRoomControls,
      setShowRoomControls,
@ -127,7 +125,6 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
      numberOfPeers,
      peerList,
      tabHasFocus,
-      setDoShowPeers,
      setNumberOfPeers,
      showRoomControls,
      setShowRoomControls,
@ -242,6 +239,10 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
    setIsDrawerOpen(true)
  }

+  const handleDrawerClose = () => {
+    setIsDrawerOpen(false)
+  }
+
  const handlePeerListClick = () => {
    setIsPeerListOpen(!isPeerListOpen)
  }
@ -263,26 +264,6 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
    }
  }

-  const handleDrawerClose = () => {
-    setIsDrawerOpen(false)
-  }
-
-  const handleHomeLinkClick = () => {
-    setIsDrawerOpen(false)
-  }
-
-  const handleAboutLinkClick = () => {
-    setIsDrawerOpen(false)
-  }
-
-  const handleDisclaimerLinkClick = () => {
-    setIsDrawerOpen(false)
-  }
-
-  const handleSettingsLinkClick = () => {
-    setIsDrawerOpen(false)
-  }
-
  const handleQRCodeDialogClose = () => {
    setIsQRCodeDialogOpen(false)
  }
@ -310,12 +291,10 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
            onAlertClose={handleAlertClose}
          />
          <ShellAppBar
-            doShowPeers={doShowPeers}
            onDrawerOpen={handleDrawerOpen}
            onLinkButtonClick={handleLinkButtonClick}
            isDrawerOpen={isDrawerOpen}
            isPeerListOpen={isPeerListOpen}
-            numberOfPeers={numberOfPeers}
            title={title}
            onPeerListClick={handlePeerListClick}
            onRoomControlsClick={() => setShowRoomControls(!showRoomControls)}
@ -326,11 +305,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
          />
          <Drawer
            isDrawerOpen={isDrawerOpen}
-            onAboutLinkClick={handleAboutLinkClick}
-            onDisclaimerClick={handleDisclaimerLinkClick}
            onDrawerClose={handleDrawerClose}
-            onHomeLinkClick={handleHomeLinkClick}
-            onSettingsLinkClick={handleSettingsLinkClick}
            theme={theme}
          />
          <RouteContent
--- a/src/components/Shell/ShellAppBar.tsx
+++ b/src/components/Shell/ShellAppBar.tsx
@ -18,6 +18,10 @@ import Menu from '@mui/icons-material/Menu'
 import QrCode2 from '@mui/icons-material/QrCode2'
 import RoomPreferences from '@mui/icons-material/RoomPreferences'

+import { useContext } from 'react'
+
+import { ShellContext } from 'contexts/ShellContext'
+
 import { drawerWidth } from './Drawer'
 import { peerListWidth } from './PeerList'

@ -55,12 +59,10 @@ export const AppBar = styled(MuiAppBar, {
 }))

 interface ShellAppBarProps {
-  doShowPeers: boolean
  onDrawerOpen: () => void
  onLinkButtonClick: () => Promise<void>
  isDrawerOpen: boolean
  isPeerListOpen: boolean
-  numberOfPeers: number
  title: string
  onPeerListClick: () => void
  onRoomControlsClick: () => void
@ -71,13 +73,11 @@ interface ShellAppBarProps {
 }

 export const ShellAppBar = ({
-  doShowPeers,
  onDrawerOpen,
  onLinkButtonClick,
  isDrawerOpen,
  isPeerListOpen,
  setIsQRCodeDialogOpen,
-  numberOfPeers,
  title,
  onPeerListClick,
  onRoomControlsClick,
@ -85,6 +85,7 @@ export const ShellAppBar = ({
  isFullscreen,
  setIsFullscreen,
 }: ShellAppBarProps) => {
+  const { peerList } = useContext(ShellContext)
  const handleQRCodeClick = () => setIsQRCodeDialogOpen(true)
  const onClickFullscreen = () => setIsFullscreen(!isFullscreen)
  return (
@ -131,54 +132,50 @@ export const ShellAppBar = ({
                <Link />
              </IconButton>
            </Tooltip>
-            {doShowPeers ? (
-              <>
-                <Tooltip title="Show QR Code">
-                  <IconButton
-                    size="large"
-                    color="inherit"
-                    aria-label="Show QR Code"
-                    onClick={handleQRCodeClick}
-                  >
-                    <QrCode2 />
-                  </IconButton>
-                </Tooltip>
-                <Tooltip title="Show Room Controls">
-                  <IconButton
-                    size="large"
-                    color="inherit"
-                    aria-label="show room controls"
-                    onClick={onRoomControlsClick}
-                  >
-                    <RoomPreferences />
-                  </IconButton>
-                </Tooltip>
-                <Tooltip
-                  title={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
-                >
-                  <IconButton
-                    size="large"
-                    edge="end"
-                    color="inherit"
-                    aria-label="fullscreen"
-                    onClick={onClickFullscreen}
-                  >
-                    {isFullscreen ? <FullscreenExit /> : <Fullscreen />}
-                  </IconButton>
-                </Tooltip>
-                <Tooltip title="Click to show peer list">
-                  <IconButton
-                    size="large"
-                    edge="end"
-                    color="inherit"
-                    aria-label="Peer list"
-                    onClick={onPeerListClick}
-                  >
-                    <StepIcon icon={numberOfPeers} />
-                  </IconButton>
-                </Tooltip>
-              </>
-            ) : null}
+            <Tooltip title="Show QR Code">
+              <IconButton
+                size="large"
+                color="inherit"
+                aria-label="Show QR Code"
+                onClick={handleQRCodeClick}
+              >
+                <QrCode2 />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Show Room Controls">
+              <IconButton
+                size="large"
+                color="inherit"
+                aria-label="show room controls"
+                onClick={onRoomControlsClick}
+              >
+                <RoomPreferences />
+              </IconButton>
+            </Tooltip>
+            <Tooltip
+              title={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
+            >
+              <IconButton
+                size="large"
+                edge="end"
+                color="inherit"
+                aria-label="fullscreen"
+                onClick={onClickFullscreen}
+              >
+                {isFullscreen ? <FullscreenExit /> : <Fullscreen />}
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="Click to show peer list">
+              <IconButton
+                size="large"
+                edge="end"
+                color="inherit"
+                aria-label="Peer list"
+                onClick={onPeerListClick}
+              >
+                <StepIcon icon={peerList.length + 1} />
+              </IconButton>
+            </Tooltip>
          </Toolbar>
        </AppBar>
      </Slide>
--- a/src/contexts/ShellContext.ts
+++ b/src/contexts/ShellContext.ts
@ -6,7 +6,6 @@ import { AudioState, ScreenShareState, VideoState, Peer } from 'models/chat'
 interface ShellContextProps {
  numberOfPeers: number
  tabHasFocus: boolean
-  setDoShowPeers: Dispatch<SetStateAction<boolean>>
  setNumberOfPeers: Dispatch<SetStateAction<number>>
  showRoomControls: boolean
  setShowRoomControls: Dispatch<SetStateAction<boolean>>
@ -35,7 +34,6 @@ interface ShellContextProps {
 export const ShellContext = createContext<ShellContextProps>({
  numberOfPeers: 1,
  tabHasFocus: true,
-  setDoShowPeers: () => {},
  setNumberOfPeers: () => {},
  showRoomControls: false,
  setShowRoomControls: () => {},