refactor: routes as constants (#191)

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>