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';

/**
 * Entry point of the app.
 */
export const App: FC = () => {
  configDjangoCookieName();
  const [role, setRole] = useState('');
  const [isAuth, setIsAuth] = useState<boolean>(false);

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

  useEffect(() => {
    // Initialize asking the server if this session is already logged in.
    isAuthenticated().then((responseState) => setIsAuth(responseState));
    getRole().then((responseRole) => setRole(responseRole));
  }, [isAuth, role]);

  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} />
              <PrivateRoute
                Component={Dashboard}
                path={AuthRoutes.dashboard}
                requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
              />
              <PrivateRoute
                Component={HomePage}
                path={AuthRoutes.dashboard}
                requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
              />
              <PrivateRoute
                Component={ProfilePage}
                path={AuthRoutes.profile}
                requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
              />
              <Route
                path={NonAuthRoutes.unauthorized}
                component={Unauthorized}
              />
              <Route component={NotFound} />
            </Switch>
          </Router>
        </AuthContext.Provider>
      </ThemeProvider>
    </div>
  );
};