chore: title and sidebar moved to app.js

new-lamassu-admin/src/App.js

@@ -1,4 +1,5 @@
 import CssBaseline from '@material-ui/core/CssBaseline'
+import Grid from '@material-ui/core/Grid'
 import {
   StylesProvider,
   jssPreset,
@@ -8,12 +9,24 @@ import {
 import { create } from 'jss'
 import extendJss from 'jss-plugin-extend'
 import React, { createContext, useContext, useState } from 'react'
-import { useLocation, BrowserRouter as Router } from 'react-router-dom'
+import {
+  useLocation,
+  useHistory,
+  BrowserRouter as Router
+} from 'react-router-dom'
 
+import Sidebar from 'src/components/layout/Sidebar'
+import TitleSection from 'src/components/layout/TitleSection'
 import ApolloProvider from 'src/utils/apollo'
 
 import Header from './components/layout/Header'
-import { tree, Routes } from './routing/routes'
+import {
+  getTitle,
+  tree,
+  hasSidebar,
+  Routes,
+  getSidebarData
+} from './routing/routes'
 import global from './styling/global'
 import theme from './styling/theme'
 import { backgroundColor, mainWidth } from './styling/variables'
@@ -46,6 +59,18 @@ const useStyles = makeStyles({
     flex: 1,
     display: 'flex',
     flexDirection
+  },
+  grid: {
+    flex: 1,
+    height: '100%'
+  },
+  contentWithSidebar: {
+    flex: 1,
+    marginLeft: 48,
+    paddingTop: 15
+  },
+  contentWithoutSidebar: {
+    width: mainWidth
   }
 })
 
@@ -54,15 +79,46 @@ const AppContext = createContext()
 const Main = () => {
   const classes = useStyles()
   const location = useLocation()
+  const history = useHistory()
   const { wizardTested } = useContext(AppContext)
 
+  const route = location.pathname
+
+  const title = getTitle(route)
+  const sidebar = hasSidebar(route)
+  const sidebarData = sidebar ? getSidebarData(route) : []
+
   const is404 = location.pathname === '/404'
 
+  const isSelected = it => location.pathname === it.route
+
+  const onClick = it => history.push(it.route)
+
+  const contentClassName = sidebar
+    ? classes.contentWithSidebar
+    : classes.contentWithoutSidebar
+
   return (
     <div className={classes.root}>
       {!is404 && wizardTested && <Header tree={tree} />}
       <main className={classes.wrapper}>
-        <Routes />
+        {title && !is404 && wizardTested && (
+          <TitleSection title={title}></TitleSection>
+        )}
+
+        <Grid container className={classes.grid}>
+          {sidebar && !is404 && wizardTested && (
+            <Sidebar
+              data={sidebarData}
+              isSelected={isSelected}
+              displayName={it => it.label}
+              onClick={onClick}
+            />
+          )}
+          <div className={contentClassName}>
+            <Routes />
+          </div>
+        </Grid>
       </main>
     </div>
   )

new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.js

@@ -1,100 +0,0 @@
-import { makeStyles } from '@material-ui/core'
-import Grid from '@material-ui/core/Grid'
-import React from 'react'
-import {
-  Route,
-  Switch,
-  Redirect,
-  useLocation,
-  useHistory
-} from 'react-router-dom'
-
-import Sidebar from 'src/components/layout/Sidebar'
-import TitleSection from 'src/components/layout/TitleSection'
-
-import CoinAtmRadar from './CoinATMRadar'
-import ContactInfo from './ContactInfo'
-import ReceiptPrinting from './ReceiptPrinting'
-import TermsConditions from './TermsConditions'
-
-const styles = {
-  grid: {
-    flex: 1,
-    height: '100%'
-  },
-  content: {
-    flex: 1,
-    marginLeft: 48,
-    paddingTop: 15
-  }
-}
-
-const useStyles = makeStyles(styles)
-
-const innerRoutes = [
-  {
-    label: 'Contact information',
-    route: '/settings/operator-info/contact-info',
-    component: ContactInfo
-  },
-  {
-    label: 'Receipt',
-    route: '/settings/operator-info/receipt-printing',
-    component: ReceiptPrinting
-  },
-  {
-    label: 'Coin ATM Radar',
-    route: '/settings/operator-info/coin-atm-radar',
-    component: CoinAtmRadar
-  },
-  {
-    label: 'Terms & Conditions',
-    route: '/settings/operator-info/terms-conditions',
-    component: TermsConditions
-  }
-]
-
-const Routes = ({ wizard }) => (
-  <Switch>
-    <Redirect
-      exact
-      from="/settings/operator-info"
-      to="/settings/operator-info/contact-info"
-    />
-    <Route exact path="/" />
-    {innerRoutes.map(({ route, component: Page, key }) => (
-      <Route path={route} key={key}>
-        <Page name={key} wizard={wizard} />
-      </Route>
-    ))}
-  </Switch>
-)
-
-const OperatorInfo = ({ wizard = false }) => {
-  const classes = useStyles()
-  const history = useHistory()
-  const location = useLocation()
-
-  const isSelected = it => location.pathname === it.route
-
-  const onClick = it => history.push(it.route)
-
-  return (
-    <>
-      <TitleSection title="Operator information"></TitleSection>
-      <Grid container className={classes.grid}>
-        <Sidebar
-          data={innerRoutes}
-          isSelected={isSelected}
-          displayName={it => it.label}
-          onClick={onClick}
-        />
-        <div className={classes.content}>
-          <Routes wizard={wizard} />
-        </div>
-      </Grid>
-    </>
-  )
-}
-
-export default OperatorInfo

new-lamassu-admin/src/routing/routes.js

@@ -20,7 +20,10 @@ import MachineLogs from 'src/pages/MachineLogs'
 import CashCassettes from 'src/pages/Maintenance/CashCassettes'
 import MachineStatus from 'src/pages/Maintenance/MachineStatus'
 import Notifications from 'src/pages/Notifications/Notifications'
-import OperatorInfo from 'src/pages/OperatorInfo/OperatorInfo'
+import CoinAtmRadar from 'src/pages/OperatorInfo/CoinATMRadar'
+import ContactInfo from 'src/pages/OperatorInfo/ContactInfo'
+import ReceiptPrinting from 'src/pages/OperatorInfo/ReceiptPrinting'
+import TermsConditions from 'src/pages/OperatorInfo/TermsConditions'
 import ServerLogs from 'src/pages/ServerLogs'
 import Services from 'src/pages/Services/Services'
 import TokenManagement from 'src/pages/TokenManagement/TokenManagement'
@@ -125,7 +128,36 @@ const tree = [
         key: namespaces.OPERATOR_INFO,
         label: 'Operator Info',
         route: '/settings/operator-info',
-        component: OperatorInfo
+        children: [
+          {
+            key: 'contact-info',
+            label: 'Contact information',
+            title: 'Operator information',
+            route: '/settings/operator-info/contact-info',
+            component: ContactInfo
+          },
+          {
+            key: 'receipt-printing',
+            label: 'Receipt',
+            title: 'Operator information',
+            route: '/settings/operator-info/receipt-printing',
+            component: ReceiptPrinting
+          },
+          {
+            key: 'coin-atm-radar',
+            label: 'Coin ATM Radar',
+            title: 'Operator information',
+            route: '/settings/operator-info/coin-atm-radar',
+            component: CoinAtmRadar
+          },
+          {
+            key: 'terms-conditions',
+            label: 'Terms & Conditions',
+            title: 'Operator information',
+            route: '/settings/operator-info/terms-conditions',
+            component: TermsConditions
+          }
+        ]
       }
     ]
   },
