refactor: move routes to an enum

src/Bootstrap.tsx

@@ -5,6 +5,7 @@ import localforage from 'localforage'
 
 import * as serviceWorkerRegistration from 'serviceWorkerRegistration'
 import { SettingsContext } from 'contexts/SettingsContext'
+import { routes } from 'config/routes'
 import { Home } from 'pages/Home'
 import { About } from 'pages/About'
 import { PublicRoom } from 'pages/PublicRoom'
@@ -85,16 +86,16 @@ function Bootstrap({
         <Shell appNeedsUpdate={appNeedsUpdate} userPeerId={userId}>
           {hasLoadedSettings ? (
             <Routes>
-              {['/', '/index.html'].map(path => (
+              {[routes.ROOT, routes.INDEX_HTML].map(path => (
                 <Route
                   key={path}
                   path={path}
                   element={<Home userId={userId} />}
                 />
               ))}
-              <Route path="/about" element={<About />} />
+              <Route path={routes.ABOUT} element={<About />} />
               <Route
-                path="/public/:roomId"
+                path={routes.PUBLIC_ROOM}
                 element={<PublicRoom userId={userId} />}
               />
             </Routes>

src/components/Shell/Drawer.tsx

@@ -17,6 +17,7 @@ import QuestionMark from '@mui/icons-material/QuestionMark'
 import Brightness4Icon from '@mui/icons-material/Brightness4'
 import Brightness7Icon from '@mui/icons-material/Brightness7'
 
+import { routes } from 'config/routes'
 import { SettingsContext } from 'contexts/SettingsContext'
 import { PeerNameDisplay } from 'components/PeerNameDisplay'
 
@@ -90,7 +91,7 @@ export const Drawer = ({
       </ListItem>
       <Divider />
       <List role="navigation">
-        <Link to="/" onClick={onHomeLinkClick}>
+        <Link to={routes.INDEX_HTML} onClick={onHomeLinkClick}>
           <ListItem disablePadding>
             <ListItemButton>
               <ListItemIcon>
@@ -100,7 +101,7 @@ export const Drawer = ({
             </ListItemButton>
           </ListItem>
         </Link>
-        <Link to="/about" onClick={onAboutLinkClick}>
+        <Link to={routes.ABOUT} onClick={onAboutLinkClick}>
           <ListItem disablePadding>
             <ListItemButton>
               <ListItemIcon>

src/config/routes.ts

@@ -0,0 +1,7 @@
+export enum routes {
+  ABOUT = '/about',
+  HOME = '/home',
+  INDEX_HTML = '/index.html',
+  PUBLIC_ROOM = '/public/:roomId',
+  ROOT = '/',
+}

src/pages/Home/Home.tsx

@@ -12,6 +12,7 @@ import GitHubIcon from '@mui/icons-material/GitHub'
 import Tooltip from '@mui/material/Tooltip'
 import { v4 as uuid } from 'uuid'
 
+import { routes } from 'config/routes'
 import { ShellContext } from 'contexts/ShellContext'
 import { PeerNameDisplay } from 'components/PeerNameDisplay'
 import { ReactComponent as Logo } from 'img/logo.svg'
@@ -42,7 +43,7 @@ export function Home({ userId }: HomeProps) {
   return (
     <Box className="Home">
       <main className="mt-6 px-4 max-w-3xl text-center mx-auto">
-        <Link to="/about">
+        <Link to={routes.ABOUT}>
           <Logo className="px-1 pb-4 mx-auto max-w-md" />
         </Link>
         <form onSubmit={handleFormSubmit} className="max-w-xl mx-auto">