Move role fetch to hook.

src/components/Auth/ChoseRole/ChoseRole.style.ts

 import { makeStyles } from '@material-ui/core/styles';
 
 export const choseRoleStyle = makeStyles(() => ({
-  root: {
-    minHeight: '36vh',
-    backgroundImage: `url(${'/assets/bgMED.svg'})`,
-    backgroundRepeat: 'no-repeat',
-    backgroundSize: 'cover',
-  },
-  rightAlign: {
-    marginLeft: 'auto',
-  },
-  whiteText: {
-    color: 'white',
-  },
-  imageIcon: {
-    maxHeight: '50%',
-  },
-  paddingBottom: {
-    paddingBottom: '65px',
-  },
-  paddingBottomKlein: {
-    paddingBottom: '15px',
-  },
-  paddingTop: {
-    paddingTop: '65px',
-  },
-  paddingTopKlein: {
+  roleButton: {
     paddingTop: '35px',
   },
-  bodyIcon: {
-    fontSize: '90px',
-    paddingBottom: '10px',
-    paddingTop: '10px',
-  },
-  contIcon: {
-    width: '100%',
-    left: '0',
-    right: '0',
-  },
-  noShadow: {
-    border: 'none',
-    boxShadow: 'none',
-    backgroundColor: 'transparent',
-  },
-  extendedIcon: {
-    fontSize: '50px',
-  },
-  fab: {
-    margin: '1.9em',
-    bottom: '0',
-    right: '0',
-    position: 'fixed',
-    fontSize: '2em',
-    padding: '1.5em',
-  },
-  fabSmall: {
-    margin: '1.4em',
-    bottom: '0',
-    right: '0',
-    position: 'fixed',
-    fontSize: '1.7em',
-    padding: '1.4em',
-  },
 }));

src/components/Auth/ChoseRole/ChoseRole.tsx

-import React, { FC, useEffect, useState } from 'react';
+import React, { FC } from 'react';
 import Button from '@material-ui/core/Button';
-import { Grid, Typography, Hidden } from '@material-ui/core';
-import { getRoles } from 'api/getRoles';
+import { useRoleList } from 'hooks/useRoleList';
 import { setRole } from 'api/setRole';
 import { useHistory } from 'react-router-dom';
 import { AuthRoutes } from 'api/routes';
 import { choseRoleStyle } from './ChoseRole.style';
 
 export const ChoseRole: FC = () => {
+  const history = useHistory();
   const classes = choseRoleStyle();
 
-  const history = useHistory();
-  const [userRoles, setUserRoles] = useState<string[]>(['']);
+  const rolesList = useRoleList();
 
   const choseAndForward = (role: string): void => {
     setRole(role).then(() =>
@@ -19,21 +18,17 @@ export const ChoseRole: FC = () => {
     );
   };
 
-  useEffect(() => {
-    getRoles().then((fetchedRoles) => setUserRoles(fetchedRoles));
-  }, []);
-
   return (
     <div data-testid="ChoseRole">
-      {userRoles ? (
-        userRoles.map((role) => (
+      {rolesList ? (
+        rolesList.map((role) => (
           <Button
             variant="outlined"
             fullWidth
             color="default"
             key={role}
             onClick={() => choseAndForward(role)}
-            className={classes.paddingTopKlein}
+            className={classes.roleButton}
           >
             {role}
           </Button>

src/components/Auth/ChoseRole/ChoseRolePage.tsx

@@ -5,60 +5,24 @@ import { getRoles } from 'api/getRoles';
 import { setRole } from 'api/setRole';
 import { useHistory } from 'react-router-dom';
 import { AuthRoutes } from 'api/routes';
-import { choseRoleStyle } from './ChoseRole.style';
+import { Header } from 'components/Utils/Header';
 import { ChoseRole } from './ChoseRole';
+import { choseRoleStyle } from './ChoseRole.style';
 
 /**
  * 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 ChoseRolePage: FC = () => {
-  const classes = choseRoleStyle();
-
-  const history = useHistory();
-  const [userRoles, setUserRoles] = useState<string[]>(['']);
-
-  const choseAndForward = (role: string): void => {
-    setRole(role).then(() =>
-      history.push(`${AuthRoutes.dashboard}${AuthRoutes.home}`),
-    );
-  };
-
-  useEffect(() => {
-    getRoles().then((fetchedRoles) => setUserRoles(fetchedRoles));
-  }, []);
-
-  return (
-    <div data-testid="ChoseRole">
-      <Grid container direction="column" className={classes.paddingBottom}>
-        <div className={classes.root}>
-          <header>
-            <Grid item container className={classes.paddingBottom}>
-              <Grid item xs={1} md={2} lg={2} />
-
-              <Grid item xs={10} md={6} lg={4}>
-                <Typography variant="h2" className={classes.whiteText}>
-                  Choose Your
-                </Typography>
-                <Typography variant="h2" className={classes.whiteText}>
-                  ROLE
-                </Typography>
-              </Grid>
-
-              <Grid item xs={1} />
-            </Grid>
-          </header>
-        </div>
-      </Grid>
-
-      <Grid container>
-        <Grid item xs={1} lg={2} />
-        <Grid item xs={10} lg={8}>
-          <ChoseRole />
-        </Grid>
-        <Grid item xs={1} lg={2} />
+export const ChoseRolePage: FC = () => (
+  <div data-testid="ChoseRole">
+    <Header title="Chose your" subtitle="role" />
+    <Grid container>
+      <Grid item xs={1} lg={2} />
+      <Grid item xs={10} lg={8}>
+        <ChoseRole />
       </Grid>
-    </div>
-  );
-};
+      <Grid item xs={1} lg={2} />
+    </Grid>
+  </div>
+);

src/hooks/useRoleList.ts

+import { getRoles } from 'api/getRoles';
+import { useEffect, useState } from 'react';
+
+export const useRoleList = (): string[] => {
+  const [roleList, setRoleList] = useState<string[]>(['']);
+
+  useEffect(() => {
+    getRoles().then((roles) => setRoleList(roles));
+  }, []);
+
+  return roleList;
+};