App.tsx

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

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={['admin', 'driver', 'senior', 'operator']}
                  />
                )}
              />
              <Route
                path={NonAuthRoutes.unauthorized}
                component={Unauthorized}
              />
              <Route component={NotFound} />
            </Switch>
          </Router>
        </AuthContext.Provider>
      </ThemeProvider>
    </div>
  );
};