From 3e1e2b4831c0ec2c995ea14a104d66db22ddd995 Mon Sep 17 00:00:00 2001 From: Jose Sousa Date: Mon, 23 Nov 2020 18:59:13 +0000 Subject: [PATCH] chore: title and sidebar moved to app.js --- new-lamassu-admin/src/App.js | 62 ++++++++++- .../src/pages/OperatorInfo/OperatorInfo.js | 100 ------------------ new-lamassu-admin/src/routing/routes.js | 68 +++++++++++- 3 files changed, 122 insertions(+), 108 deletions(-) delete mode 100644 new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.js 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 }