From f4d5b8fc94afc9898ba997fb20070550f74d9ff1 Mon Sep 17 00:00:00 2001
From: Alberto Defendi <1369-ahl-berto@users.noreply.gitlab.inf.unibz.it>
Date: Tue, 22 Jun 2021 21:36:03 +0200
Subject: [PATCH] Move role fetch to hook.
---
.../Auth/ChoseRole/ChoseRole.style.ts | 60 +-----------------
src/components/Auth/ChoseRole/ChoseRole.tsx | 19 +++---
.../Auth/ChoseRole/ChoseRolePage.tsx | 62 ++++---------------
src/hooks/useRoleList.ts | 12 ++++
4 files changed, 33 insertions(+), 120 deletions(-)
create mode 100644 src/hooks/useRoleList.ts
diff --git a/src/components/Auth/ChoseRole/ChoseRole.style.ts b/src/components/Auth/ChoseRole/ChoseRole.style.ts
index de104e3..eeefb1f 100644
--- a/src/components/Auth/ChoseRole/ChoseRole.style.ts
+++ b/src/components/Auth/ChoseRole/ChoseRole.style.ts
@@ -1,65 +1,7 @@
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',
- },
}));
diff --git a/src/components/Auth/ChoseRole/ChoseRole.tsx b/src/components/Auth/ChoseRole/ChoseRole.tsx
index aa19554..0a545c6 100644
--- a/src/components/Auth/ChoseRole/ChoseRole.tsx
+++ b/src/components/Auth/ChoseRole/ChoseRole.tsx
@@ -1,17 +1,16 @@
-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>
diff --git a/src/components/Auth/ChoseRole/ChoseRolePage.tsx b/src/components/Auth/ChoseRole/ChoseRolePage.tsx
index 8e406bf..b0c2c1a 100644
--- a/src/components/Auth/ChoseRole/ChoseRolePage.tsx
+++ b/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>
+);
diff --git a/src/hooks/useRoleList.ts b/src/hooks/useRoleList.ts
new file mode 100644
index 0000000..bee1002
--- /dev/null
+++ b/src/hooks/useRoleList.ts
@@ -0,0 +1,12 @@
+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;
+};
--
GitLab