fix: redirect to third level
This commit is contained in:
parent
3e1e2b4831
commit
7b1564c569
2 changed files with 30 additions and 39 deletions
|
|
@ -20,13 +20,7 @@ import TitleSection from 'src/components/layout/TitleSection'
|
||||||
import ApolloProvider from 'src/utils/apollo'
|
import ApolloProvider from 'src/utils/apollo'
|
||||||
|
|
||||||
import Header from './components/layout/Header'
|
import Header from './components/layout/Header'
|
||||||
import {
|
import { tree, hasSidebar, Routes, getParent } from './routing/routes'
|
||||||
getTitle,
|
|
||||||
tree,
|
|
||||||
hasSidebar,
|
|
||||||
Routes,
|
|
||||||
getSidebarData
|
|
||||||
} from './routing/routes'
|
|
||||||
import global from './styling/global'
|
import global from './styling/global'
|
||||||
import theme from './styling/theme'
|
import theme from './styling/theme'
|
||||||
import { backgroundColor, mainWidth } from './styling/variables'
|
import { backgroundColor, mainWidth } from './styling/variables'
|
||||||
|
|
@ -84,9 +78,8 @@ const Main = () => {
|
||||||
|
|
||||||
const route = location.pathname
|
const route = location.pathname
|
||||||
|
|
||||||
const title = getTitle(route)
|
|
||||||
const sidebar = hasSidebar(route)
|
const sidebar = hasSidebar(route)
|
||||||
const sidebarData = sidebar ? getSidebarData(route) : []
|
const parent = sidebar ? getParent(route) : {}
|
||||||
|
|
||||||
const is404 = location.pathname === '/404'
|
const is404 = location.pathname === '/404'
|
||||||
|
|
||||||
|
|
@ -102,14 +95,14 @@ const Main = () => {
|
||||||
<div className={classes.root}>
|
<div className={classes.root}>
|
||||||
{!is404 && wizardTested && <Header tree={tree} />}
|
{!is404 && wizardTested && <Header tree={tree} />}
|
||||||
<main className={classes.wrapper}>
|
<main className={classes.wrapper}>
|
||||||
{title && !is404 && wizardTested && (
|
{sidebar && !is404 && wizardTested && (
|
||||||
<TitleSection title={title}></TitleSection>
|
<TitleSection title={parent.title}></TitleSection>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<Grid container className={classes.grid}>
|
<Grid container className={classes.grid}>
|
||||||
{sidebar && !is404 && wizardTested && (
|
{sidebar && !is404 && wizardTested && (
|
||||||
<Sidebar
|
<Sidebar
|
||||||
data={sidebarData}
|
data={parent.children}
|
||||||
isSelected={isSelected}
|
isSelected={isSelected}
|
||||||
displayName={it => it.label}
|
displayName={it => it.label}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
|
|
|
||||||
|
|
@ -128,32 +128,32 @@ const tree = [
|
||||||
key: namespaces.OPERATOR_INFO,
|
key: namespaces.OPERATOR_INFO,
|
||||||
label: 'Operator Info',
|
label: 'Operator Info',
|
||||||
route: '/settings/operator-info',
|
route: '/settings/operator-info',
|
||||||
|
title: 'Operator Information',
|
||||||
|
get component() {
|
||||||
|
return () => <Redirect to={this.children[0].route} />
|
||||||
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
key: 'contact-info',
|
key: 'contact-info',
|
||||||
label: 'Contact information',
|
label: 'Contact information',
|
||||||
title: 'Operator information',
|
|
||||||
route: '/settings/operator-info/contact-info',
|
route: '/settings/operator-info/contact-info',
|
||||||
component: ContactInfo
|
component: ContactInfo
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'receipt-printing',
|
key: 'receipt-printing',
|
||||||
label: 'Receipt',
|
label: 'Receipt',
|
||||||
title: 'Operator information',
|
|
||||||
route: '/settings/operator-info/receipt-printing',
|
route: '/settings/operator-info/receipt-printing',
|
||||||
component: ReceiptPrinting
|
component: ReceiptPrinting
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'coin-atm-radar',
|
key: 'coin-atm-radar',
|
||||||
label: 'Coin ATM Radar',
|
label: 'Coin ATM Radar',
|
||||||
title: 'Operator information',
|
|
||||||
route: '/settings/operator-info/coin-atm-radar',
|
route: '/settings/operator-info/coin-atm-radar',
|
||||||
component: CoinAtmRadar
|
component: CoinAtmRadar
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'terms-conditions',
|
key: 'terms-conditions',
|
||||||
label: 'Terms & Conditions',
|
label: 'Terms & Conditions',
|
||||||
title: 'Operator information',
|
|
||||||
route: '/settings/operator-info/terms-conditions',
|
route: '/settings/operator-info/terms-conditions',
|
||||||
component: TermsConditions
|
component: TermsConditions
|
||||||
}
|
}
|
||||||
|
|
@ -214,31 +214,32 @@ const tree = [
|
||||||
|
|
||||||
const map = R.map(R.when(R.has('children'), R.prop('children')))
|
const map = R.map(R.when(R.has('children'), R.prop('children')))
|
||||||
const mappedRoutes = R.compose(R.flatten, map)(tree)
|
const mappedRoutes = R.compose(R.flatten, map)(tree)
|
||||||
const parentRoutes = R.filter(R.has('children'))(tree).concat(
|
const parentRoutes = R.filter(R.has('children'))(mappedRoutes).concat(
|
||||||
R.filter(R.has('children'))(mappedRoutes)
|
R.filter(R.has('children'))(tree)
|
||||||
)
|
)
|
||||||
const leafRoutes = R.compose(R.flatten, map)(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 flattened = R.concat(leafRoutes, parentRoutes)
|
||||||
|
|
||||||
const getTitle = route =>
|
const hasSidebar = route =>
|
||||||
R.prop('title', R.find(R.propEq('route', route))(flattened))
|
R.any(r => r.route === route)(
|
||||||
|
R.compose(
|
||||||
const hasSidebar = route => R.any(r => r.route === route, thirdLevelRoutes)
|
R.flatten,
|
||||||
|
R.map(R.prop('children')),
|
||||||
const getSidebarData = route => {
|
R.filter(R.has('children'))
|
||||||
const parentRoute = R.dropLast(
|
)(mappedRoutes)
|
||||||
1,
|
|
||||||
R.dropLastWhile(x => x !== '/', route)
|
|
||||||
)
|
)
|
||||||
const parent = R.find(R.propEq('route', parentRoute))(flattened)
|
|
||||||
|
|
||||||
return parent?.children
|
const getParent = route =>
|
||||||
}
|
R.find(
|
||||||
|
R.propEq(
|
||||||
|
'route',
|
||||||
|
R.dropLast(
|
||||||
|
1,
|
||||||
|
R.dropLastWhile(x => x !== '/', route)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
)(flattened)
|
||||||
|
|
||||||
const Routes = () => {
|
const Routes = () => {
|
||||||
const history = useHistory()
|
const history = useHistory()
|
||||||
|
|
@ -256,9 +257,6 @@ const Routes = () => {
|
||||||
<Route exact path="/">
|
<Route exact path="/">
|
||||||
<Redirect to={{ pathname: '/transactions' }} />
|
<Redirect to={{ pathname: '/transactions' }} />
|
||||||
</Route>
|
</Route>
|
||||||
<Route exact path="/settings/operator-info">
|
|
||||||
<Redirect to={{ pathname: '/settings/operator-info/contact-info' }} />
|
|
||||||
</Route>
|
|
||||||
<Route path="/wizard" component={Wizard} />
|
<Route path="/wizard" component={Wizard} />
|
||||||
<Route path="/register" component={AuthRegister} />
|
<Route path="/register" component={AuthRegister} />
|
||||||
{flattened.map(({ route, component: Page, key }) => (
|
{flattened.map(({ route, component: Page, key }) => (
|
||||||
|
|
@ -273,4 +271,4 @@ const Routes = () => {
|
||||||
</Switch>
|
</Switch>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
export { getTitle, tree, getSidebarData, hasSidebar, Routes }
|
export { tree, getParent, hasSidebar, Routes }
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue