Move api calls to separate files.

src/api/PrivateRoute/PrivateRoute.tsx

-import React, { useState, useEffect, useContext } from 'react';
-import { Route, Redirect, RouteProps } from 'react-router-dom';
-import { NonAuthRoutes } from 'api/routes';
-import { AuthContext } from 'components/AuthUser/AuthContext';
-
-/**
- * A wrapper for <Route> that redirects to the login screen if you're not yet authenticated.
- * Every non-public route must be wrapped with this component.
- * */
-type Props = {
-  Component: React.FC<RouteProps>;
-  path: string;
-  requiredRoles: string[];
-};
-
-/* eslint-disable react/jsx-props-no-spreading */
-export const PrivateRoute = ({
-  Component,
-  path,
-  requiredRoles,
-}: Props): JSX.Element => {
-  const { role, isAuth } = useContext(AuthContext);
-
-  // Check if the role is contained in the roles array (passed as props).
-  const userHasRequiredRole = requiredRoles.includes(role);
-
-  const message = userHasRequiredRole
-    ? 'Please log in to view this page'
-    : 'Your role is not allowed';
-
-  return (
-    <Route
-      exact={false}
-      path={path}
-      render={(props: RouteProps) =>
-        isAuth && userHasRequiredRole ? (
-          <Component {...props} />
-        ) : (
-          <Redirect
-            to={{
-              pathname: !userHasRequiredRole
-                ? `${NonAuthRoutes.auth}${NonAuthRoutes.signIn}`
-                : NonAuthRoutes.unauthorized,
-              state: {
-                message,
-                requestedPath: path,
-              },
-            }}
-          />
-        )
-      }
-    />
-  );
-};

src/api/RestrictedRoute/RestrictedRoute.tsx

-import React, { useState, useEffect, useContext } from 'react';
-import { Route, Redirect, RouteProps } from 'react-router-dom';
-import { AuthRoutes, NonAuthRoutes } from 'api/routes';
-import { isAuthenticated } from 'api/isAuthenticated';
-
-/**
- *
- * */
-type Props = {
-  Component: React.FC<RouteProps>;
-  restricted: boolean;
-  path: string;
-};
-
-/**
- * Wrapper for Route that basing on if the user is authenticated,
- * redirects to:
- * - Entry point of the private route (the homepage);
- * - Login page.
- */
-
-/* eslint-disable react/jsx-props-no-spreading */
-export const RestrictedRoute = ({ Component, path }: Props): JSX.Element => {
-  const [authUser, setAuthUser] = useState<boolean>(false);
-  useEffect(() => {
-    isAuthenticated(setAuthUser);
-  });
-
-  return (
-    <Route
-      path={path}
-      render={(props: RouteProps) =>
-        authUser ? (
-          // Redirect to homepage.
-          <Redirect
-            to={{ pathname: `${AuthRoutes.dashboard}${AuthRoutes.home}` }}
-          />
-        ) : (
-          // Redirect to component.
-          <Component {...props} />
-        )
-      }
-    />
-  );
-};

src/api/fetchCookie.ts

+import axios from 'axios';
+
+/**
+ *
+ * Ask and set csrf cookie to server.
+ * @param setIsCookieFetched function to set the state isCookieFetched.
+ * @returns null
+ */
+export const fetchCookie = async (
+  setIsCookieFetched: React.Dispatch<React.SetStateAction<string>>,
+): Promise<unknown> => {
+  const response = await axios('/api/web/csrf');
+  setIsCookieFetched(response.data.token);
+  localStorage.setItem('COOKIE', response.data.token);
+  return null;
+};

src/api/getRole.ts

+import axios from 'axios';
+import { AuthContext } from 'components/AuthUser/AuthContext';
+import { useContext } from 'react';
+
+export const getRole = async (
+  setRole: React.Dispatch<React.SetStateAction<string>>,
+): Promise<void> => {
+  const response = await axios('/api/web/login/get_role').then(
+    (res) => res.data.role,
+  );
+  setRole(response);
+};

src/api/isAuthenticated.ts

+import axios from 'axios';
+
+export const isAuthenticated = async (
+  setIsAuth: React.Dispatch<React.SetStateAction<boolean>>,
+): Promise<void> => {
+  const response = await axios('/api/web/login/is_authenticated').then(
+    (res) => res.data.is_authenticated,
+  );
+  setIsAuth(response);
+};