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 (
    <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>
  );
};