Merge branch 'feature/privateroute/role' into 'dev'

Polished auth flow including ReservedRoute and role selection.

See merge request !45

src/api/getRoles.ts

+import axios from 'axios';
+
+/**
+ * Ask the server all the roles of an user if the user has multiple roles.
+ * @returns array of roles.
+ */
+export const getRoles = async (): Promise<string[]> =>
+  axios('/api/web/login/get_roles').then((res) => res.data.roles);

src/api/setRole.ts

+import axios from 'axios';
+
+/**
+ * Set the role of the user in the database.
+ */
+export const setRole = async (role: string): Promise<void> =>
+  axios.post('/api/web/login/set_role', { role });

src/components/AuthUser/AuthUser.tsx

@@ -7,6 +7,9 @@ import { SignUpForm } from 'components/AuthUser/SignUpForm/SignUpForm';
 import { ChoseRole } from 'components/AuthUser/ChoseRole/ChoseRole';
 import { RestrictedRoute } from 'components/RestrictedRoute/RestrictedRoute';
 
+/**
+ * Keeps all components related to SignIn/SignOut logic.
+ */
 export const AuthUser: FC = () => {
   const { path } = useRouteMatch();
   return (

src/components/AuthUser/ChoseRole/ChoseRole.tsx

-import React, { FC, useContext, useEffect, useState } from 'react';
-import axios from 'axios';
+import React, { FC, useEffect, useState } from 'react';
 import Button from '@material-ui/core/Button';
-import { AuthContext } from '../AuthContext';
-
-const choseAndForward = (e: unknown): void => {
-  // Do nothing.
-};
+import { getRoles } from 'api/getRoles';
+import { setRole } from 'api/setRole';
+import { useHistory } from 'react-router-dom';
+import { AuthRoutes } from 'api/routes';
 
 /**
- * Screen that let's users decide role between available roles.
+ * Page that let's users decide role between available roles.
  * This is intended to use when a user has more than one role.
  * @returns ChoseRole component.
  */
 export const ChoseRole: FC = () => {
-  const [userRoles, setUserRoles] = useState<Array<string>>(['']);
+  const history = useHistory();
+  const [userRoles, setUserRoles] = useState<string[]>(['hello', 'world']);
+
+  const choseAndForward = (role: string): void => {
+    // Set role in the server.
+    setRole(role);
+    // Push to homepage.
+    history.push(`${AuthRoutes.dashboard}${AuthRoutes.home}`);
+  };
 
   useEffect(() => {
-    const getUserRoles = async (): Promise<unknown> => {
-      const response = await axios('/api/web/get_role');
-      setUserRoles(response.data.token);
-      return null;
-    };
-    getUserRoles();
-  }, [userRoles]);
+    getRoles().then((fetchedRoles) => setUserRoles(fetchedRoles));
+  }, []);
 
-  const { role } = useContext(AuthContext);
   return (
     <div data-testid="ChoseRole">
-      <Button
-        variant="outlined"
-        color="default"
-        onClick={(e) => choseAndForward(e)}
-      >
-        {role}
-      </Button>
+      {userRoles ? (
+        userRoles.map((role) => (
+          <Button
+            variant="outlined"
+            color="default"
+            key={role}
+            onClick={() => choseAndForward(role)}
+          >
+            {role}
+          </Button>
+        ))
+      ) : (
+        <h1>No roles were returned.</h1>
+      )}
     </div>
   );
 };

src/components/AuthUser/Dashboard/ProfilePage/ProfilePage.tsx

@@ -9,7 +9,7 @@ export const ProfilePage: FC = () => {
 
   const logout = (): void => {
     axios
-      .post('/api/web/login/logout')
+      .get('/api/web/login/logout')
       .then(() => history.replace(NonAuthRoutes.home));
   };
 

src/components/AuthUser/SignInForm/SignInForm.tsx

-import React, { FC, useContext, useEffect, useState } from 'react';
+import React, { FC, useCallback, useContext, useState } from 'react';
 import axios from 'axios';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { Button } from '@material-ui/core';
 import { InputField } from 'components/AuthUser/InputField/InputField';
 import { useHistory } from 'react-router-dom';
-import { AuthRoutes } from 'api/routes';
+import { AuthRoutes, NonAuthRoutes } from 'api/routes';
 import { AuthContext } from 'components/AuthUser/AuthContext';
 import { fetchCookie } from 'api/fetchCookie';
 import { useStyles } from './useStyles';
@@ -20,7 +20,7 @@ export const SignInForm: FC = () => {
   const { setRole, setIsAuth } = useContext(AuthContext);
   const [cookie, setCookie] = useState<string>('');
 
-  useEffect(() => {
+  useCallback(() => {
     let isMounted = true;
     if (isMounted)
       fetchCookie().then((cookieResponse) => setCookie(cookieResponse));
@@ -61,6 +61,8 @@ export const SignInForm: FC = () => {
             type: 'server',
             message: 'Something went wrong with password',
           });
+        } else if (response.data.status === 'role-choice-needed') {
+          history.replace(`${NonAuthRoutes.auth}${AuthRoutes.choseRole}`);
         } else if (response.data.status === 'success') {
           setRole(response.data.role);
           setIsAuth(true);

src/components/RestrictedRoute/RestrictedRoute.tsx

@@ -4,11 +4,10 @@ import { AuthRoutes } from 'api/routes';
 import { isAuthenticated } from 'api/isAuthenticated';
 import { CircularProgress } from '@material-ui/core';
 
-/**
- *
- * */
 type Props = {
+  /** Children where the authenticated user will be redirected. */
   Component: React.FC<RouteProps>;
+  /** Path of the children. */
   path: string;
 };
 
@@ -25,19 +24,11 @@ export const RestrictedRoute = ({ Component, path }: Props): JSX.Element => {
   const [isLoading, setLoading] = useState<boolean>(false);
 
   useEffect(() => {
-    let isMounted = true;
-
-    isAuthenticated().then((state) => {
-      if (isMounted) {
-        setIsAuth(state);
-        setLoading(true);
-      }
+    isAuthenticated().then((res) => {
+      setIsAuth(res);
+      setLoading(true);
     });
-
-    return () => {
-      isMounted = false;
-    };
-  }, [isLoading]);
+  }, [isAuth, setLoading]);
 
   return !isLoading ? (
     <CircularProgress />