Made promise return only response.

The passage of the react state component is now not necessary since the
returned data is already usable.

src/App.tsx

@@ -22,7 +22,6 @@ import { getRole } from 'api/getRole';
  * Entry point of the app.
  */
 export const App: FC = () => {
-  let isMounted = true;
   configDjangoCookieName();
   const [role, setRole] = useState('');
   const [isAuth, setIsAuth] = useState<boolean>(false);
@@ -31,16 +30,10 @@ export const App: FC = () => {
   const value = { role, setRole, isAuth, setIsAuth };
 
   useEffect(() => {
-    if (!isCookieFetched && isMounted) fetchCookie(setIsCookieFetched);
-
     // Initialize asking the server if this session is already logged in.
-    isAuthenticated(setIsAuth);
+    isAuthenticated().then((state) => setIsAuth(state));
     getRole(setRole);
-
-    return () => {
-      isMounted = false;
-    };
-  }, [isCookieFetched]);
+  }, [isAuth, role]);
 
   return (
     <ThemeProvider theme={muiTheme}>

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(
+export const isAuthenticated = async (): Promise<boolean> =>
+  axios('/api/web/login/is_authenticated').then(
     (res) => res.data.is_authenticated,
   );
-  setIsAuth(response);
-};

src/components/AuthUser/SignInForm/SignInForm.tsx

@@ -6,6 +6,7 @@ import { InputField } from 'components/AuthUser/InputField/InputField';
 import { useHistory } from 'react-router-dom';
 import { AuthRoutes, NonAuthRoutes } from 'api/routes';
 import { AuthContext } from 'components/AuthUser/AuthContext';
+import { fetchCookie } from 'api/fetchCookie';
 import { useStyles } from './useStyles';
 import { CredentialsType } from './CredentialsType';
 
@@ -17,6 +18,16 @@ const defaultValues = {
 export const SignInForm: FC = () => {
   const history = useHistory();
   const { setRole, setIsAuth } = useContext(AuthContext);
+  const [cookie, setCookie] = useState<string>('');
+
+  useEffect(() => {
+    let isMounted = true;
+    if (isMounted) fetchCookie(setCookie);
+
+    return () => {
+      isMounted = false;
+    };
+  }, [fetchCookie]);
 
   const { control, errors, setError, handleSubmit } = useForm<CredentialsType>({
     defaultValues,
@@ -31,7 +42,7 @@ export const SignInForm: FC = () => {
         {
           username: values.username,
           password: values.password,
-          csrfmiddlewaretoken: localStorage.getItem('COOKIE'),
+          csrfmiddlewaretoken: cookie,
         },
         {
           headers: {

src/components/RestrictedRoute/RestrictedRoute.tsx

@@ -23,9 +23,21 @@ type Props = {
 export const RestrictedRoute = ({ Component, path }: Props): JSX.Element => {
   const [authUser, setAuthUser] = useState<boolean>(false);
   const [isLoading, setLoading] = useState<boolean>(false);
+
   useEffect(() => {
-    isAuthenticated(setAuthUser).then(() => setLoading(true));
-  });
+    let isMounted = true;
+
+    isAuthenticated().then((state) => {
+      if (isMounted) {
+        setAuthUser(state);
+        setLoading(true);
+      }
+    });
+
+    return () => {
+      isMounted = false;
+    };
+  }, [isLoading]);
 
   return !isLoading ? (
     <CircularProgress />