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
       persistedStorage={mockPersistedStorage as any as typeof localforage}
       {...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,6 +48,7 @@ function Bootstrap({
   }, [hasLoadedSettings, persistedStorage, settings, userId])
 
   return (
+    <Router>
       <Shell>
         {hasLoadedSettings ? (
           <Routes>
@@ -63,6 +64,7 @@ function Bootstrap({
           <></>
         )}
       </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,6 +148,7 @@ export const Shell = ({ children }: ShellProps) => {
 
   return (
     <ShellContext.Provider value={shellContextValue}>
+      <ThemeProvider theme={darkTheme}>
         <CssBaseline />
         <Box
           className="Chitchatter"
@@ -230,6 +238,7 @@ export const Shell = ({ children }: ShellProps) => {
           </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(
-  <ThemeProvider theme={darkTheme}>
-    <CssBaseline />
-    <Router>
-      <Bootstrap />
-    </Router>
-  </ThemeProvider>
-)
+root.render(<Bootstrap />)
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))