@@ -181,10 +213,33 @@ const tree = [
 ]
 
 const map = R.map(R.when(R.has('children'), R.prop('children')))
-const leafRoutes = R.compose(R.flatten, map)(tree)
+const mappedRoutes = R.compose(R.flatten, map)(tree)
-const parentRoutes = R.filter(R.has('children'))(tree)
+const parentRoutes = R.filter(R.has('children'))(tree).concat(
+  R.filter(R.has('children'))(mappedRoutes)
+)
+const leafRoutes = R.compose(R.flatten, map)(mappedRoutes)
+const thirdLevelRoutes = R.compose(
+  R.flatten,
+  R.map(R.prop('children')),
+  R.filter(R.has('children'))
+)(mappedRoutes)
 const flattened = R.concat(leafRoutes, parentRoutes)
 
+const getTitle = route =>
+  R.prop('title', R.find(R.propEq('route', route))(flattened))
+
+const hasSidebar = route => R.any(r => r.route === route, thirdLevelRoutes)
+
+const getSidebarData = route => {
+  const parentRoute = R.dropLast(
+    1,
+    R.dropLastWhile(x => x !== '/', route)
+  )
+  const parent = R.find(R.propEq('route', parentRoute))(flattened)
+
+  return parent?.children
+}
+
 const Routes = () => {
   const history = useHistory()
   const location = useLocation()
@@ -201,6 +256,9 @@ const Routes = () => {
       <Route exact path="/">
         <Redirect to={{ pathname: '/transactions' }} />
       </Route>
+      <Route exact path="/settings/operator-info">
+        <Redirect to={{ pathname: '/settings/operator-info/contact-info' }} />
+      </Route>
       <Route path="/wizard" component={Wizard} />
       <Route path="/register" component={AuthRegister} />
       {flattened.map(({ route, component: Page, key }) => (
@@ -215,4 +273,4 @@ const Routes = () => {
     </Switch>
   )
 }
-export { tree, Routes }
+export { getTitle, tree, getSidebarData, hasSidebar, Routes }