refactor: routes as constants (#191)

src/App.tsx

@@ -6,7 +6,7 @@ import { ThemeProvider } from '@material-ui/styles'
 import CssBaseline from '@material-ui/core/CssBaseline'
 import { SnackbarProvider } from 'notistack'
 
-import BaseRouter from './routes/routes'
+import BaseRouter from './routes'
 import Dashboard from './layout/Dashboard'
 import { theme } from './theme'
 import { Provider as StampsProvider } from './providers/Stamps'

src/components/SideBar.tsx

@@ -5,6 +5,7 @@ import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
 import { ListItemText, ListItemIcon, ListItem, Divider, List, Drawer, Link as MUILink } from '@material-ui/core'
 import { OpenInNewSharp } from '@material-ui/icons'
 import { Home, FileText, DollarSign, Share2, Settings, Layers } from 'react-feather'
+import { ROUTES } from '../routes'
 
 import SwarmLogoOrange from '../assets/swarm-logo-orange.svg'
 
@@ -14,37 +15,37 @@ const navBarItems = [
   {
     label: 'Info',
     id: 'info',
-    path: '/',
+    path: ROUTES.INFO,
     icon: Home,
   },
   {
     label: 'Files',
     id: 'files',
-    path: '/files/',
+    path: ROUTES.FILES,
     icon: FileText,
   },
   {
     label: 'Stamps',
     id: 'stamps',
-    path: '/stamps/',
+    path: ROUTES.STAMPS,
     icon: Layers,
   },
   {
     label: 'Accounting',
     id: 'accounting',
-    path: '/accounting/',
+    path: ROUTES.ACCOUNTING,
     icon: DollarSign,
   },
   {
     label: 'Peers',
     id: 'peers',
-    path: '/peers/',
+    path: ROUTES.PEERS,
     icon: Share2,
   },
   {
     label: 'Settings',
     id: 'settings',
-    path: '/settings/',
+    path: ROUTES.SETTINGS,
     icon: Settings,
   },
 ]
@@ -99,7 +100,7 @@ export default function SideBar(props: Props): ReactElement {
         anchor="left"
       >
         <div className={classes.toolbar} style={{ textAlign: 'left', marginLeft: 20 }}>
-          <Link to="/">
+          <Link to={ROUTES.INFO}>
             <img
               alt="swarm"
               className={classes.logo}
@@ -137,7 +138,7 @@ export default function SideBar(props: Props): ReactElement {
           </MUILink>
         </List>
         <div style={{ position: 'fixed', bottom: 0, width: 'inherit', padding: '10px' }}>
-          <Link to="/status" style={{ marginRight: '30px', color: 'inherit', textDecoration: 'none' }}>
+          <Link to={ROUTES.STATUS} style={{ marginRight: '30px', color: 'inherit', textDecoration: 'none' }}>
             <ListItem>
               <span
                 style={{

src/components/TroubleshootConnectionCard.tsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
 
 import { makeStyles } from '@material-ui/core/styles'
 import { Card, CardContent, Typography } from '@material-ui/core/'
+import { ROUTES } from '../routes'
 
 const useStyles = makeStyles({
   root: {
@@ -26,7 +27,7 @@ export default function TroubleshootConnectionCard(): ReactElement {
         </Typography>
         <div style={{ marginBottom: '20px', textAlign: 'center' }}>
           <strong>
-            <Link to="/status">Click to run status checks</Link> on your nodes connection or check out the{' '}
+            <Link to={ROUTES.STATUS}>Click to run status checks</Link> on your nodes connection or check out the{' '}
             <a href={process.env.REACT_APP_BEE_DOCS_HOST} target="_blank" rel="noreferrer">
               Swarm Bee Docs
             </a>

src/pages/info/StatusCard.tsx

@@ -5,6 +5,7 @@ import { createStyles, makeStyles } from '@material-ui/core/styles'
 import { Card, CardContent, Typography, Chip, Button } from '@material-ui/core/'
 import { ArrowRight, ArrowDropUp } from '@material-ui/icons/'
 import { NodeAddresses, Topology } from '@ethersphere/bee-js'
+import { ROUTES } from '../../routes'
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -48,7 +49,7 @@ function StatusCard({
             <span style={{ marginRight: '20px' }}>Discovered Nodes: {nodeTopology?.population}</span>
             <span style={{ marginRight: '20px' }}>
               <span>Connected Peers: </span>
-              <Link to="/peers/">{nodeTopology?.connected}</Link>
+              <Link to={ROUTES.PEERS}>{nodeTopology?.connected}</Link>
             </span>
           </div>
           <div>

src/routes.tsx

@@ -0,0 +1,36 @@
+import type { ReactElement } from 'react'
+import { Switch } from 'react-router-dom'
+
+import { Route } from 'react-router-dom'
+
+import Info from './pages/info'
+import Status from './pages/status'
+import Files from './pages/files'
+import Peers from './pages/peers'
+import Accounting from './pages/accounting'
+import Settings from './pages/settings'
+import Stamps from './pages/stamps'
+
+export enum ROUTES {
+  INFO = '/',
+  FILES = '/files',
+  PEERS = '/peers',
+  ACCOUNTING = '/accounting',
+  SETTINGS = '/settings',
+  STAMPS = '/stamps',
+  STATUS = '/status',
+}
+
+const BaseRouter = (): ReactElement => (
+  <Switch>
+    <Route exact path={ROUTES.INFO} component={Info} />
+    <Route exact path={ROUTES.FILES} component={Files} />
+    <Route exact path={ROUTES.PEERS} component={Peers} />
+    <Route exact path={ROUTES.ACCOUNTING} component={Accounting} />
+    <Route exact path={ROUTES.SETTINGS} component={Settings} />
+    <Route exact path={ROUTES.STAMPS} component={Stamps} />
+    <Route exact path={ROUTES.STATUS} component={Status} />
+  </Switch>
+)
+
+export default BaseRouter

src/routes/routes.tsx

@@ -1,26 +0,0 @@
-import type { ReactElement } from 'react'
-import { Switch } from 'react-router-dom'
-
-import { Route } from 'react-router-dom'
-
-import Info from '../pages/info'
-import Status from '../pages/status'
-import Files from '../pages/files'
-import Peers from '../pages/peers'
-import Accounting from '../pages/accounting'
-import Settings from '../pages/settings'
-import Stamps from '../pages/stamps'
-
-const BaseRouter = (): ReactElement => (
-  <Switch>
-    <Route exact path="/" component={Info} />
-    <Route exact path="/files/" component={Files} />
-    <Route exact path="/peers/" component={Peers} />
-    <Route exact path="/accounting/" component={Accounting} />
-    <Route exact path="/settings/" component={Settings} />
-    <Route exact path="/stamps/" component={Stamps} />
-    <Route exact path="/status" component={Status} />
-  </Switch>
-)
-
-export default BaseRouter