feat: add build target field to routes
feat: move towards single App.js file fix: header component interaction with build target
This commit is contained in:
Sérgio Salgado
Josh Harvey
parent
fc4af4885a
commit
2a2880a7da
10 changed files with 78 additions and 683 deletions
|
|
@ -21,6 +21,8 @@ import styles from './Header.styles'
|
|||
|
||||
const useStyles = makeStyles(styles)
|
||||
|
||||
const buildTarget = process.env.REACT_APP_BUILD_TARGET
|
||||
|
||||
const HAS_UNREAD = gql`
|
||||
query getUnread {
|
||||
hasUnreadNotifications
|
||||
|
|
@ -37,6 +39,7 @@ const Subheader = ({ item, classes, user }) => {
|
|||
<ul className={classes.subheaderUl}>
|
||||
{item.children.map((it, idx) => {
|
||||
if (!R.includes(user.role, it.allowedRoles)) return <></>
|
||||
if (!R.includes(buildTarget, it.targets)) return <></>
|
||||
return (
|
||||
<li key={idx} className={classes.subheaderLi}>
|
||||
<NavLink
|
||||
|
|
@ -129,6 +132,7 @@ const Header = memo(({ tree, user }) => {
|
|||
<ul className={classes.ul}>
|
||||
{tree.map((it, idx) => {
|
||||
if (!R.includes(user.role, it.allowedRoles)) return <></>
|
||||
if (!R.includes(buildTarget, it.targets)) return <></>
|
||||
return (
|
||||
<NavLink
|
||||
key={idx}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,25 @@
|
|||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
|
||||
import App from './App'
|
||||
import * as serviceWorker from './serviceWorker'
|
||||
|
||||
function importBuildTarget() {
|
||||
if (process.env.REACT_APP_BUILD_TARGET === 'LAMASSU') {
|
||||
return import('./lamassu/App')
|
||||
} else if (process.env.REACT_APP_BUILD_TARGET === 'PAZUZ') {
|
||||
return import('./pazuz/App')
|
||||
} else {
|
||||
function checkBuildTarget() {
|
||||
const buildTarget = process.env.REACT_APP_BUILD_TARGET
|
||||
|
||||
if (buildTarget !== 'LAMASSU' && buildTarget !== 'PAZUZ') {
|
||||
return Promise.reject(
|
||||
new Error('No such build target: ' + process.env.REACT_APP_BUILD_TARGET)
|
||||
)
|
||||
}
|
||||
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
importBuildTarget().then(({ default: Environment }) =>
|
||||
checkBuildTarget().then(() =>
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<Environment />
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById('root')
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,179 +0,0 @@
|
|||
import { useQuery } from '@apollo/react-hooks'
|
||||
import CssBaseline from '@material-ui/core/CssBaseline'
|
||||
import Grid from '@material-ui/core/Grid'
|
||||
import Slide from '@material-ui/core/Slide'
|
||||
import {
|
||||
StylesProvider,
|
||||
jssPreset,
|
||||
MuiThemeProvider,
|
||||
makeStyles
|
||||
} from '@material-ui/core/styles'
|
||||
import gql from 'graphql-tag'
|
||||
import { create } from 'jss'
|
||||
import extendJss from 'jss-plugin-extend'
|
||||
import React, { useContext, useState } from 'react'
|
||||
import {
|
||||
useLocation,
|
||||
useHistory,
|
||||
BrowserRouter as Router
|
||||
} from 'react-router-dom'
|
||||
|
||||
import AppContext from 'src/AppContext'
|
||||
import Header from 'src/components/layout/Header'
|
||||
import Sidebar from 'src/components/layout/Sidebar'
|
||||
import TitleSection from 'src/components/layout/TitleSection'
|
||||
import ApolloProvider from 'src/pazuz/apollo/Provider'
|
||||
import { tree, hasSidebar, Routes, getParent } from 'src/pazuz/routing/routes'
|
||||
import global from 'src/styling/global'
|
||||
import theme from 'src/styling/theme'
|
||||
import { backgroundColor, mainWidth } from 'src/styling/variables'
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const whyDidYouRender = require('@welldone-software/why-did-you-render')
|
||||
whyDidYouRender(React)
|
||||
}
|
||||
|
||||
const jss = create({
|
||||
plugins: [extendJss(), ...jssPreset().plugins]
|
||||
})
|
||||
|
||||
const fill = '100%'
|
||||
const flexDirection = 'column'
|
||||
|
||||
const useStyles = makeStyles({
|
||||
...global,
|
||||
root: {
|
||||
backgroundColor,
|
||||
width: fill,
|
||||
minHeight: fill,
|
||||
display: 'flex',
|
||||
flexDirection
|
||||
},
|
||||
wrapper: {
|
||||
width: mainWidth,
|
||||
height: fill,
|
||||
margin: '0 auto',
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection
|
||||
},
|
||||
grid: {
|
||||
flex: 1,
|
||||
height: '100%'
|
||||
},
|
||||
contentWithSidebar: {
|
||||
flex: 1,
|
||||
marginLeft: 48,
|
||||
paddingTop: 15
|
||||
},
|
||||
contentWithoutSidebar: {
|
||||
width: mainWidth
|
||||
}
|
||||
})
|
||||
|
||||
const GET_USER_DATA = gql`
|
||||
query userData {
|
||||
userData {
|
||||
id
|
||||
username
|
||||
role
|
||||
enabled
|
||||
last_accessed
|
||||
last_accessed_from
|
||||
last_accessed_address
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const Main = () => {
|
||||
const classes = useStyles()
|
||||
const location = useLocation()
|
||||
const history = useHistory()
|
||||
const { wizardTested, userData, setUserData } = useContext(AppContext)
|
||||
|
||||
const { loading } = useQuery(GET_USER_DATA, {
|
||||
onCompleted: userResponse => {
|
||||
if (!userData && userResponse?.userData)
|
||||
setUserData(userResponse.userData)
|
||||
}
|
||||
})
|
||||
|
||||
const route = location.pathname
|
||||
|
||||
const sidebar = hasSidebar(route)
|
||||
const parent = sidebar ? getParent(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 && userData && (
|
||||
<Header tree={tree} user={userData} />
|
||||
)}
|
||||
<main className={classes.wrapper}>
|
||||
{sidebar && !is404 && wizardTested && (
|
||||
<Slide
|
||||
direction="left"
|
||||
in={true}
|
||||
mountOnEnter
|
||||
unmountOnExit
|
||||
children={
|
||||
<div>
|
||||
<TitleSection title={parent.title}></TitleSection>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Grid container className={classes.grid}>
|
||||
{sidebar && !is404 && wizardTested && (
|
||||
<Sidebar
|
||||
data={parent.children}
|
||||
isSelected={isSelected}
|
||||
displayName={it => it.label}
|
||||
onClick={onClick}
|
||||
/>
|
||||
)}
|
||||
<div className={contentClassName}>{!loading && <Routes />}</div>
|
||||
</Grid>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const App = () => {
|
||||
const [wizardTested, setWizardTested] = useState(false)
|
||||
const [userData, setUserData] = useState(null)
|
||||
|
||||
const setRole = role => {
|
||||
if (userData && userData.role !== role) {
|
||||
setUserData({ ...userData, role })
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AppContext.Provider
|
||||
value={{ wizardTested, setWizardTested, userData, setUserData, setRole }}>
|
||||
<Router>
|
||||
<ApolloProvider>
|
||||
<StylesProvider jss={jss}>
|
||||
<MuiThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<Main />
|
||||
</MuiThemeProvider>
|
||||
</StylesProvider>
|
||||
</ApolloProvider>
|
||||
</Router>
|
||||
</AppContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
import { ApolloProvider } from '@apollo/react-hooks'
|
||||
import { InMemoryCache } from 'apollo-cache-inmemory'
|
||||
import { ApolloClient } from 'apollo-client'
|
||||
import { ApolloLink } from 'apollo-link'
|
||||
import { onError } from 'apollo-link-error'
|
||||
import { HttpLink } from 'apollo-link-http'
|
||||
import React, { useContext } from 'react'
|
||||
import { useHistory, useLocation } from 'react-router-dom'
|
||||
|
||||
import AppContext from 'src/AppContext'
|
||||
|
||||
const URI =
|
||||
process.env.NODE_ENV === 'development' ? 'https://localhost:8070' : ''
|
||||
|
||||
const getClient = (history, location, setUserData, setRole) =>
|
||||
new ApolloClient({
|
||||
link: ApolloLink.from([
|
||||
onError(({ graphQLErrors, networkError }) => {
|
||||
if (graphQLErrors)
|
||||
graphQLErrors.forEach(({ message, locations, path, extensions }) => {
|
||||
if (extensions?.code === 'UNAUTHENTICATED') {
|
||||
setUserData(null)
|
||||
if (location.pathname !== '/login') history.push('/login')
|
||||
}
|
||||
console.log(
|
||||
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
|
||||
)
|
||||
})
|
||||
if (networkError) console.log(`[Network error]: ${networkError}`)
|
||||
}),
|
||||
new ApolloLink((operation, forward) => {
|
||||
return forward(operation).map(response => {
|
||||
const context = operation.getContext()
|
||||
const {
|
||||
response: { headers }
|
||||
} = context
|
||||
|
||||
if (headers) {
|
||||
const role = headers.get('role')
|
||||
setRole(role)
|
||||
}
|
||||
|
||||
return response
|
||||
})
|
||||
}),
|
||||
new HttpLink({
|
||||
credentials: 'include',
|
||||
uri: `${URI}/graphql`
|
||||
})
|
||||
]),
|
||||
cache: new InMemoryCache(),
|
||||
defaultOptions: {
|
||||
watchQuery: {
|
||||
fetchPolicy: 'no-cache',
|
||||
errorPolicy: 'ignore'
|
||||
},
|
||||
query: {
|
||||
fetchPolicy: 'no-cache',
|
||||
errorPolicy: 'all'
|
||||
},
|
||||
mutate: {
|
||||
errorPolicy: 'all'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const Provider = ({ children }) => {
|
||||
const history = useHistory()
|
||||
const location = useLocation()
|
||||
const { setUserData, setRole } = useContext(AppContext)
|
||||
const client = getClient(history, location, setUserData, setRole)
|
||||
|
||||
return <ApolloProvider client={client}>{children}</ApolloProvider>
|
||||
}
|
||||
|
||||
export default Provider
|
||||
export { URI }
|
||||
|
|
@ -1,417 +0,0 @@
|
|||
import Fade from '@material-ui/core/Fade'
|
||||
import Slide from '@material-ui/core/Slide'
|
||||
import { makeStyles } from '@material-ui/core/styles'
|
||||
import * as R from 'ramda'
|
||||
import React, { useContext } from 'react'
|
||||
import {
|
||||
matchPath,
|
||||
Redirect,
|
||||
Switch,
|
||||
useHistory,
|
||||
useLocation
|
||||
} from 'react-router-dom'
|
||||
|
||||
import AppContext from 'src/AppContext'
|
||||
import Login from 'src/pages/Authentication/Login'
|
||||
import Register from 'src/pages/Authentication/Register'
|
||||
import Reset2FA from 'src/pages/Authentication/Reset2FA'
|
||||
import ResetPassword from 'src/pages/Authentication/ResetPassword'
|
||||
import Blacklist from 'src/pages/Blacklist'
|
||||
import Cashout from 'src/pages/Cashout'
|
||||
import Commissions from 'src/pages/Commissions'
|
||||
// import ConfigMigration from 'src/pages/ConfigMigration'
|
||||
import { Customers, CustomerProfile } from 'src/pages/Customers'
|
||||
import Dashboard from 'src/pages/Dashboard'
|
||||
import Funding from 'src/pages/Funding'
|
||||
import Locales from 'src/pages/Locales'
|
||||
import PromoCodes from 'src/pages/LoyaltyPanel/PromoCodes'
|
||||
import MachineLogs from 'src/pages/MachineLogs'
|
||||
import Machines from 'src/pages/Machines'
|
||||
import CashCassettes from 'src/pages/Maintenance/CashCassettes'
|
||||
import MachineStatus from 'src/pages/Maintenance/MachineStatus'
|
||||
import Notifications from 'src/pages/Notifications/Notifications'
|
||||
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 SessionManagement from 'src/pages/SessionManagement/SessionManagement'
|
||||
import Transactions from 'src/pages/Transactions/Transactions'
|
||||
import Triggers from 'src/pages/Triggers'
|
||||
import UserManagement from 'src/pages/UserManagement/UserManagement'
|
||||
import Wizard from 'src/pages/Wizard'
|
||||
import ATMWallet from 'src/pazuz/pages/ATMWallet/ATMWallet'
|
||||
import PrivateRoute from 'src/routing/PrivateRoute'
|
||||
import PublicRoute from 'src/routing/PublicRoute'
|
||||
import { ROLES } from 'src/routing/utils'
|
||||
import { namespaces } from 'src/utils/config'
|
||||
|
||||
const useStyles = makeStyles({
|
||||
wrapper: {
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%'
|
||||
}
|
||||
})
|
||||
|
||||
const tree = [
|
||||
{
|
||||
key: 'transactions',
|
||||
label: 'Transactions',
|
||||
route: '/transactions',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: Transactions
|
||||
},
|
||||
{
|
||||
key: 'maintenance',
|
||||
label: 'Maintenance',
|
||||
route: '/maintenance',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
get component() {
|
||||
return () => <Redirect to={this.children[0].route} />
|
||||
},
|
||||
children: [
|
||||
{
|
||||
key: 'cash_cassettes',
|
||||
label: 'Cash Cassettes',
|
||||
route: '/maintenance/cash-cassettes',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: CashCassettes
|
||||
},
|
||||
{
|
||||
key: 'funding',
|
||||
label: 'Funding',
|
||||
route: '/maintenance/funding',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: Funding
|
||||
},
|
||||
{
|
||||
key: 'logs',
|
||||
label: 'Machine Logs',
|
||||
route: '/maintenance/logs',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: MachineLogs
|
||||
},
|
||||
{
|
||||
key: 'machine-status',
|
||||
label: 'Machine Status',
|
||||
route: '/maintenance/machine-status',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: MachineStatus
|
||||
},
|
||||
{
|
||||
key: 'server-logs',
|
||||
label: 'Server',
|
||||
route: '/maintenance/server-logs',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: ServerLogs
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'settings',
|
||||
label: 'Settings',
|
||||
route: '/settings',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
get component() {
|
||||
return () => <Redirect to={this.children[0].route} />
|
||||
},
|
||||
children: [
|
||||
{
|
||||
key: namespaces.COMMISSIONS,
|
||||
label: 'Commissions',
|
||||
route: '/settings/commissions',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: Commissions
|
||||
},
|
||||
{
|
||||
key: namespaces.LOCALE,
|
||||
label: 'Locales',
|
||||
route: '/settings/locale',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: Locales
|
||||
},
|
||||
{
|
||||
key: namespaces.CASH_OUT,
|
||||
label: 'Cash-out',
|
||||
route: '/settings/cash-out',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: Cashout
|
||||
},
|
||||
{
|
||||
key: namespaces.NOTIFICATIONS,
|
||||
label: 'Notifications',
|
||||
route: '/settings/notifications',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: Notifications
|
||||
},
|
||||
{
|
||||
key: 'services',
|
||||
label: '3rd party services',
|
||||
route: '/settings/3rd-party-services',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: Services
|
||||
},
|
||||
{
|
||||
key: namespaces.OPERATOR_INFO,
|
||||
label: 'Operator Info',
|
||||
route: '/settings/operator-info',
|
||||
title: 'Operator Information',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
get component() {
|
||||
return () => (
|
||||
<Redirect
|
||||
to={{
|
||||
pathname: this.children[0].route,
|
||||
state: { prev: this.state?.prev }
|
||||
}}
|
||||
/>
|
||||
)
|
||||
},
|
||||
children: [
|
||||
{
|
||||
key: 'contact-info',
|
||||
label: 'Contact information',
|
||||
route: '/settings/operator-info/contact-info',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: ContactInfo
|
||||
},
|
||||
{
|
||||
key: 'receipt-printing',
|
||||
label: 'Receipt',
|
||||
route: '/settings/operator-info/receipt-printing',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: ReceiptPrinting
|
||||
},
|
||||
{
|
||||
key: 'coin-atm-radar',
|
||||
label: 'Coin ATM Radar',
|
||||
route: '/settings/operator-info/coin-atm-radar',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: CoinAtmRadar
|
||||
},
|
||||
{
|
||||
key: 'terms-conditions',
|
||||
label: 'Terms & Conditions',
|
||||
route: '/settings/operator-info/terms-conditions',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: TermsConditions
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'compliance',
|
||||
label: 'Compliance',
|
||||
route: '/compliance',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
get component() {
|
||||
return () => <Redirect to={this.children[0].route} />
|
||||
},
|
||||
children: [
|
||||
{
|
||||
key: 'triggers',
|
||||
label: 'Triggers',
|
||||
route: '/compliance/triggers',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: Triggers
|
||||
},
|
||||
{
|
||||
key: 'customers',
|
||||
label: 'Customers',
|
||||
route: '/compliance/customers',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: Customers
|
||||
},
|
||||
{
|
||||
key: 'blacklist',
|
||||
label: 'Blacklist',
|
||||
route: '/compliance/blacklist',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: Blacklist
|
||||
},
|
||||
{
|
||||
key: 'promo-codes',
|
||||
label: 'Promo Codes',
|
||||
route: '/compliance/loyalty/codes',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: PromoCodes
|
||||
},
|
||||
{
|
||||
key: 'customer',
|
||||
route: '/compliance/customer/:id',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: CustomerProfile
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'accounting',
|
||||
label: 'Accounting',
|
||||
route: '/accounting',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
get component() {
|
||||
return () => <Redirect to={this.children[0].route} />
|
||||
},
|
||||
children: [
|
||||
{
|
||||
key: 'atmwallets',
|
||||
label: 'ATM Wallets',
|
||||
route: '/accounting/wallets',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
component: ATMWallet
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'system',
|
||||
label: 'System',
|
||||
route: '/system',
|
||||
allowedRoles: [ROLES.SUPERUSER],
|
||||
get component() {
|
||||
return () => <Redirect to={this.children[0].route} />
|
||||
},
|
||||
children: [
|
||||
{
|
||||
key: 'user-management',
|
||||
label: 'User Management',
|
||||
route: '/system/user-management',
|
||||
allowedRoles: [ROLES.SUPERUSER],
|
||||
component: UserManagement
|
||||
},
|
||||
{
|
||||
key: 'session-management',
|
||||
label: 'Session Management',
|
||||
route: '/system/session-management',
|
||||
allowedRoles: [ROLES.SUPERUSER],
|
||||
component: SessionManagement
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const map = R.map(R.when(R.has('children'), R.prop('children')))
|
||||
const mappedRoutes = R.compose(R.flatten, map)(tree)
|
||||
const parentRoutes = R.filter(R.has('children'))(mappedRoutes).concat(
|
||||
R.filter(R.has('children'))(tree)
|
||||
)
|
||||
const leafRoutes = R.compose(R.flatten, map)(mappedRoutes)
|
||||
|
||||
const flattened = R.concat(leafRoutes, parentRoutes)
|
||||
|
||||
const hasSidebar = route =>
|
||||
R.any(r => r.route === route)(
|
||||
R.compose(
|
||||
R.flatten,
|
||||
R.map(R.prop('children')),
|
||||
R.filter(R.has('children'))
|
||||
)(mappedRoutes)
|
||||
)
|
||||
|
||||
const getParent = route =>
|
||||
R.find(
|
||||
R.propEq(
|
||||
'route',
|
||||
R.dropLast(
|
||||
1,
|
||||
R.dropLastWhile(x => x !== '/', route)
|
||||
)
|
||||
)
|
||||
)(flattened)
|
||||
|
||||
const Routes = () => {
|
||||
const classes = useStyles()
|
||||
|
||||
const history = useHistory()
|
||||
const location = useLocation()
|
||||
const { wizardTested, userData } = useContext(AppContext)
|
||||
|
||||
const dontTriggerPages = [
|
||||
'/404',
|
||||
'/register',
|
||||
'/wizard',
|
||||
'/login',
|
||||
'/register',
|
||||
'/resetpassword',
|
||||
'/reset2fa'
|
||||
]
|
||||
|
||||
if (!wizardTested && !R.contains(location.pathname)(dontTriggerPages)) {
|
||||
history.push('/wizard')
|
||||
return null
|
||||
}
|
||||
|
||||
const getFilteredRoutes = () => {
|
||||
if (!userData) return []
|
||||
return flattened.filter(value => {
|
||||
const keys = value.allowedRoles
|
||||
return R.includes(userData.role, keys)
|
||||
})
|
||||
}
|
||||
|
||||
const Transition = location.state ? Slide : Fade
|
||||
|
||||
const transitionProps =
|
||||
Transition === Slide
|
||||
? {
|
||||
direction:
|
||||
R.findIndex(R.propEq('route', location.state.prev))(leafRoutes) >
|
||||
R.findIndex(R.propEq('route', location.pathname))(leafRoutes)
|
||||
? 'right'
|
||||
: 'left'
|
||||
}
|
||||
: { timeout: 400 }
|
||||
|
||||
return (
|
||||
<Switch>
|
||||
<PrivateRoute exact path="/">
|
||||
<Redirect to={{ pathname: '/dashboard' }} />
|
||||
</PrivateRoute>
|
||||
<PrivateRoute path={'/dashboard'}>
|
||||
<Transition
|
||||
className={classes.wrapper}
|
||||
{...transitionProps}
|
||||
in={true}
|
||||
mountOnEnter
|
||||
unmountOnExit
|
||||
children={
|
||||
<div className={classes.wrapper}>
|
||||
<Dashboard />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</PrivateRoute>
|
||||
<PrivateRoute path="/machines" component={Machines} />
|
||||
<PrivateRoute path="/wizard" component={Wizard} />
|
||||
<PublicRoute path="/register" component={Register} />
|
||||
{/* <Route path="/configmigration" component={ConfigMigration} /> */}
|
||||
<PublicRoute path="/login" restricted component={Login} />
|
||||
<PublicRoute path="/resetpassword" component={ResetPassword} />
|
||||
<PublicRoute path="/reset2fa" component={Reset2FA} />
|
||||
{getFilteredRoutes().map(({ route, component: Page, key }) => (
|
||||
<PrivateRoute path={route} key={key}>
|
||||
<Transition
|
||||
className={classes.wrapper}
|
||||
{...transitionProps}
|
||||
in={!!matchPath(location.pathname, { path: route })}
|
||||
mountOnEnter
|
||||
unmountOnExit
|
||||
children={
|
||||
<div className={classes.wrapper}>
|
||||
<Page name={key} />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</PrivateRoute>
|
||||
))}
|
||||
<PublicRoute path="/404" />
|
||||
<PublicRoute path="*">
|
||||
<Redirect to={{ pathname: '/404' }} />
|
||||
</PublicRoute>
|
||||
</Switch>
|
||||
)
|
||||
}
|
||||
export { tree, getParent, hasSidebar, Routes }
|
||||
|
|
@ -12,6 +12,7 @@ import {
|
|||
} from 'react-router-dom'
|
||||
|
||||
import AppContext from 'src/AppContext'
|
||||
import ATMWallet from 'src/pages/ATMWallet/ATMWallet'
|
||||
import Login from 'src/pages/Authentication/Login'
|
||||
import Register from 'src/pages/Authentication/Register'
|
||||
import Reset2FA from 'src/pages/Authentication/Reset2FA'
|
||||
|
|
@ -46,7 +47,7 @@ import { namespaces } from 'src/utils/config'
|
|||
|
||||
import PrivateRoute from './PrivateRoute'
|
||||
import PublicRoute from './PublicRoute'
|
||||
import { ROLES } from './utils'
|
||||
import { BUILD_TARGETS, ROLES } from './utils'
|
||||
|
||||
const useStyles = makeStyles({
|
||||
wrapper: {
|
||||
|
|
@ -63,6 +64,7 @@ const tree = [
|
|||
label: 'Transactions',
|
||||
route: '/transactions',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: Transactions
|
||||
},
|
||||
{
|
||||
|
|
@ -70,6 +72,7 @@ const tree = [
|
|||
label: 'Maintenance',
|
||||
route: '/maintenance',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
get component() {
|
||||
return () => <Redirect to={this.children[0].route} />
|
||||
},
|
||||
|
|
@ -79,6 +82,7 @@ const tree = [
|
|||
label: 'Cash Cassettes',
|
||||
route: '/maintenance/cash-cassettes',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: CashCassettes
|
||||
},
|
||||
{
|
||||
|
|
@ -86,6 +90,7 @@ const tree = [
|
|||
label: 'Funding',
|
||||
route: '/maintenance/funding',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: Funding
|
||||
},
|
||||
{
|
||||
|
|
@ -93,6 +98,7 @@ const tree = [
|
|||
label: 'Machine Logs',
|
||||
route: '/maintenance/logs',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: MachineLogs
|
||||
},
|
||||
{
|
||||
|
|
@ -100,6 +106,7 @@ const tree = [
|
|||
label: 'Machine Status',
|
||||
route: '/maintenance/machine-status',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: MachineStatus
|
||||
},
|
||||
{
|
||||
|
|
@ -107,6 +114,7 @@ const tree = [
|
|||
label: 'Server',
|
||||
route: '/maintenance/server-logs',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: ServerLogs
|
||||
}
|
||||
]
|
||||
|
|
@ -116,6 +124,7 @@ const tree = [
|
|||
label: 'Settings',
|
||||
route: '/settings',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
get component() {
|
||||
return () => <Redirect to={this.children[0].route} />
|
||||
},
|
||||
|
|
@ -125,6 +134,7 @@ const tree = [
|
|||
label: 'Commissions',
|
||||
route: '/settings/commissions',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: Commissions
|
||||
},
|
||||
{
|
||||
|
|
@ -132,6 +142,7 @@ const tree = [
|
|||
label: 'Locales',
|
||||
route: '/settings/locale',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: Locales
|
||||
},
|
||||
{
|
||||
|
|
@ -139,6 +150,7 @@ const tree = [
|
|||
label: 'Cash-out',
|
||||
route: '/settings/cash-out',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: Cashout
|
||||
},
|
||||
{
|
||||
|
|
@ -146,6 +158,7 @@ const tree = [
|
|||
label: 'Notifications',
|
||||
route: '/settings/notifications',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: Notifications
|
||||
},
|
||||
{
|
||||
|
|
@ -153,6 +166,7 @@ const tree = [
|
|||
label: '3rd party services',
|
||||
route: '/settings/3rd-party-services',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: Services
|
||||
},
|
||||
{
|
||||
|
|
@ -160,6 +174,7 @@ const tree = [
|
|||
label: 'Wallet',
|
||||
route: '/settings/wallet-settings',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU],
|
||||
component: WalletSettings
|
||||
},
|
||||
{
|
||||
|
|
@ -168,6 +183,7 @@ const tree = [
|
|||
route: '/settings/operator-info',
|
||||
title: 'Operator Information',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
get component() {
|
||||
return () => (
|
||||
<Redirect
|
||||
|
|
@ -184,6 +200,7 @@ const tree = [
|
|||
label: 'Contact information',
|
||||
route: '/settings/operator-info/contact-info',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: ContactInfo
|
||||
},
|
||||
{
|
||||
|
|
@ -191,6 +208,7 @@ const tree = [
|
|||
label: 'Receipt',
|
||||
route: '/settings/operator-info/receipt-printing',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: ReceiptPrinting
|
||||
},
|
||||
{
|
||||
|
|
@ -198,6 +216,7 @@ const tree = [
|
|||
label: 'Coin ATM Radar',
|
||||
route: '/settings/operator-info/coin-atm-radar',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: CoinAtmRadar
|
||||
},
|
||||
{
|
||||
|
|
@ -205,6 +224,7 @@ const tree = [
|
|||
label: 'Terms & Conditions',
|
||||
route: '/settings/operator-info/terms-conditions',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: TermsConditions
|
||||
}
|
||||
]
|
||||
|
|
@ -216,6 +236,7 @@ const tree = [
|
|||
label: 'Compliance',
|
||||
route: '/compliance',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
get component() {
|
||||
return () => <Redirect to={this.children[0].route} />
|
||||
},
|
||||
|
|
@ -225,6 +246,7 @@ const tree = [
|
|||
label: 'Triggers',
|
||||
route: '/compliance/triggers',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: Triggers
|
||||
},
|
||||
{
|
||||
|
|
@ -232,6 +254,7 @@ const tree = [
|
|||
label: 'Customers',
|
||||
route: '/compliance/customers',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: Customers
|
||||
},
|
||||
{
|
||||
|
|
@ -239,6 +262,7 @@ const tree = [
|
|||
label: 'Blacklist',
|
||||
route: '/compliance/blacklist',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: Blacklist
|
||||
},
|
||||
{
|
||||
|
|
@ -246,21 +270,44 @@ const tree = [
|
|||
label: 'Promo Codes',
|
||||
route: '/compliance/loyalty/codes',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: PromoCodes
|
||||
},
|
||||
{
|
||||
key: 'customer',
|
||||
route: '/compliance/customer/:id',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: CustomerProfile
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'accounting',
|
||||
label: 'Accounting',
|
||||
route: '/accounting',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.PAZUZ],
|
||||
get component() {
|
||||
return () => <Redirect to={this.children[0].route} />
|
||||
},
|
||||
children: [
|
||||
{
|
||||
key: 'atmwallets',
|
||||
label: 'ATM Wallets',
|
||||
route: '/accounting/wallets',
|
||||
allowedRoles: [ROLES.USER, ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.PAZUZ],
|
||||
component: ATMWallet
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'system',
|
||||
label: 'System',
|
||||
route: '/system',
|
||||
allowedRoles: [ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
get component() {
|
||||
return () => <Redirect to={this.children[0].route} />
|
||||
},
|
||||
|
|
@ -270,6 +317,7 @@ const tree = [
|
|||
label: 'User Management',
|
||||
route: '/system/user-management',
|
||||
allowedRoles: [ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: UserManagement
|
||||
},
|
||||
{
|
||||
|
|
@ -277,6 +325,7 @@ const tree = [
|
|||
label: 'Session Management',
|
||||
route: '/system/session-management',
|
||||
allowedRoles: [ROLES.SUPERUSER],
|
||||
targets: [BUILD_TARGETS.LAMASSU, BUILD_TARGETS.PAZUZ],
|
||||
component: SessionManagement
|
||||
}
|
||||
]
|
||||
|
|
@ -337,10 +386,19 @@ const Routes = () => {
|
|||
const getFilteredRoutes = () => {
|
||||
if (!userData) return []
|
||||
|
||||
return flattened.filter(value => {
|
||||
const currentBuildTarget = process.env.REACT_APP_BUILD_TARGET
|
||||
|
||||
const roleFilter = flattened.filter(value => {
|
||||
const keys = value.allowedRoles
|
||||
return R.includes(userData.role, keys)
|
||||
})
|
||||
|
||||
const buildFilter = roleFilter.filter(value => {
|
||||
const keys = value.targets
|
||||
return R.includes(currentBuildTarget, keys)
|
||||
})
|
||||
|
||||
return buildFilter
|
||||
}
|
||||
|
||||
const Transition = location.state ? Slide : Fade
|
||||
|
|
|
|||
|
|
@ -9,3 +9,8 @@ export const ROLES = {
|
|||
USER: 'user',
|
||||
SUPERUSER: 'superuser'
|
||||
}
|
||||
|
||||
export const BUILD_TARGETS = {
|
||||
LAMASSU: 'LAMASSU',
|
||||
PAZUZ: 'PAZUZ'
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue