Split components.

src/components/Auth/ChoseRole/ChoseRole.tsx

@@ -5,13 +5,8 @@ import { getRoles } from 'api/getRoles';
 import { setRole } from 'api/setRole';
 import { useHistory } from 'react-router-dom';
 import { AuthRoutes } from 'api/routes';
-import { choseRoleStyle } from './ChoseRoleStyle.style';
+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 ChoseRole: FC = () => {
   const classes = choseRoleStyle();
 
@@ -30,49 +25,22 @@ export const ChoseRole: FC = () => {
 
   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}>
-          {userRoles ? (
-            userRoles.map((role) => (
-              <Button
-                variant="outlined"
-                fullWidth
-                color="default"
-                key={role}
-                onClick={() => choseAndForward(role)}
-                className={classes.paddingTopKlein}
-              >
-                {role}
-              </Button>
-            ))
-          ) : (
-            <h1>No roles were returned.</h1>
-          )}
-        </Grid>
-        <Grid item xs={1} lg={2} />
-      </Grid>
+      {userRoles ? (
+        userRoles.map((role) => (
+          <Button
+            variant="outlined"
+            fullWidth
+            color="default"
+            key={role}
+            onClick={() => choseAndForward(role)}
+            className={classes.paddingTopKlein}
+          >
+            {role}
+          </Button>
+        ))
+      ) : (
+        <h1>No roles were returned.</h1>
+      )}
     </div>
   );
 };

src/components/Auth/ChoseRole/ChoseRolePage.tsx

+import React, { FC, useEffect, useState } from 'react';
+import Button from '@material-ui/core/Button';
+import { Grid, Typography, Hidden } from '@material-ui/core';
+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 { ChoseRole } from './ChoseRole';
+
+/**
+ * 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} />
+      </Grid>
+    </div>
+  );
+};