App.tsx

import React, { FC } from 'react';
import { ThemeProvider } from '@material-ui/core/styles';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { AuthRoutes, NonAuthRoutes } from 'api/routes';
import { Roles } from 'api/userRoles';
import { configDjangoCookieName } from 'api/configDjangoCookieName';
import { muiTheme } from 'App.style';
import { withAuthorization } from 'components/Authorization/Authorization';
import { useRole } from 'hooks/useRole';
import { useAuth } from 'hooks/useAuth';
import { AuthUser } from 'components/Auth/Auth';
import { AuthContext } from 'components/Auth/AuthContext';
import { Dashboard } from 'components/Dashboard/Dashboard';
import { NotFound } from 'components/NotFound/NotFound';
import { Unauthorized } from 'components/Unauthorized/Unauthorized';
import { LandingPage } from 'components/LandingPage/LandingPage';

const Personal = withAuthorization(Dashboard);

/**
 * Entry point of the app.
 */
export const App: FC = () => {
  configDjangoCookieName();
  const [role, setRole] = useRole();
  const [isAuth, setIsAuth] = useAuth();

  const value = { role, setRole, isAuth, setIsAuth };

  return (
    <div data-testid="App">
      <ThemeProvider theme={muiTheme}>
        <AuthContext.Provider value={value}>
          <Router>
            <Switch>
              <Route exact path={NonAuthRoutes.home} component={LandingPage} />
              <Route path={NonAuthRoutes.auth} component={AuthUser} />
              <Route
                path={AuthRoutes.dashboard}
                render={() => (
                  <Personal
                    allowedRoles={[
                      Roles.admin,
                      Roles.operator,
                      Roles.senior,
                      Roles.driver,
                    ]}
                  />
                )}
              />
              <Route
                path={NonAuthRoutes.unauthorized}
                component={Unauthorized}
              />
              <Route component={NotFound} />
            </Switch>
          </Router>
        </AuthContext.Provider>
      </ThemeProvider>
    </div>
  );
};