From dfd41319592c81de6c15c374e8f916b014b3f8b1 Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Thu, 12 Oct 2023 09:03:38 -0500
Subject: [PATCH] refactor(shell): move MuiDrawer out of PeerList

---
 src/components/Shell/PeerList.tsx | 23 ++---------------
 src/components/Shell/Shell.tsx    | 42 ++++++++++++++++++++++---------
 2 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/src/components/Shell/PeerList.tsx b/src/components/Shell/PeerList.tsx
index 3909a9a..badc986 100644
--- a/src/components/Shell/PeerList.tsx
+++ b/src/components/Shell/PeerList.tsx
@@ -1,6 +1,5 @@
 import { PropsWithChildren } from 'react'
 import { Route, Routes } from 'react-router-dom'
-import MuiDrawer from '@mui/material/Drawer'
 import List from '@mui/material/List'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemText from '@mui/material/ListItemText'
@@ -28,7 +27,6 @@ export const peerListWidth = 300
 export interface PeerListProps extends PropsWithChildren {
   userId: string
   roomId: string | undefined
-  isPeerListOpen: boolean
   onPeerListClose: () => void
   peerList: Peer[]
   peerConnectionTypes: Record<string, PeerConnectionType>
@@ -40,7 +38,6 @@ export interface PeerListProps extends PropsWithChildren {
 export const PeerList = ({
   userId,
   roomId,
-  isPeerListOpen,
   onPeerListClose,
   peerList,
   peerConnectionTypes,
@@ -49,23 +46,7 @@ export const PeerList = ({
   connectionTestResults,
 }: PeerListProps) => {
   return (
-    <MuiDrawer
-      sx={{
-        flexShrink: 0,
-        pointerEvents: 'none',
-        width: peerListWidth,
-        '& .MuiDrawer-paper': {
-          width: peerListWidth,
-          boxSizing: 'border-box',
-        },
-        ...(isPeerListOpen && {
-          pointerEvents: 'auto',
-        }),
-      }}
-      variant="persistent"
-      anchor="right"
-      open={isPeerListOpen}
-    >
+    <>
       <PeerListHeader>
         <IconButton onClick={onPeerListClose} aria-label="Close peer list">
           <ChevronRightIcon />
@@ -132,6 +113,6 @@ export const PeerList = ({
           </>
         ) : null}
       </List>
-    </MuiDrawer>
+    </>
   )
 }
diff --git a/src/components/Shell/Shell.tsx b/src/components/Shell/Shell.tsx
index 7afd598..8876db3 100644
--- a/src/components/Shell/Shell.tsx
+++ b/src/components/Shell/Shell.tsx
@@ -11,6 +11,7 @@ import CssBaseline from '@mui/material/CssBaseline'
 import { ThemeProvider, createTheme } from '@mui/material/styles'
 import Box from '@mui/material/Box'
 import { AlertColor } from '@mui/material/Alert'
+import MuiDrawer from '@mui/material/Drawer'
 import { useWindowSize } from '@react-hook/window-size'
 
 import { ShellContext } from 'contexts/ShellContext'
@@ -26,7 +27,7 @@ import { UpgradeDialog } from './UpgradeDialog'
 import { ShellAppBar } from './ShellAppBar'
 import { NotificationArea } from './NotificationArea'
 import { RouteContent } from './RouteContent'
-import { PeerList } from './PeerList'
+import { PeerList, peerListWidth } from './PeerList'
 import { QRCodeDialog } from './QRCodeDialog'
 import { RoomShareDialog } from './RoomShareDialog'
 import { useConnectionTest } from './useConnectionTest'
@@ -366,17 +367,34 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
               >
                 <ErrorBoundary>{children}</ErrorBoundary>
               </RouteContent>
-              <PeerList
-                userId={userPeerId}
-                roomId={roomId}
-                isPeerListOpen={isPeerListOpen}
-                onPeerListClose={handlePeerListClick}
-                peerList={peerList}
-                peerConnectionTypes={peerConnectionTypes}
-                audioState={audioState}
-                peerAudios={peerAudios}
-                connectionTestResults={connectionTestResults}
-              />
+              <MuiDrawer
+                sx={{
+                  flexShrink: 0,
+                  pointerEvents: 'none',
+                  width: peerListWidth,
+                  '& .MuiDrawer-paper': {
+                    width: peerListWidth,
+                    boxSizing: 'border-box',
+                  },
+                  ...(isPeerListOpen && {
+                    pointerEvents: 'auto',
+                  }),
+                }}
+                variant="persistent"
+                anchor="right"
+                open={isPeerListOpen}
+              >
+                <PeerList
+                  userId={userPeerId}
+                  roomId={roomId}
+                  onPeerListClose={handlePeerListClick}
+                  peerList={peerList}
+                  peerConnectionTypes={peerConnectionTypes}
+                  audioState={audioState}
+                  peerAudios={peerAudios}
+                  connectionTestResults={connectionTestResults}
+                />
+              </MuiDrawer>
               <QRCodeDialog
                 isOpen={isQRCodeDialogOpen}
                 handleClose={handleQRCodeDialogClose}