From b47131cc8fb3a5e1dc5ec096a7c6c5b65434e452 Mon Sep 17 00:00:00 2001
From: Alberto Defendi <1369-ahl-berto@users.noreply.gitlab.inf.unibz.it>
Date: Tue, 22 Jun 2021 16:04:51 +0200
Subject: [PATCH] Split components.
---
...eRoleStyle.style.ts => ChoseRole.style.ts} | 0
src/components/Auth/ChoseRole/ChoseRole.tsx | 66 +++++--------------
.../Auth/ChoseRole/ChoseRolePage.tsx | 64 ++++++++++++++++++
3 files changed, 81 insertions(+), 49 deletions(-)
rename src/components/Auth/ChoseRole/{ChoseRoleStyle.style.ts => ChoseRole.style.ts} (100%)
create mode 100644 src/components/Auth/ChoseRole/ChoseRolePage.tsx
diff --git a/src/components/Auth/ChoseRole/ChoseRoleStyle.style.ts b/src/components/Auth/ChoseRole/ChoseRole.style.ts
similarity index 100%
rename from src/components/Auth/ChoseRole/ChoseRoleStyle.style.ts
rename to src/components/Auth/ChoseRole/ChoseRole.style.ts
diff --git a/src/components/Auth/ChoseRole/ChoseRole.tsx b/src/components/Auth/ChoseRole/ChoseRole.tsx
index 75a953b..aa19554 100644
--- a/src/components/Auth/ChoseRole/ChoseRole.tsx
+++ b/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>
);
};
diff --git a/src/components/Auth/ChoseRole/ChoseRolePage.tsx b/src/components/Auth/ChoseRole/ChoseRolePage.tsx
new file mode 100644
index 0000000..8e406bf
--- /dev/null
+++ b/src/components/Auth/ChoseRole/ChoseRolePage.tsx
@@ -0,0 +1,64 @@
+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>
+ );
+};
--
GitLab