From 20d83370825d1f1eb32455a809b3e9ec7b72493d Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Tue, 20 Sep 2022 14:22:39 -0500
Subject: [PATCH] refactor: move routes to an enum

---
 src/Bootstrap.tsx               | 7 ++++---
 src/components/Shell/Drawer.tsx | 5 +++--
 src/config/routes.ts            | 7 +++++++
 src/pages/Home/Home.tsx         | 3 ++-
 4 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 src/config/routes.ts

diff --git a/src/Bootstrap.tsx b/src/Bootstrap.tsx
index ed31ddf..c99a3db 100644
--- a/src/Bootstrap.tsx
+++ b/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>
diff --git a/src/components/Shell/Drawer.tsx b/src/components/Shell/Drawer.tsx
index 25eb182..81de0a5 100644
--- a/src/components/Shell/Drawer.tsx
+++ b/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>
diff --git a/src/config/routes.ts b/src/config/routes.ts
new file mode 100644
index 0000000..42593af
--- /dev/null
+++ b/src/config/routes.ts
@@ -0,0 +1,7 @@
+export enum routes {
+  ABOUT = '/about',
+  HOME = '/home',
+  INDEX_HTML = '/index.html',
+  PUBLIC_ROOM = '/public/:roomId',
+  ROOT = '/',
+}
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index 16d93e1..9c26705 100644
--- a/src/pages/Home/Home.tsx
+++ b/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">