text: import { Redirect, Route, Switch, useLocation } from 'react-router-dom';
  
  import PropTypes from 'prop-types';
  import React from 'react';
  import asyncComponent from './Utilities/asyncComponent';
  import some from 'lodash/some';
  
  /**
   * Aysnc imports of components
   *
   * https://webpack.js.org/guides/code-splitting/
   * https://reactjs.org/docs/code-splitting.html
   *
   * pros:
   *      1) code splitting
   *      2) can be used in server-side rendering
   * cons:
   *      1) nameing chunk names adds unnecessary docs to code,
   *         see the difference with DashboardMap and InventoryDeployments.
   *
   */
  const CommitPage = asyncComponent(() => import(/* webpackChunkName: "CommitPage" */ './Routes/CommitPage/CommitPage'));
  const OopsPage = asyncComponent(() => import(/* webpackChunkName: "OopsPage" */ './Routes/OopsPage/OopsPage'));
  const NoPermissionsPage = asyncComponent(() => import(/* webpackChunkName: "NoPermissionsPage" */ './Routes/NoPermissionsPage/NoPermissionsPage'));
  
  const paths = {
      pageAppCommit: '/:app/:commit',
      pageApp: '/:app',
      page: '/',
      oops: '/oops',
      noPermissions: '/no-permissions'
  };
  
  const InsightsRoute = ({ component: Component, rootClass, ...rest }) => {
      const root = document.getElementById('root');
      root.removeAttribute('class');
      root.classList.add(`page__${rootClass}`, 'pf-c-page__main');
      root.setAttribute('role', 'main');
  
      return (<Route {...rest} component={Component} />);
  };
  
  InsightsRoute.propTypes = {
      component: PropTypes.func,
      rootClass: PropTypes.string
  };
  
  /**
   * the Switch component changes routes depending on the path.
   *
   * Route properties:
   *      exact - path must match exactly,
   *      path - https://prod.foo.redhat.com:1337/insights/advisor/rules
   *      component - component to be rendered when a route has been chosen.
   */
  export const Routes = () => {
      const path = useLocation().pathname;
  
      return (
          <Switch>
              <InsightsRoute path={paths.pageAppCommit} component={CommitPage} rootClass='samplePage'/>
              <InsightsRoute path={paths.pageApp} component={CommitPage} rootClass='samplePage'/>
              <InsightsRoute path={paths.page} component={CommitPage} rootClass='samplePage' />
              <InsightsRoute path={paths.oops} component={OopsPage} rootClass='oopsPage' />
              <InsightsRoute path={paths.noPermissions} component={NoPermissionsPage} rootClass='noPermissionsPage' />
              { /* Finally, catch all unmatched routes */}
              <Route render={() => some(paths, p => p === path) ? null : (<Redirect to={paths.samplePage} />)} />
          </Switch>
      );
  };
  
  Routes.propTypes = {
      childProps: PropTypes.shape({
          history: PropTypes.shape({
              push: PropTypes.func
          })
      })
  };
  