diff --git a/new-lamassu-admin/src/App.js b/new-lamassu-admin/src/App.js
index 0ff35c15..fe50fead 100644
--- a/new-lamassu-admin/src/App.js
+++ b/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 (
{!is404 && wizardTested &&
}
-
+ {title && !is404 && wizardTested && (
+
+ )}
+
+
+ {sidebar && !is404 && wizardTested && (
+ it.label}
+ onClick={onClick}
+ />
+ )}
+
+
+
+
)
diff --git a/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.js b/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.js
deleted file mode 100644
index 794530d2..00000000
--- a/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.js
+++ /dev/null
@@ -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 }) => (
-
-
-
- {innerRoutes.map(({ route, component: Page, key }) => (
-
-
-
- ))}
-
-)
-
-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 (
- <>
-
-
- it.label}
- onClick={onClick}
- />
-
-
-
-
- >
- )
-}
-
-export default OperatorInfo
diff --git a/new-lamassu-admin/src/routing/routes.js b/new-lamassu-admin/src/routing/routes.js
index 404ade02..b7918eb7 100644
--- a/new-lamassu-admin/src/routing/routes.js
+++ b/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 parentRoutes = R.filter(R.has('children'))(tree)
+const mappedRoutes = R.compose(R.flatten, map)(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 = () => {
+
+
+
{flattened.map(({ route, component: Page, key }) => (
@@ -215,4 +273,4 @@ const Routes = () => {
)
}
-export { tree, Routes }
+export { getTitle, tree, getSidebarData, hasSidebar, Routes }