Move cookie fetch to App

src/App.tsx

-import React, { FC } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import { HomePage } from 'components/HomePage/HomePage';
 import { AuthUser } from 'components/AuthUser/AuthUser';
@@ -9,26 +9,49 @@ import { NotFound } from 'components/NotFound/NotFound';
 import { ProfilePage } from 'components/ProfilePage/ProfilePage';
 import { Roles } from 'components/api/userRoles';
 import { Unauthorized } from 'components/Unauthorized/Unauthorized';
+import axios from 'axios';
 
-export const App: FC = () => (
-  <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>
-);
+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>
+  );
+};