refactor: move notification area to its own component file

src/components/Shell/NotificationArea.tsx

@@ -0,0 +1,37 @@
+import { forwardRef } from 'react'
+import Snackbar from '@mui/material/Snackbar'
+import MuiAlert, { AlertProps, AlertColor } from '@mui/material/Alert'
+
+const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  props,
+  ref
+) {
+  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
+})
+
+interface NotificationAreaProps {
+  alertSeverity: AlertColor
+  alertText: string
+  isAlertShowing: boolean
+  onAlertClose: () => void
+}
+
+export const NotificationArea = ({
+  alertSeverity,
+  alertText,
+  isAlertShowing,
+  onAlertClose,
+}: NotificationAreaProps) => {
+  return (
+    <Snackbar
+      open={isAlertShowing}
+      autoHideDuration={6000}
+      onClose={onAlertClose}
+      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+    >
+      <Alert onClose={onAlertClose} severity={alertSeverity} variant="standard">
+        {alertText}
+      </Alert>
+    </Snackbar>
+  )
+}

src/components/Shell/Shell.tsx

@@ -1,7 +1,6 @@
 import {
   PropsWithChildren,
   SyntheticEvent,
-  forwardRef,
   useCallback,
   useContext,
   useEffect,
@@ -11,8 +10,7 @@ import {
 import CssBaseline from '@mui/material/CssBaseline'
 import { ThemeProvider, createTheme, styled } from '@mui/material/styles'
 import Box from '@mui/material/Box'
-import Snackbar from '@mui/material/Snackbar'
+import { AlertColor } from '@mui/material/Alert'
-import MuiAlert, { AlertProps, AlertColor } from '@mui/material/Alert'
 
 import { ShellContext } from 'contexts/ShellContext'
 import { SettingsContext } from 'contexts/SettingsContext'
@@ -22,13 +20,7 @@ import { Drawer, drawerWidth } from './Drawer'
 import { UpgradeDialog } from './UpgradeDialog'
 import { DrawerHeader } from './DrawerHeader'
 import { ShellAppBar } from './ShellAppBar'
-
+import { NotificationArea } from './NotificationArea'
-const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
-  props,
-  ref
-) {
-  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
-})
 
 const Main = styled('main', { shouldForwardProp: prop => prop !== 'open' })<{
   open?: boolean
@@ -140,20 +132,12 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
             display: 'flex',
           }}
         >
-          <Snackbar
+          <NotificationArea
-            open={isAlertShowing}
+            alertSeverity={alertSeverity}
-            autoHideDuration={6000}
+            alertText={alertText}
-            onClose={handleAlertClose}
+            isAlertShowing={isAlertShowing}
-            anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+            onAlertClose={handleAlertClose}
-          >
+          />
-            <Alert
-              onClose={handleAlertClose}
-              severity={alertSeverity}
-              variant="standard"
-            >
-              {alertText}
-            </Alert>
-          </Snackbar>
           <ShellAppBar
             doShowPeers={doShowPeers}
             handleDrawerOpen={handleDrawerOpen}