feat: initial Pazuz react setup
This commit is contained in:
Sérgio Salgado
Josh Harvey
parent
dd0abc8a8b
commit
007c51472c
3 changed files with 539 additions and 0 deletions
137
new-lamassu-admin/src/pazuz/App.js
Normal file
137
new-lamassu-admin/src/pazuz/App.js
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
import CssBaseline from '@material-ui/core/CssBaseline'
|
||||
import Grid from '@material-ui/core/Grid'
|
||||
import {
|
||||
StylesProvider,
|
||||
jssPreset,
|
||||
MuiThemeProvider,
|
||||
makeStyles
|
||||
} from '@material-ui/core/styles'
|
||||
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 Main = () => {
|
||||
const classes = useStyles()
|
||||
const location = useLocation()
|
||||
const history = useHistory()
|
||||
const { wizardTested } = useContext(AppContext)
|
||||
|
||||
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 && <Header tree={tree} />}
|
||||
<main className={classes.wrapper}>
|
||||
{sidebar && !is404 && wizardTested && (
|
||||
<TitleSection title={parent.title}></TitleSection>
|
||||
)}
|
||||
|
||||
<Grid container className={classes.grid}>
|
||||
{sidebar && !is404 && wizardTested && (
|
||||
<Sidebar
|
||||
data={parent.children}
|
||||
isSelected={isSelected}
|
||||
displayName={it => it.label}
|
||||
onClick={onClick}
|
||||
/>
|
||||
)}
|
||||
<div className={contentClassName}>
|
||||
<Routes />
|
||||
</div>
|
||||
</Grid>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const App = () => {
|
||||
const [wizardTested, setWizardTested] = useState(false)
|
||||
|
||||
return (
|
||||
<AppContext.Provider value={{ wizardTested, setWizardTested }}>
|
||||
<Router>
|
||||
<ApolloProvider>
|
||||
<StylesProvider jss={jss}>
|
||||
<MuiThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<Main />
|
||||
</MuiThemeProvider>
|
||||
</StylesProvider>
|
||||
</ApolloProvider>
|
||||
</Router>
|
||||
</AppContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
57
new-lamassu-admin/src/pazuz/apollo/Provider.js
Normal file
57
new-lamassu-admin/src/pazuz/apollo/Provider.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
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 from 'react'
|
||||
import { useHistory, useLocation } from 'react-router-dom'
|
||||
|
||||
const URI =
|
||||
process.env.NODE_ENV === 'development' ? 'https://localhost:8070' : ''
|
||||
|
||||
const getClient = (history, location) =>
|
||||
new ApolloClient({
|
||||
link: ApolloLink.from([
|
||||
onError(({ graphQLErrors, networkError }) => {
|
||||
if (graphQLErrors)
|
||||
graphQLErrors.forEach(({ message, locations, path, extensions }) => {
|
||||
if (extensions?.code === 'UNAUTHENTICATED') {
|
||||
if (location.pathname !== '/404') history.push('/404')
|
||||
}
|
||||
console.log(
|
||||
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
|
||||
)
|
||||
})
|
||||
if (networkError) console.log(`[Network error]: ${networkError}`)
|
||||
}),
|
||||
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 client = getClient(history, location)
|
||||
return <ApolloProvider client={client}>{children}</ApolloProvider>
|
||||
}
|
||||
|
||||
export default Provider
|
||||
export { URI }
|
||||
345
new-lamassu-admin/src/pazuz/routing/routes.js
Normal file
345
new-lamassu-admin/src/pazuz/routing/routes.js
Normal file
|
|
@ -0,0 +1,345 @@
|
|||
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,
|
||||
Route,
|
||||
Redirect,
|
||||
Switch,
|
||||
useHistory,
|
||||
useLocation
|
||||
} from 'react-router-dom'
|
||||
|
||||
import AppContext from 'src/AppContext'
|
||||
import AuthRegister from 'src/pages/AuthRegister'
|
||||
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 Transactions from 'src/pages/Transactions/Transactions'
|
||||
import Triggers from 'src/pages/Triggers'
|
||||
import Wizard from 'src/pages/Wizard'
|
||||
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',
|
||||
component: Transactions
|
||||
},
|
||||
{
|
||||
key: 'maintenance',
|
||||
label: 'Maintenance',
|
||||
route: '/maintenance',
|
||||
get component() {
|
||||
return () => <Redirect to={this.children[0].route} />
|
||||
},
|
||||
children: [
|
||||
{
|
||||
key: 'cash_cassettes',
|
||||
label: 'Cash Cassettes',
|
||||
route: '/maintenance/cash-cassettes',
|
||||
component: CashCassettes
|
||||
},
|
||||
{
|
||||
key: 'funding',
|
||||
label: 'Funding',
|
||||
route: '/maintenance/funding',
|
||||
component: Funding
|
||||
},
|
||||
{
|
||||
key: 'logs',
|
||||
label: 'Machine Logs',
|
||||
route: '/maintenance/logs',
|
||||
component: MachineLogs
|
||||
},
|
||||
{
|
||||
key: 'machine-status',
|
||||
label: 'Machine Status',
|
||||
route: '/maintenance/machine-status',
|
||||
component: MachineStatus
|
||||
},
|
||||
{
|
||||
key: 'server-logs',
|
||||
label: 'Server',
|
||||
route: '/maintenance/server-logs',
|
||||
component: ServerLogs
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'settings',
|
||||
label: 'Settings',
|
||||
route: '/settings',
|
||||
get component() {
|
||||
return () => <Redirect to={this.children[0].route} />
|
||||
},
|
||||
children: [
|
||||
{
|
||||
key: namespaces.COMMISSIONS,
|
||||
label: 'Commissions',
|
||||
route: '/settings/commissions',
|
||||
component: Commissions
|
||||
},
|
||||
{
|
||||
key: namespaces.LOCALE,
|
||||
label: 'Locales',
|
||||
route: '/settings/locale',
|
||||
component: Locales
|
||||
},
|
||||
{
|
||||
key: namespaces.CASH_OUT,
|
||||
label: 'Cash-out',
|
||||
route: '/settings/cash-out',
|
||||
component: Cashout
|
||||
},
|
||||
{
|
||||
key: namespaces.NOTIFICATIONS,
|
||||
label: 'Notifications',
|
||||
route: '/settings/notifications',
|
||||
component: Notifications
|
||||
},
|
||||
{
|
||||
key: 'services',
|
||||
label: '3rd party services',
|
||||
route: '/settings/3rd-party-services',
|
||||
component: Services
|
||||
},
|
||||
// {
|
||||
// key: namespaces.WALLETS,
|
||||
// label: 'Wallet',
|
||||
// route: '/settings/wallet-settings',
|
||||
// component: WalletSettings
|
||||
// },
|
||||
{
|
||||
key: namespaces.OPERATOR_INFO,
|
||||
label: 'Operator Info',
|
||||
route: '/settings/operator-info',
|
||||
title: 'Operator Information',
|
||||
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',
|
||||
component: ContactInfo
|
||||
},
|
||||
{
|
||||
key: 'receipt-printing',
|
||||
label: 'Receipt',
|
||||
route: '/settings/operator-info/receipt-printing',
|
||||
component: ReceiptPrinting
|
||||
},
|
||||
{
|
||||
key: 'coin-atm-radar',
|
||||
label: 'Coin ATM Radar',
|
||||
route: '/settings/operator-info/coin-atm-radar',
|
||||
component: CoinAtmRadar
|
||||
},
|
||||
{
|
||||
key: 'terms-conditions',
|
||||
label: 'Terms & Conditions',
|
||||
route: '/settings/operator-info/terms-conditions',
|
||||
component: TermsConditions
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'compliance',
|
||||
label: 'Compliance',
|
||||
route: '/compliance',
|
||||
get component() {
|
||||
return () => <Redirect to={this.children[0].route} />
|
||||
},
|
||||
children: [
|
||||
{
|
||||
key: 'triggers',
|
||||
label: 'Triggers',
|
||||
route: '/compliance/triggers',
|
||||
component: Triggers
|
||||
},
|
||||
{
|
||||
key: 'customers',
|
||||
label: 'Customers',
|
||||
route: '/compliance/customers',
|
||||
component: Customers
|
||||
},
|
||||
{
|
||||
key: 'blacklist',
|
||||
label: 'Blacklist',
|
||||
route: '/compliance/blacklist',
|
||||
component: Blacklist
|
||||
},
|
||||
{
|
||||
key: 'promo-codes',
|
||||
label: 'Promo Codes',
|
||||
route: '/compliance/loyalty/codes',
|
||||
component: PromoCodes
|
||||
},
|
||||
{
|
||||
key: 'customer',
|
||||
route: '/compliance/customer/:id',
|
||||
component: CustomerProfile
|
||||
}
|
||||
]
|
||||
}
|
||||
// {
|
||||
// key: 'system',
|
||||
// label: 'System',
|
||||
// route: '/system',
|
||||
// get component() {
|
||||
// return () => <Redirect to={this.children[0].route} />
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// key: 'token-management',
|
||||
// label: 'Token Management',
|
||||
// route: '/system/token-management',
|
||||
// component: TokenManagement
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
]
|
||||
|
||||
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 } = useContext(AppContext)
|
||||
|
||||
const dontTriggerPages = ['/404', '/register', '/wizard']
|
||||
|
||||
if (!wizardTested && !R.contains(location.pathname)(dontTriggerPages)) {
|
||||
history.push('/wizard')
|
||||
}
|
||||
|
||||
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>
|
||||
<Route exact path="/">
|
||||
<Redirect to={{ pathname: '/dashboard' }} />
|
||||
</Route>
|
||||
<Route path={'/dashboard'}>
|
||||
<Transition
|
||||
className={classes.wrapper}
|
||||
{...transitionProps}
|
||||
in={true}
|
||||
mountOnEnter
|
||||
unmountOnExit
|
||||
children={
|
||||
<div className={classes.wrapper}>
|
||||
<Dashboard />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Route>
|
||||
<Route path="/machines" component={Machines} />
|
||||
<Route path="/wizard" component={Wizard} />
|
||||
<Route path="/register" component={AuthRegister} />
|
||||
<Route path="/configmigration" component={ConfigMigration} />
|
||||
{flattened.map(({ route, component: Page, key }) => (
|
||||
<Route 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>
|
||||
}
|
||||
/>
|
||||
</Route>
|
||||
))}
|
||||
<Route path="/404" />
|
||||
<Route path="*">
|
||||
<Redirect to={{ pathname: '/404' }} />
|
||||
</Route>
|
||||
</Switch>
|
||||
)
|
||||
}
|
||||
export { tree, getParent, hasSidebar, Routes }
|
||||
Loading…
Add table
Add a link
Reference in a new issue