refactor(shell): move more logic to PeerListHeader

src/components/Shell/PeerList.tsx

@@ -1,26 +1,21 @@
 import { PropsWithChildren } from 'react'
-import { Route, Routes } from 'react-router-dom'
 import List from '@mui/material/List'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemText from '@mui/material/ListItemText'
 import Divider from '@mui/material/Divider'
-import IconButton from '@mui/material/IconButton'
-import ChevronRightIcon from '@mui/icons-material/ChevronRight'
 import VolumeUp from '@mui/icons-material/VolumeUp'
 import ListItem from '@mui/material/ListItem'
 import Box from '@mui/material/Box'
 import CircularProgress from '@mui/material/CircularProgress'
 
-import { PeerListHeader } from 'components/Shell/PeerListHeader'
 import { Username } from 'components/Username/Username'
 import { AudioState, Peer } from 'models/chat'
 import { PeerConnectionType } from 'services/PeerRoom/PeerRoom'
 import { TrackerConnection } from 'services/ConnectionTest/ConnectionTest'
-import { routes } from 'config/routes'
 
+import { PeerListHeader } from './PeerListHeader'
 import { PeerListItem } from './PeerListItem'
 import { ConnectionTestResults as IConnectionTestResults } from './useConnectionTest'
-import { ConnectionTestResults } from './ConnectionTestResults'
 
 export const peerListWidth = 300
 
@@ -47,31 +42,10 @@ export const PeerList = ({
 }: PeerListProps) => {
   return (
     <>
-      <PeerListHeader>
+      <PeerListHeader
-        <IconButton onClick={onPeerListClose} aria-label="Close peer list">
+        onPeerListClose={onPeerListClose}
-          <ChevronRightIcon />
-        </IconButton>
-        <ListItem>
-          <Routes>
-            {/*
-            This stub route is needed to silence spurious warnings in the tests.
-            */}
-            <Route path={routes.ROOT} element={<></>}></Route>
-
-            {[routes.PUBLIC_ROOM, routes.PRIVATE_ROOM].map(route => (
-              <Route
-                key={route}
-                path={route}
-                element={
-                  <ConnectionTestResults
         connectionTestResults={connectionTestResults}
       />
-                }
-              />
-            ))}
-          </Routes>
-        </ListItem>
-      </PeerListHeader>
       <Divider />
       <List>
         <Divider />

src/components/Shell/PeerListHeader.tsx

@@ -1,6 +1,15 @@
+import { Route, Routes } from 'react-router-dom'
 import { styled } from '@mui/material/styles'
+import IconButton from '@mui/material/IconButton'
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
+import ListItem from '@mui/material/ListItem'
 
-export const PeerListHeader = styled('div')(({ theme }) => ({
+import { routes } from 'config/routes'
+
+import { ConnectionTestResults as IConnectionTestResults } from './useConnectionTest'
+import { ConnectionTestResults } from './ConnectionTestResults'
+
+export const StyledHeader = styled('div')(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   padding: theme.spacing(0, 1),
@@ -8,3 +17,39 @@ export const PeerListHeader = styled('div')(({ theme }) => ({
   ...theme.mixins.toolbar,
   justifyContent: 'flex-start',
 }))
+
+interface PeerListWrapperProps {
+  onPeerListClose: () => void
+  connectionTestResults: IConnectionTestResults
+}
+
+export const PeerListHeader = ({
+  onPeerListClose,
+  connectionTestResults,
+}: PeerListWrapperProps) => (
+  <StyledHeader>
+    <IconButton onClick={onPeerListClose} aria-label="Close peer list">
+      <ChevronRightIcon />
+    </IconButton>
+    <ListItem>
+      <Routes>
+        {/*
+        This stub route is needed to silence spurious warnings in the tests.
+        */}
+        <Route path={routes.ROOT} element={<></>}></Route>
+
+        {[routes.PUBLIC_ROOM, routes.PRIVATE_ROOM].map(route => (
+          <Route
+            key={route}
+            path={route}
+            element={
+              <ConnectionTestResults
+                connectionTestResults={connectionTestResults}
+              />
+            }
+          />
+        ))}
+      </Routes>
+    </ListItem>
+  </StyledHeader>
+)