AppRoute.js

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import {
  withRouter, Switch, Route, Redirect,
} from 'react-router-dom';

import PrivateRoute from 'lib/PrivateRoute';
import CountrySelectPage from 'scenes/CountrySelectPage';
import ImportPage from 'scenes/Import/ImportPage';
import VerifyEmailPage from 'scenes/VerifyEmailPage';
import LoginPage from 'scenes/LoginPageV2';
import TypePage from 'scenes/TypePage';
import RecoverPasswordPage from 'scenes/recoverPassword';
import RegisterPage from 'scenes/RegisterPage';
import JoinPage from 'scenes/JoinPage';
import RequestPage from 'scenes/RequestPage';
import InviteRequiredPage from 'scenes/InviteRequiredPage';
import CompleteAccount from 'scenes/CompleteAccount';
import CreateAccount from 'scenes/CreateAccountPage';
import Inventory from 'scenes/Inventory';
import Team from 'scenes/Team';
import History from 'scenes/History';
import CategoryPage from 'scenes/CategoryPage';
import LocationPage from 'scenes/Locations';
import MapPage from 'scenes/MapPage';
import PageNotFound from 'scenes/PageNotFound';
import Workers from 'scenes/Workers';
import SettingsPage from 'scenes/SettingsPage';

import { permissionsSelectors } from 'ducks/Team';
import { selectors as authSelectors } from 'ducks/Auth';
import * as rootSelectors from 'ducks/selectors';

import DownloadAppPage from 'scenes/DownloadAppPage';
import CreateCompanyPage from 'scenes/CreateCompanyPage';
import AppLayout from './AppLayout';

const AppRoutes = ({
  location,
  isLoggedIn,
  hasAcceptedTerms,
  country,
  canViewTeam,
  canAccessWorkers,
  shouldShowWorkers,
  canAccessCategories,
  canViewLocations,
  canImportThings,
}) => {
  const accessGranted = isLoggedIn && hasAcceptedTerms;
  const hasCountry = Boolean(country);

  let authRedirectPath = '/';

  if (!hasCountry && !accessGranted) {
    authRedirectPath = '/country';
  } else if (location.state && location.state.from && location.state.from.pathname && location.state.from.pathname !== '/country') {
    authRedirectPath = location.state.from.pathname;
  }

  return (
    <Switch>
      <PrivateRoute path="/country" component={CountrySelectPage} redirectPath="/login" condition={!hasCountry && !accessGranted} />
      <PrivateRoute path="/login" component={LoginPage} redirectPath={authRedirectPath} condition={!accessGranted} />
      <Route path="/invites" component={LoginPage} />
      <Route path="/download-app" component={DownloadAppPage} />
      <PrivateRoute path="/register" component={RegisterPage} redirectPath={authRedirectPath} condition={hasCountry && !accessGranted} />
      <PrivateRoute path="/forgotPassword" component={RecoverPasswordPage} redirectPath={authRedirectPath} condition={hasCountry && !accessGranted} />
      <PrivateRoute path="/request-account" component={RequestPage} redirectPath={authRedirectPath} condition={!accessGranted} />
      <PrivateRoute path="/create-account" component={CreateAccount} redirectPath={authRedirectPath} condition={!accessGranted} />
      <PrivateRoute path="/invite-required" component={InviteRequiredPage} redirectPath={authRedirectPath} condition={!accessGranted} />
      <PrivateRoute path="/password-reset" component={RecoverPasswordPage} redirectPath={authRedirectPath} condition={hasCountry && !accessGranted} />
      <PrivateRoute path="/complete/account" component={CompleteAccount} redirectPath={authRedirectPath} condition={hasCountry && !accessGranted} />
      <PrivateRoute path="/join" component={JoinPage} redirectPath={authRedirectPath} condition={!accessGranted} />
      <PrivateRoute path="/verify-email" component={VerifyEmailPage} redirectPath={authRedirectPath} condition={!accessGranted} />
      <PrivateRoute path="/create-company" component={CreateCompanyPage} redirectPath={authRedirectPath} condition={hasCountry && !accessGranted} />
      <PrivateRoute path="/account-type" component={TypePage} redirectPath={authRedirectPath} condition={hasCountry && !accessGranted} />
      <PrivateRoute
        condition={accessGranted}
        redirectPath="/login"
        render={routeProps => (
          <AppLayout {...routeProps} showFooter={false}>
            <Switch>
              <Redirect path="/" exact to="/inventory" />
              <Redirect path="/tools" to="/inventory" />
              <Redirect path="/managers" to="/people" />
              <Redirect path="/locations" to="/assignments" />
              <Route path="/inventory" component={Inventory} />
              <Route path="/map" component={MapPage} />
              <Route path="/history" component={History} />
              <Route path="/settings" component={SettingsPage} />
              <PrivateRoute path="/people" component={Team} redirectPath="/" condition={canViewTeam} />
              <PrivateRoute path="/workers" component={Workers} redirectPath="/" condition={canAccessWorkers && shouldShowWorkers} />
              <PrivateRoute path="/categories" component={CategoryPage} redirectPath="/" condition={canAccessCategories} />
              <PrivateRoute path="/assignments" component={LocationPage} redirectPath="/" condition={canViewLocations} />
              <PrivateRoute path="/import" component={ImportPage} redirectPath="/" condition={canImportThings} />
              <Route component={PageNotFound} />
            </Switch>
          </AppLayout>
        )}
      />
    </Switch>
  );
};

AppRoutes.propTypes = {
  isLoggedIn: PropTypes.bool.isRequired,
  hasAcceptedTerms: PropTypes.bool.isRequired,
  country: PropTypes.string,
  canViewTeam: PropTypes.bool.isRequired,
  canAccessWorkers: PropTypes.bool.isRequired,
  shouldShowWorkers: PropTypes.bool.isRequired,
  canAccessCategories: PropTypes.bool.isRequired,
  canViewLocations: PropTypes.bool.isRequired,
  canImportThings: PropTypes.bool.isRequired,
  location: PropTypes.shape({
    state: PropTypes.shape(),
  }).isRequired,
};

AppRoutes.defaultProps = {
  country: '',
};

const mapStateToProps = state => ({
  isLoggedIn: authSelectors.getIsLoggedIn(state),
  hasAcceptedTerms: authSelectors.getHasAcceptedTerms(state),
  country: authSelectors.getUserCountry(state),
  canViewTeam: permissionsSelectors.canViewTeam(state),
  canAccessWorkers: permissionsSelectors.canAccessWorkers(state),
  canAccessCategories: permissionsSelectors.canAccessCategories(state),
  canViewLocations: permissionsSelectors.canViewLocations(state),
  canImportThings: permissionsSelectors.canImportThings(state),
  shouldShowWorkers: rootSelectors.shouldShowWorkers(state),
});

export default withRouter(connect(mapStateToProps)(AppRoutes));