content: // starting point for the frontend
  import React from 'react'
  import ReactDOM from 'react-dom'
  import { Provider } from 'react-redux'
  import store from 'store/store'
  import { parseHash } from 'utils/routing'
  import {initExpiryWatcher} from 'utils/expiry-watcher'
  import SiteHeader from 'containers/site-header'
  import ShipmentsPage from 'containers/shipments-page'
  import WithAuthWrapper from 'containers/with-auth'
  import ShipmentPage from 'containers/shipment-page'
  import PrintShipmentPage from 'containers/print-shipment-page'
  import StockCardPage from 'containers/stockcard-page'
  import CurrentStockPage from 'containers/current-stock-page'
  import ReportsPage from 'containers/reports-page'
  import EditShipmentPage from 'containers/edit-shipment-page'
  import LocationsPage from 'containers/locations-page'
  import UsersPage from 'containers/users-page'
  import UserPage from 'containers/user-page'
  import NewUserPage from 'containers/new-user-page'
  import OfflineSetupPage from 'containers/offline-setup-page'
  import SiteFooter from 'components/site-footer'
  import DatabasesContainer from 'admin/databases-container'
  import ShipmentWithHistory from 'containers/shipment-with-history'
  
  require('./styles/app.less')
  
  // custom router https://hackernoon.com/routing-in-react-the-uncomplicated-way-b2c5ffaee997
  // & https://medium.freecodecamp.org/you-might-not-need-react-router-38673620f3d
  
  const PAGES = {
    '/': { component: ShipmentsPage, paramKeys: ['offset'] },
    'shipment': { component: ShipmentPage, paramKeys: ['id', 'print'] },
    'history/shipment': { component: ShipmentWithHistory, paramKeys: ['id'] },
    'shipment/edit': { component: EditShipmentPage, paramKeys: ['shipmentType', 'id'] },
    'shipment/print': { component: PrintShipmentPage, paramKeys: ['id', 'reversed'] },
    'stockcard': { component: StockCardPage, paramKeys: ['category', 'item', 'atBatch'] },
    'reports': { component: ReportsPage, paramKeys: ['reportView'] },
    'locations': { component: LocationsPage, paramKeys: ['location'] },
    'stock': { component: CurrentStockPage },
    'admin/users': { component: UsersPage },
    'user': { component: UserPage, paramKeys: ['id'] },
    'admin/new-user': { component: NewUserPage },
    'admin/databases': { component: DatabasesContainer },
    'offline-setup': { component: OfflineSetupPage }
  }
  
  export class App extends React.Component {
    state = {
      route: parseHash(window.location.hash, PAGES)
    }
  
    onHashChange = (event) => {
      const newRoute = parseHash(window.location.hash, PAGES)
      this.setState({ route: newRoute })
    }
  
    componentDidMount = () => {
      initExpiryWatcher(this.props.user.prettyRoles)
      window.addEventListener('hashchange', this.onHashChange)
    }
  
    componentWillUnmount = () => {
      window.removeEventListener('hashchange', this.onHashChange)
    }
  
    render () {
      const pageName = this.state.route.path
      const page = PAGES[pageName]
      const Handler = page ? page.component : ShipmentsPage
  
      return (
        <div>
          <SiteHeader user={this.props.user} route={this.state.route} />
          <div className='container'>
            <Handler user={this.props.user} key={window.location.hash} route={this.state.route} />
          </div>
          <SiteFooter />
        </div>
      )
    }
  }
  
  const WithAuthApp = WithAuthWrapper(App)
  
  ReactDOM.render(
    <Provider store={store}>
      <WithAuthApp />
    </Provider>,
    document.getElementById('app')
  )
  