refactor: simplify index.tsx

src/Bootstrap.test.tsx

@@ -1,5 +1,4 @@
 import { act, render } from '@testing-library/react'
-import { MemoryRouter as Router } from 'react-router-dom'
 import localforage from 'localforage'
 
 import { PersistedStorageKeys } from 'models/storage'
@@ -26,12 +25,10 @@ const renderBootstrap = async (overrides: BootstrapProps = {}) => {
   })
 
   render(
-    <Router>
+    <Bootstrap
-      <Bootstrap
+      persistedStorage={mockPersistedStorage as any as typeof localforage}
-        persistedStorage={mockPersistedStorage as any as typeof localforage}
+      {...overrides}
-        {...overrides}
+    />
-      />
-    </Router>
   )
 
   // https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning#an-alternative-waiting-for-the-mocked-promise

src/Bootstrap.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Routes, Route } from 'react-router-dom'
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import { v4 as uuid } from 'uuid'
 import localforage from 'localforage'
 
@@ -48,21 +48,23 @@ function Bootstrap({
   }, [hasLoadedSettings, persistedStorage, settings, userId])
 
   return (
-    <Shell>
+    <Router>
-      {hasLoadedSettings ? (
+      <Shell>
-        <Routes>
+        {hasLoadedSettings ? (
-          {['/', '/index.html'].map(path => (
+          <Routes>
-            <Route key={path} path={path} element={<Home />} />
+            {['/', '/index.html'].map(path => (
-          ))}
+              <Route key={path} path={path} element={<Home />} />
-          <Route
+            ))}
-            path="/public/:roomId"
+            <Route
-            element={<PublicRoom userId={userId} />}
+              path="/public/:roomId"
-          />
+              element={<PublicRoom userId={userId} />}
-        </Routes>
+            />
-      ) : (
+          </Routes>
-        <></>
+        ) : (
-      )}
+          <></>
-    </Shell>
+        )}
+      </Shell>
+    </Router>
   )
 }
 

src/components/Shell/Shell.tsx

@@ -11,6 +11,7 @@ import { Link } from 'react-router-dom'
 import CssBaseline from '@mui/material/CssBaseline'
 import { styled, useTheme } from '@mui/material/styles'
 import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
 import Drawer from '@mui/material/Drawer'
 import Toolbar from '@mui/material/Toolbar'
 import Box from '@mui/material/Box'
@@ -94,6 +95,12 @@ const DrawerHeader = styled('div')(({ theme }) => ({
   justifyContent: 'flex-end',
 }))
 
+const darkTheme = createTheme({
+  palette: {
+    mode: 'dark',
+  },
+})
+
 export const Shell = ({ children }: ShellProps) => {
   const theme = useTheme()
   const [isAlertShowing, setIsAlertShowing] = useState(false)
@@ -141,95 +148,97 @@ export const Shell = ({ children }: ShellProps) => {
 
   return (
     <ShellContext.Provider value={shellContextValue}>
-      <CssBaseline />
+      <ThemeProvider theme={darkTheme}>
-      <Box
+        <CssBaseline />
-        className="Chitchatter"
+        <Box
-        sx={{
+          className="Chitchatter"
-          height: '100vh',
-          display: 'flex',
-          paddingTop: 8,
-        }}
-      >
-        <Snackbar
-          open={isAlertShowing}
-          autoHideDuration={6000}
-          onClose={handleAlertClose}
-          anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-        >
-          <Alert
-            onClose={handleAlertClose}
-            severity={alertSeverity}
-            variant="standard"
-          >
-            {alertText}
-          </Alert>
-        </Snackbar>
-        <AppBar position="fixed" open={isDrawerOpen}>
-          <Toolbar
-            variant="regular"
-            sx={{
-              display: 'flex',
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-            }}
-          >
-            <IconButton
-              size="large"
-              edge="start"
-              color="inherit"
-              aria-label="menu"
-              sx={{ mr: 2, ...(isDrawerOpen && { display: 'none' }) }}
-              onClick={handleDrawerOpen}
-            >
-              <MenuIcon />
-            </IconButton>
-            <Typography variant="h6" noWrap component="div">
-              {title}
-            </Typography>
-            <Tooltip title="Number of peers in the room">
-              <StepIcon icon={numberOfPeers} sx={{ marginLeft: 'auto' }} />
-            </Tooltip>
-          </Toolbar>
-        </AppBar>
-        <Drawer
           sx={{
-            width: drawerWidth,
+            height: '100vh',
-            flexShrink: 0,
+            display: 'flex',
-            '& .MuiDrawer-paper': {
+            paddingTop: 8,
-              width: drawerWidth,
-              boxSizing: 'border-box',
-            },
           }}
-          variant="persistent"
-          anchor="left"
-          open={isDrawerOpen}
         >
-          <DrawerHeader>
+          <Snackbar
-            <IconButton onClick={handleDrawerClose}>
+            open={isAlertShowing}
-              {theme.direction === 'ltr' ? (
+            autoHideDuration={6000}
-                <ChevronLeftIcon />
+            onClose={handleAlertClose}
-              ) : (
+            anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-                <ChevronRightIcon />
+          >
-              )}
+            <Alert
-            </IconButton>
+              onClose={handleAlertClose}
-          </DrawerHeader>
+              severity={alertSeverity}
-          <Divider />
+              variant="standard"
-          <List>
+            >
-            <Link to="/">
+              {alertText}
-              <ListItem disablePadding>
+            </Alert>
-                <ListItemButton>
+          </Snackbar>
-                  <ListItemIcon>
+          <AppBar position="fixed" open={isDrawerOpen}>
-                    <Home />
+            <Toolbar
-                  </ListItemIcon>
+              variant="regular"
-                  <ListItemText primary="Home" />
+              sx={{
-                </ListItemButton>
+                display: 'flex',
-              </ListItem>
+                flexDirection: 'row',
-            </Link>
+                justifyContent: 'space-between',
-          </List>
+              }}
-          <Divider />
+            >
-        </Drawer>
+              <IconButton
-        <Main open={isDrawerOpen}>{children}</Main>
+                size="large"
-      </Box>
+                edge="start"
+                color="inherit"
+                aria-label="menu"
+                sx={{ mr: 2, ...(isDrawerOpen && { display: 'none' }) }}
+                onClick={handleDrawerOpen}
+              >
+                <MenuIcon />
+              </IconButton>
+              <Typography variant="h6" noWrap component="div">
+                {title}
+              </Typography>
+              <Tooltip title="Number of peers in the room">
+                <StepIcon icon={numberOfPeers} sx={{ marginLeft: 'auto' }} />
+              </Tooltip>
+            </Toolbar>
+          </AppBar>
+          <Drawer
+            sx={{
+              width: drawerWidth,
+              flexShrink: 0,
+              '& .MuiDrawer-paper': {
+                width: drawerWidth,
+                boxSizing: 'border-box',
+              },
+            }}
+            variant="persistent"
+            anchor="left"
+            open={isDrawerOpen}
+          >
+            <DrawerHeader>
+              <IconButton onClick={handleDrawerClose}>
+                {theme.direction === 'ltr' ? (
+                  <ChevronLeftIcon />
+                ) : (
+                  <ChevronRightIcon />
+                )}
+              </IconButton>
+            </DrawerHeader>
+            <Divider />
+            <List>
+              <Link to="/">
+                <ListItem disablePadding>
+                  <ListItemButton>
+                    <ListItemIcon>
+                      <Home />
+                    </ListItemIcon>
+                    <ListItemText primary="Home" />
+                  </ListItemButton>
+                </ListItem>
+              </Link>
+            </List>
+            <Divider />
+          </Drawer>
+          <Main open={isDrawerOpen}>{children}</Main>
+        </Box>
+      </ThemeProvider>
     </ShellContext.Provider>
   )
 }

src/index.tsx

@@ -1,7 +1,4 @@
 import ReactDOM from 'react-dom/client'
-import { BrowserRouter as Router } from 'react-router-dom'
-import { ThemeProvider, createTheme } from '@mui/material/styles'
-import CssBaseline from '@mui/material/CssBaseline'
 import 'typeface-roboto'
 
 import * as serviceWorkerRegistration from 'serviceWorkerRegistration'
@@ -9,21 +6,8 @@ import 'index.sass'
 import Bootstrap from 'Bootstrap'
 import reportWebVitals from 'reportWebVitals'
 
-const darkTheme = createTheme({
-  palette: {
-    mode: 'dark',
-  },
-})
-
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
-root.render(
+root.render(<Bootstrap />)
-  <ThemeProvider theme={darkTheme}>
-    <CssBaseline />
-    <Router>
-      <Bootstrap />
-    </Router>
-  </ThemeProvider>
-)
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))