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/axios/configDjangoCookieName';
import { appTheme } from 'App.style';
import { withAuthorization } from 'components/Authorization/Authorization';
import { AuthUser } from 'components/Auth/Auth';
import { Dashboard } from 'components/Dashboard/Dashboard';
import { NotFound } from 'components/NotFound/NotFound';
import { Unauthorized } from 'components/Unauthorized/Unauthorized';
import { LandingPage } from 'components/LandingPage/LandingPage';
import { configureInterceptors } from 'api/axios/configureInterceptors';

const All = withAuthorization([
  Roles.admin,
  Roles.operator,
  Roles.senior,
  Roles.driver,
]);

/**
 * Entry point of the app.
 */
export const App: FC = () => {
  configureInterceptors();
  configDjangoCookieName();

  return (
    <div data-testid="App">
      <ThemeProvider theme={appTheme}>
        <Router>
          <Switch>
            <Route exact path={NonAuthRoutes.home} component={LandingPage} />
            <Route path={NonAuthRoutes.auth} component={AuthUser} />
            <Route path={AuthRoutes.dashboard} component={All(Dashboard)} />
            <Route path={NonAuthRoutes.unauthorized} component={Unauthorized} />
            <Route component={NotFound} />
          </Switch>
        </Router>
      </ThemeProvider>
    </div>
  );
};