Polished auth flow including ReservedRoute and role selection.

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>
   );
 };