diff --git a/src/components/Auth/ChoseRole/ChoseRole.style.ts b/src/components/Auth/ChoseRole/ChoseRole.style.ts
index de104e34439ddebbe2e4c4ccf901a6c023213db8..eeefb1f29c9f7cd532c8f84fd628c5aa26dc9aab 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 aa195543c5b0c5b4502f8f7c1439135ebc689e45..0a545c6f6253370fa9d45f89b44eb115eefebfff 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 8e406bffd6d61fe525de020a9fc8a3e964a2a786..b0c2c1ac374eb83814c7873676dfb00917ebb0a9 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/components/Dashboard/ProfilePage/ProfilePage.style.ts b/src/components/Dashboard/ProfilePage/ProfilePage.style.ts
index 4fb33a5de4f6b19e5019fb8160a54a833995c86e..a0debe6d3cd99249f5974bd2760f0dc9d9c04cb1 100644
--- a/src/components/Dashboard/ProfilePage/ProfilePage.style.ts
+++ b/src/components/Dashboard/ProfilePage/ProfilePage.style.ts
@@ -1,24 +1,6 @@
import { makeStyles } from '@material-ui/core/styles';
export const profilePageStyle = 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',
- },
paddingTop: {
paddingTop: '2em',
},
@@ -41,31 +23,4 @@ export const profilePageStyle = makeStyles(() => ({
paddingBottom: '10px',
paddingTop: '10px',
},
- contIcon: {
- width: '100%',
- left: '0',
- right: '0',
- },
- noShadow: {
- border: 'none',
- boxShadow: 'none',
- backgroundColor: 'transparent',
- },
- extendedIcon: {
- fontSize: '50px',
- },
- fab: {
- margin: '10px 90px 80px 10px',
- bottom: '0',
- right: '0',
- position: 'fixed',
- padding: '45px',
- },
- fabSmall: {
- margin: '10px 45px 70px 10px',
- bottom: '0',
- right: '0',
- position: 'fixed',
- padding: '35px',
- },
}));
diff --git a/src/components/Dashboard/ProfilePage/ProfilePage.tsx b/src/components/Dashboard/ProfilePage/ProfilePage.tsx
index a2ed5b0afc845d5f4f93de001d4db74d96e17774..bf628a72ec85e5fb378325ad0d4e41426e7fcaec 100644
--- a/src/components/Dashboard/ProfilePage/ProfilePage.tsx
+++ b/src/components/Dashboard/ProfilePage/ProfilePage.tsx
@@ -3,20 +3,15 @@ import axios from 'axios';
import { NonAuthRoutes } from 'api/routes';
import { useHistory } from 'react-router-dom';
import {
- CssBaseline,
Grid,
Typography,
- Hidden,
- createMuiTheme,
- responsiveFontSizes,
- MuiThemeProvider,
TextField,
Button,
Select,
MenuItem,
FormControl,
} from '@material-ui/core';
-import { NavBar } from 'components/Dashboard/HomePage/NavBar';
+import { Header } from 'components/Utils/Header';
import { profilePageStyle } from './ProfilePage.style';
export const ProfilePage: FC = () => {
@@ -46,163 +41,133 @@ export const ProfilePage: FC = () => {
return (
<div data-testid="ProfilePage">
- <Grid container direction="column" className={classes.paddingBottom}>
- <div className={classes.root}>
- <CssBaseline />
+ <Header title="Setup" subtitle="your profile" />
+ <FormControl aria-label="Info User">
+ <Grid item container>
+ <Grid item xs={2} />
+ <Grid item container xs={8}>
+ <Grid item xs={5} className={classes.paddingTopLittle}>
+ <TextField
+ autoFocus
+ margin="dense"
+ id="firstName"
+ label="First Name"
+ type="text"
+ fullWidth
+ />
+ </Grid>
+ <Grid item xs={2} className={classes.paddingTopLittle} />
+ <Grid item xs={5} className={classes.paddingTopLittle}>
+ <TextField
+ autoFocus
+ margin="dense"
+ id="lastName"
+ label="Last Name"
+ type="text"
+ fullWidth
+ />
+ </Grid>
- <Grid item>
- <NavBar />
- </Grid>
+ <Grid item xs={5} className={classes.paddingTopLittle}>
+ <TextField
+ autoFocus
+ margin="dense"
+ id="address"
+ label="Address"
+ type="text"
+ fullWidth
+ />
+ </Grid>
+
+ <Grid item xs={2} className={classes.paddingTopLittle} />
- <header>
- <Grid item container className={classes.paddingBottom}>
- <Grid item xs={1} md={2} lg={2} />
+ <Grid item xs={2} className={classes.paddingTopLittle}>
+ <TextField
+ autoFocus
+ margin="dense"
+ id="cap"
+ label="CAP"
+ type="text"
+ fullWidth
+ />
+ </Grid>
- <Grid item xs={10} md={6} lg={4}>
- <Typography variant="h2" className={classes.whiteText}>
- Set Here Your
- </Typography>
- <Typography variant="h1" className={classes.whiteText}>
- PROFILE
- </Typography>
- </Grid>
+ <Grid item xs={1} className={classes.paddingTopLittle} />
- <Grid item xs={1} />
+ <Grid item xs={2} className={classes.paddingTopLittle}>
+ <TextField
+ autoFocus
+ margin="dense"
+ id="province"
+ label="Prov"
+ type="text"
+ fullWidth
+ />
+ </Grid>
+
+ <Grid item xs={12} className={classes.paddingTopLittle}>
+ <TextField
+ autoFocus
+ margin="dense"
+ id="email"
+ label="Email"
+ type="text"
+ fullWidth
+ />
</Grid>
- </header>
- </div>
-
- <FormControl aria-label="Info User">
- <Grid item container className={classes.paddingTop}>
- <Grid item xs={2} />
- <Grid item container xs={8}>
- <Grid item xs={12}>
- <Typography variant="h2">Your Profile Settings</Typography>
- </Grid>
-
- <Grid item xs={5} className={classes.paddingTopLittle}>
- <TextField
- autoFocus
- margin="dense"
- id="firstName"
- label="First Name"
- type="text"
- fullWidth
- />
- </Grid>
- <Grid item xs={2} className={classes.paddingTopLittle} />
- <Grid item xs={5} className={classes.paddingTopLittle}>
- <TextField
- autoFocus
- margin="dense"
- id="lastName"
- label="Last Name"
- type="text"
- fullWidth
- />
- </Grid>
-
- <Grid item xs={5} className={classes.paddingTopLittle}>
- <TextField
- autoFocus
- margin="dense"
- id="address"
- label="Address"
- type="text"
- fullWidth
- />
- </Grid>
-
- <Grid item xs={2} className={classes.paddingTopLittle} />
-
- <Grid item xs={2} className={classes.paddingTopLittle}>
- <TextField
- autoFocus
- margin="dense"
- id="cap"
- label="CAP"
- type="text"
- fullWidth
- />
- </Grid>
-
- <Grid item xs={1} className={classes.paddingTopLittle} />
-
- <Grid item xs={2} className={classes.paddingTopLittle}>
- <TextField
- autoFocus
- margin="dense"
- id="province"
- label="Prov"
- type="text"
- fullWidth
- />
- </Grid>
-
- <Grid item xs={12} className={classes.paddingTopLittle}>
- <TextField
- autoFocus
- margin="dense"
- id="email"
- label="Email"
- type="text"
- fullWidth
- />
- </Grid>
-
- <Grid item xs={12} className={classes.paddingTopLittle}>
- <TextField
- autoFocus
- margin="dense"
- id="cardNumber"
- label="Card No"
- type="text"
- fullWidth
- />
- </Grid>
-
- <Grid item xs={12} className={classes.paddingTop}>
- <Select
- labelId="Language"
- id="Language"
- label="Language"
- open={open}
- onClose={handleClose}
- onOpen={handleOpen}
- value={lang}
- onChange={handleChange}
- fullWidth
- >
- <MenuItem value={20}>Italiano</MenuItem>
- <MenuItem value={10}>English</MenuItem>
- <MenuItem value={30}>Deutsch</MenuItem>
- <MenuItem value={40}>Ladinisch</MenuItem>
- </Select>
- </Grid>
-
- <Button
- color="primary"
- variant="contained"
- className={classes.buttonUpdate}
- >
- Update
- </Button>
- <Button
+ <Grid item xs={12} className={classes.paddingTopLittle}>
+ <TextField
+ autoFocus
+ margin="dense"
+ id="cardNumber"
+ label="Card No"
+ type="text"
+ fullWidth
+ />
+ </Grid>
+
+ <Grid item xs={12} className={classes.paddingTop}>
+ <Select
+ labelId="Language"
+ id="Language"
+ label="Language"
+ open={open}
+ onClose={handleClose}
+ onOpen={handleOpen}
+ value={lang}
+ onChange={handleChange}
fullWidth
- variant="outlined"
- color="default"
- onClick={logout}
- className={classes.marginTop}
>
- Logout
- </Button>
+ <MenuItem value={20}>Italiano</MenuItem>
+ <MenuItem value={10}>English</MenuItem>
+ <MenuItem value={30}>Deutsch</MenuItem>
+ <MenuItem value={40}>Ladinisch</MenuItem>
+ </Select>
</Grid>
- <Grid item xs={2} />
+ <Button
+ color="primary"
+ variant="contained"
+ className={classes.buttonUpdate}
+ >
+ Update
+ </Button>
+
+ <Button
+ fullWidth
+ variant="outlined"
+ color="default"
+ onClick={logout}
+ className={classes.marginTop}
+ >
+ Logout
+ </Button>
</Grid>
- </FormControl>
- </Grid>
+
+ <Grid item xs={2} />
+ </Grid>
+ </FormControl>
</div>
);
};
diff --git a/src/components/Dashboard/ReservationPage/ReservationPage.tsx b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
index 2fbb7c843d4e6c46d7f998d174f7ef7e279608db..83f7cb80d1e96974a22a630d88f982add8f0f880 100644
--- a/src/components/Dashboard/ReservationPage/ReservationPage.tsx
+++ b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
import { Grid, Typography } from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import Fab from '@material-ui/core/Fab';
-import { ReservationPageHeader } from './ReservationPageHeader';
+import { Header } from 'components/Utils/Header';
import { ReservationDialog } from './ReservationDialog';
import { reservationPageStyle } from './ReservationPage.style';
import { ReservationListSwitcher } from './ReservationList/ReservationListSwitcher';
@@ -23,7 +23,7 @@ export const ReservationPage: FC = () => {
return (
<div data-testid="Reservation">
<Grid container direction="column" className={classes.paddingBottom}>
- <ReservationPageHeader />
+ <Header title="Plan here your" subtitle="reservations" />
<ReservationDialog handleClose={handleClose} isOpen={isOpen} />
<Fab
diff --git a/src/components/Utils/Header.style.ts b/src/components/Utils/Header.style.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1cb03a5f97a6f933ab7db3b967c1c3aa65ef5379
--- /dev/null
+++ b/src/components/Utils/Header.style.ts
@@ -0,0 +1,16 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export const headerStyles = makeStyles(() => ({
+ root: {
+ minHeight: '36vh',
+ backgroundImage: `url(${'/assets/bgMED.svg'})`,
+ backgroundRepeat: 'no-repeat',
+ backgroundSize: 'cover',
+ },
+ whiteText: {
+ color: 'white',
+ },
+ paddingBottom: {
+ paddingBottom: '65px',
+ },
+}));
diff --git a/src/components/Dashboard/ReservationPage/ReservationPageHeader.tsx b/src/components/Utils/Header.tsx
similarity index 66%
rename from src/components/Dashboard/ReservationPage/ReservationPageHeader.tsx
rename to src/components/Utils/Header.tsx
index e2765008e76301f2dc77a8a4b5491c2fe1968c37..9abe85eb267a50d1121b8597ac2c05b56e53c06b 100644
--- a/src/components/Dashboard/ReservationPage/ReservationPageHeader.tsx
+++ b/src/components/Utils/Header.tsx
@@ -1,10 +1,23 @@
import React, { FC } from 'react';
import { Grid, Typography } from '@material-ui/core';
import { NavBar } from 'components/Dashboard/HomePage/NavBar';
-import { reservationPageStyle } from './ReservationPage.style';
+import { headerStyles } from './Header.style';
-export const ReservationPageHeader: FC = () => {
- const classes = reservationPageStyle();
+type HeaderPropsType = {
+ title: string;
+ subtitle: string;
+};
+
+/**
+ * Header component that is reused across pages.
+ * @param {HeaderPropsType} titleSubtitle of the header.
+ * @returns
+ */
+export const Header: FC<HeaderPropsType> = ({
+ title,
+ subtitle,
+}: HeaderPropsType) => {
+ const classes = headerStyles();
return (
<Grid container direction="column" className={classes.paddingBottom}>
@@ -18,13 +31,12 @@ export const ReservationPageHeader: FC = () => {
<Grid item xs={10} md={6} lg={4}>
<Typography variant="h2" className={classes.whiteText}>
- Plan Here Your
+ {title}
</Typography>
<Typography variant="h2" className={classes.whiteText}>
- RESERVATIONS
+ {subtitle}
</Typography>
</Grid>
-
<Grid item xs={1} />
</Grid>
</header>
diff --git a/src/hooks/useRoleList.ts b/src/hooks/useRoleList.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bee1002f1047898cbb9dd2c080c3d4cff8221a67
--- /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;
+};