refactor: move the router and layout directly to app.tsx (#188)

src/App.tsx

@@ -7,6 +7,7 @@ import CssBaseline from '@material-ui/core/CssBaseline'
 import { SnackbarProvider } from 'notistack'
 
 import BaseRouter from './routes/routes'
+import Dashboard from './layout/Dashboard'
 import { lightTheme, darkTheme } from './theme'
 import { Provider as StampsProvider } from './providers/Stamps'
 import { Provider as PlatformProvider } from './providers/Platform'
@@ -43,12 +44,14 @@ const App = (): ReactElement => {
             <StampsProvider>
               <PlatformProvider>
                 <SnackbarProvider>
+                  <Router>
                     <>
                       <CssBaseline />
-                    <Router>
+                      <Dashboard>
                         <BaseRouter />
-                    </Router>
+                      </Dashboard>
                     </>
+                  </Router>
                 </SnackbarProvider>
               </PlatformProvider>
             </StampsProvider>

src/components/SideBar.tsx

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react'
-import { Link, RouteComponentProps } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 
 import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'
 import { ListItemText, ListItemIcon, ListItem, Divider, List, Drawer, Link as MUILink } from '@material-ui/core'
@@ -80,13 +80,14 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 )
 
-interface Props extends RouteComponentProps {
+interface Props {
   themeMode: string
   isOk: boolean
 }
 
 export default function SideBar(props: Props): ReactElement {
   const classes = useStyles()
+  const location = useLocation()
 
   return (
     <div className={classes.root}>
@@ -113,15 +114,15 @@ export default function SideBar(props: Props): ReactElement {
             <Link to={item.path} key={item.id} style={{ color: 'inherit', textDecoration: 'none' }}>
               <ListItem
                 button
-                selected={props.location.pathname === item.path}
+                selected={location.pathname === item.path}
-                className={props.location.pathname === item.path ? classes.activeSideBarItem : ''}
+                className={location.pathname === item.path ? classes.activeSideBarItem : ''}
               >
-                <ListItemIcon className={props.location.pathname === item.path ? classes.activeSideBar : ''}>
+                <ListItemIcon className={location.pathname === item.path ? classes.activeSideBar : ''}>
                   <item.icon style={{ height: '20px' }} />
                 </ListItemIcon>
                 <ListItemText
                   primary={item.label}
-                  className={props.location.pathname === item.path ? classes.activeSideBar : ''}
+                  className={location.pathname === item.path ? classes.activeSideBar : ''}
                 />
               </ListItem>
             </Link>

src/layout/Dashboard.tsx

@@ -10,8 +10,6 @@ import NavBar from '../components/NavBar'
 
 import { Context } from '../providers/Bee'
 
-import { RouteComponentProps } from 'react-router'
-
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     content: {
@@ -24,7 +22,7 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 )
 
-interface Props extends RouteComponentProps {
+interface Props {
   children?: ReactElement
 }
 
@@ -56,7 +54,7 @@ const Dashboard = (props: Props): ReactElement => {
 
   return (
     <div>
-      <SideBar {...props} themeMode={themeMode} isOk={status.all} />
+      <SideBar themeMode={themeMode} isOk={status.all} />
       <NavBar themeMode={themeMode} />
       <ErrorBoundary>
         <main className={classes.content}>

src/routes/AppRoute.tsx

@@ -1,23 +0,0 @@
-import type { JSXElementConstructor, ReactElement } from 'react'
-import { Route, RouteComponentProps } from 'react-router-dom'
-
-interface Props {
-  component: JSXElementConstructor<RouteComponentProps>
-  layout: JSXElementConstructor<RouteComponentProps>
-  exact?: boolean
-  path: string
-}
-
-const AppRoute = ({ component: Component, layout: Layout, exact, path }: Props): ReactElement => (
-  <Route
-    exact={exact}
-    path={path}
-    render={props => (
-      <Layout {...props}>
-        <Component {...props} />
-      </Layout>
-    )}
-  />
-)
-
-export default AppRoute

src/routes/routes.tsx

@@ -1,12 +1,8 @@
 import type { ReactElement } from 'react'
 import { Switch } from 'react-router-dom'
 
-import AppRoute from './AppRoute'
+import { Route } from 'react-router-dom'
 
-// layouts
-import Dashboard from '../layout/Dashboard'
-
-// pages
 import Info from '../pages/info'
 import Status from '../pages/status'
 import Files from '../pages/files'
@@ -17,13 +13,13 @@ import Stamps from '../pages/stamps'
 
 const BaseRouter = (): ReactElement => (
   <Switch>
-    <AppRoute exact path="/" layout={Dashboard} component={Info} />
+    <Route exact path="/" component={Info} />
-    <AppRoute exact path="/files/" layout={Dashboard} component={Files} />
+    <Route exact path="/files/" component={Files} />
-    <AppRoute exact path="/peers/" layout={Dashboard} component={Peers} />
+    <Route exact path="/peers/" component={Peers} />
-    <AppRoute exact path="/accounting/" layout={Dashboard} component={Accounting} />
+    <Route exact path="/accounting/" component={Accounting} />
-    <AppRoute exact path="/settings/" layout={Dashboard} component={Settings} />
+    <Route exact path="/settings/" component={Settings} />
-    <AppRoute exact path="/stamps/" layout={Dashboard} component={Stamps} />
+    <Route exact path="/stamps/" component={Stamps} />
-    <AppRoute exact path="/status" layout={Dashboard} component={Status} />
+    <Route exact path="/status" component={Status} />
   </Switch>
 )