App.tsx

import React, { FC, useEffect, useState } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { HomePage } from 'components/AuthUser/HomePage/HomePage';
import { AuthUser } from 'components/AuthUser/AuthUser';
import { LandingPage } from 'components/NonAuthUser/LandingPage/LandingPage';
import { PrivateRoute } from 'components/api/PrivateRoute/PrivateRoute';
import { AuthRoutes, NonAuthRoutes } from 'components/api/routes';
import { NotFound } from 'components/NonAuthUser/NotFound/NotFound';
import { ProfilePage } from 'components/ProfilePage/ProfilePage';
import { Roles } from 'components/api/userRoles';
import { Unauthorized } from 'components/NonAuthUser/Unauthorized/Unauthorized';
import axios from 'axios';

const configDjangoCookieName = (): void => {
  axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN';
  axios.defaults.xsrfCookieName = 'csrftoken';
  axios.defaults.withCredentials = true;
};

export const App: FC = () => {
  const [isCookieFetched, setisCookieFetched] = useState<string>('');
  configDjangoCookieName();
  useEffect(() => {
    const fetchCookie = async (): Promise<unknown> => {
      const response = await axios('api/web/csrf');
      axios.defaults.headers.common['X-CSRFTOKEN'] = response.data.token;
      sessionStorage.setItem('X-CSRFTOKEN', response.data.token);
      sessionStorage.setItem('ROLE', 'admin');
      setisCookieFetched(response.data.token);
      return null;
    };
    if (!isCookieFetched) fetchCookie();
  }, []);

  return (
    <Router>
      <div data-testid="App">
        <Switch>
          <Route path={NonAuthRoutes.auth} component={AuthUser} />
          <Route exact path={NonAuthRoutes.home} component={LandingPage} />
          <PrivateRoute
            path={AuthRoutes.dashboard}
            Component={HomePage}
            requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
          />
          <PrivateRoute
            path={AuthRoutes.profile}
            Component={ProfilePage}
            requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
          />
          <Route path={NonAuthRoutes.unauthorized} component={Unauthorized} />
          <Route component={NotFound} />
        </Switch>
      </div>
    </Router>
  );
};