diff --git a/package.json b/package.json
index 33739b84709522b0282612e489d26578783ee60e..f1347bb724562704c063aa48e08ad5f5f40ae19c 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
"dependencies": {
"@material-ui/core": "^4.11.3",
"@material-ui/icons": "^4.11.2",
+ "@material-ui/lab": "^4.0.0-alpha.58",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
@@ -15,6 +16,7 @@
"@types/react-router-dom": "^5.1.7",
"axios": "^0.21.1",
"eslint-config-airbnb-typescript": "^12.3.1",
+ "humps": "^2.0.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-hook-form": "^6.15.5",
@@ -53,6 +55,7 @@
}
},
"devDependencies": {
+ "@types/humps": "^2.0.0",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"eslint": "^7.2.0",
diff --git a/public/assets/bgBIG (2).svg:Zone.Identifier b/public/assets/bgBIG (2).svg:Zone.Identifier
new file mode 100644
index 0000000000000000000000000000000000000000..be537eb44ca1e347e7a761c14b4f312c3e8c9543
Binary files /dev/null and b/public/assets/bgBIG (2).svg:Zone.Identifier differ
diff --git a/public/assets/bgBIG.svg b/public/assets/bgBIG.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c6f2d9d50b78734ae95ecf50632eebed18c6526c
--- /dev/null
+++ b/public/assets/bgBIG.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 2024.2 1036.5" style="enable-background:new 0 0 2024.2 1036.5;" xml:space="preserve">
+<style type="text/css">
+ .st0{fill:#7472F1;}
+ .st1{fill:#5E5CE4;}
+</style>
+<g id="Livello_3">
+ <polygon class="st0" points="-0.1,1036.5 2024.2,582.2 2024.2,-0.2 -0.1,-0.2 "/>
+</g>
+<g id="Livello_4">
+ <line class="st1" x1="2027.1" y1="-0.2" x2="-0.1" y2="-0.2"/>
+ <polyline class="st1" points="-0.1,-0.2 -0.1,51.4 668.3,886 2027.1,583.7 2027.1,-0.2 "/>
+</g>
+</svg>
diff --git a/public/assets/bgBIG.svg:Zone.Identifier b/public/assets/bgBIG.svg:Zone.Identifier
new file mode 100644
index 0000000000000000000000000000000000000000..be537eb44ca1e347e7a761c14b4f312c3e8c9543
Binary files /dev/null and b/public/assets/bgBIG.svg:Zone.Identifier differ
diff --git a/public/assets/bgMED.svg b/public/assets/bgMED.svg
new file mode 100644
index 0000000000000000000000000000000000000000..71a26b9d87a3bfa91b0cac16142fb0201d7d22f1
--- /dev/null
+++ b/public/assets/bgMED.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 429.52"><defs><style>.cls-1{fill:#7472f1;}.cls-2{fill:#5e5ce4;}</style></defs><g id="Livello_2" data-name="Livello 2"><polygon class="cls-1" points="0 0 0 429.52 2000 235.08 2000 0 0 0"/></g><g id="Livello_3" data-name="Livello 3"><polygon class="cls-2" points="436.83 0 610.44 370.17 2000 235.08 2000 0 436.83 0"/></g></svg>
\ No newline at end of file
diff --git a/public/assets/bgMED.svg:Zone.Identifier b/public/assets/bgMED.svg:Zone.Identifier
new file mode 100644
index 0000000000000000000000000000000000000000..be537eb44ca1e347e7a761c14b4f312c3e8c9543
Binary files /dev/null and b/public/assets/bgMED.svg:Zone.Identifier differ
diff --git a/src/api/ResponseProps.ts b/src/api/ResponseProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c8bcd082ed4da57cade72ab50fc16d6df614bf6f
--- /dev/null
+++ b/src/api/ResponseProps.ts
@@ -0,0 +1,10 @@
+export type ResponseProps = {
+ id: number;
+ user: {
+ email: string;
+ firstName: string;
+ lastName: string;
+ username: string;
+ };
+ memberCardNumber: number;
+};
diff --git a/src/api/getSeniorList.ts b/src/api/getSeniorList.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dd6f89fe72543a98720635451bc4e358150ab432
--- /dev/null
+++ b/src/api/getSeniorList.ts
@@ -0,0 +1,8 @@
+import axios from 'axios';
+import { camelizeKeys } from 'humps';
+import { ResponseProps } from './ResponseProps';
+
+export const getSeniorList = async (name: string): Promise<ResponseProps[]> =>
+ axios
+ .get(`/api/web/seniors/by_name/${name}?fields=user,id,member_card_number`)
+ .then((res) => camelizeKeys(res.data) as ResponseProps[]);
diff --git a/src/api/getSeniorListByCard.ts b/src/api/getSeniorListByCard.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b8307e7424c075cce962fec0bc646835d34a142c
--- /dev/null
+++ b/src/api/getSeniorListByCard.ts
@@ -0,0 +1,13 @@
+import axios from 'axios';
+import { camelizeKeys } from 'humps';
+import { ResponseProps } from './ResponseProps';
+
+export const getSeniorListByCard = async (
+ card: number,
+): Promise<ResponseProps[]> =>
+ axios
+ .get(
+ `/api/web/seniors/by_member_card/${card}?fields=user,id,member_card_number`,
+ )
+ .then((res) => camelizeKeys(res.data) as ResponseProps[])
+ .catch(() => [] as ResponseProps[]);
diff --git a/src/api/setReservation.ts b/src/api/setReservation.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0d10fafc65d92eb6788c249c5c531dd2212c3db8
--- /dev/null
+++ b/src/api/setReservation.ts
@@ -0,0 +1,4 @@
+import axios from 'axios';
+
+export const setReservation = async (reservation: any): Promise<void> =>
+ axios.options('/api/web/reservations', {}).then((res) => console.log(res));
diff --git a/src/components/Auth/ChoseRole/ChoseRole.tsx b/src/components/Auth/ChoseRole/ChoseRole.tsx
index 334e2bbdf6582d738c62608511cfc49ff848b5f6..558f33a91552709b544484aeb6e34176d91d6830 100644
--- a/src/components/Auth/ChoseRole/ChoseRole.tsx
+++ b/src/components/Auth/ChoseRole/ChoseRole.tsx
@@ -5,6 +5,7 @@ import { setRole } from 'api/setRole';
import { useHistory } from 'react-router-dom';
import { AuthRoutes } from 'api/routes';
import { AuthContext } from 'components/Auth/AuthContext';
+import { getRole } from 'api/getRole';
/**
* Page that let's users decide role between available roles.
@@ -17,11 +18,10 @@ export const ChoseRole: FC = () => {
const { setIsAuth } = useContext(AuthContext);
const choseAndForward = (role: string): void => {
- // Set role in the server.
- setRole(role);
setIsAuth(true);
- // Push to homepage.
- history.push(`${AuthRoutes.dashboard}${AuthRoutes.home}`);
+ setRole(role).then(() =>
+ history.push(`${AuthRoutes.dashboard}${AuthRoutes.home}`),
+ );
};
useEffect(() => {
diff --git a/src/components/Auth/SignInForm/SignInForm.tsx b/src/components/Auth/SignInForm/SignInForm.tsx
index 3c44dcb3d38b91c7f8f702c500ec0f64c2866d30..acdf52220b5999628040975319e89055f93d2314 100644
--- a/src/components/Auth/SignInForm/SignInForm.tsx
+++ b/src/components/Auth/SignInForm/SignInForm.tsx
@@ -3,13 +3,24 @@ import axios from 'axios';
import { useCookie } from 'hooks/useCookie';
import { AuthRoutes, NonAuthRoutes } from 'api/routes';
import { SubmitHandler, useForm } from 'react-hook-form';
-import { Button } from '@material-ui/core';
+import {
+ Button,
+ createMuiTheme,
+ responsiveFontSizes,
+ MuiThemeProvider,
+ Grid,
+ Typography,
+ Link,
+} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
import { AuthContext } from 'components/Auth/AuthContext';
import { InputField } from 'components/Auth/InputField/InputField';
import { useStyles } from './useStyles';
import { CredentialsType } from './CredentialsType';
+let themeResp = createMuiTheme();
+themeResp = responsiveFontSizes(themeResp);
+
const defaultValues = {
username: '',
password: '',
@@ -65,6 +76,16 @@ export const SignInForm: FC = () => {
const classes = useStyles();
return (
<>
+ <header>
+ <MuiThemeProvider theme={themeResp}>
+ <Grid item container>
+ <Grid item xs={12} color="primary" className={classes.paddingTop}>
+ <Typography variant="h1">SIGN IN</Typography>
+ </Grid>
+ </Grid>
+ </MuiThemeProvider>
+ </header>
+
<form
className={classes.form}
onSubmit={handleSubmit(onSubmit)}
@@ -79,7 +100,7 @@ export const SignInForm: FC = () => {
message: 'Username is not valid',
},
}}
- label="username"
+ label="Username"
type="username"
error={!!errors.username}
errorMessage="Insert username"
@@ -112,6 +133,24 @@ export const SignInForm: FC = () => {
>
Sign In
</Button>
+
+ <MuiThemeProvider theme={themeResp}>
+ <Grid item container>
+ <Grid
+ item
+ xs={12}
+ color="primary"
+ className={classes.paddingBottom}
+ >
+ <Typography>
+ New here?
+ <Link href={`${NonAuthRoutes.auth}${NonAuthRoutes.signUp}`}>
+ Create an account.
+ </Link>
+ </Typography>
+ </Grid>
+ </Grid>
+ </MuiThemeProvider>
</form>
</>
);
diff --git a/src/components/Auth/SignInForm/useStyles.ts b/src/components/Auth/SignInForm/useStyles.ts
index 4a510bf92bf7cffee0efce3aebfd00998f44a3be..3af22d136f8594d86ae7d5f0c785fe2f094b7e1b 100644
--- a/src/components/Auth/SignInForm/useStyles.ts
+++ b/src/components/Auth/SignInForm/useStyles.ts
@@ -14,5 +14,11 @@ export const useStyles = makeStyles((theme: Theme) =>
submit: {
margin: theme.spacing(3, 0, 2),
},
+ paddingTop: {
+ paddingTop: theme.spacing(10),
+ },
+ paddingBottom: {
+ paddingBottom: theme.spacing(10),
+ },
}),
);
diff --git a/src/components/Auth/SignUpForm/SeniorType.ts b/src/components/Auth/SignUpForm/SeniorType.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ffda2b4b8caf4dba210b0132cca0a4bfa1b3dcb6
--- /dev/null
+++ b/src/components/Auth/SignUpForm/SeniorType.ts
@@ -0,0 +1,12 @@
+export type SeniorType = {
+ username: string;
+ password: string;
+ firstName: string;
+ lastName: string;
+ email: string;
+ phoneNumber: number;
+ address: number;
+ name: string;
+ memberCardNumber: number;
+ notes: string;
+};
diff --git a/src/components/Auth/SignUpForm/SignUpForm.tsx b/src/components/Auth/SignUpForm/SignUpForm.tsx
index b947b51260790a2c723816f22f4b1f84e0e6061c..29d41edce44380fb6f6bf66fb5cd615557fb34e7 100644
--- a/src/components/Auth/SignUpForm/SignUpForm.tsx
+++ b/src/components/Auth/SignUpForm/SignUpForm.tsx
@@ -1,7 +1,16 @@
import React, { FC } from 'react';
import { SubmitHandler, useForm } from 'react-hook-form';
-import { Button } from '@material-ui/core';
-
+import {
+ Button,
+ createMuiTheme,
+ responsiveFontSizes,
+ MuiThemeProvider,
+ Grid,
+ Typography,
+ Link,
+ Hidden,
+} from '@material-ui/core';
+import { AuthRoutes, NonAuthRoutes } from 'api/routes';
import axios from 'axios';
import { InputField } from 'components/Auth/InputField/InputField';
import { useStyles } from 'components/Auth/SignUpForm/useStyles';
@@ -21,6 +30,9 @@ export const SignUpForm: FC = () => {
notes: string;
};
+ let themeResp = createMuiTheme();
+ themeResp = responsiveFontSizes(themeResp);
+
const { control, errors, handleSubmit } = useForm<FormData>();
const onSubmit: SubmitHandler<FormData> = (values: FormData) => {
@@ -55,166 +67,209 @@ export const SignUpForm: FC = () => {
const classes = useStyles();
return (
<>
+ <header>
+ <MuiThemeProvider theme={themeResp}>
+ <Grid item container>
+ <Grid item xs={12} color="primary" className={classes.paddingTop}>
+ <Typography variant="h1">SIGN UP</Typography>
+ </Grid>
+ </Grid>
+ </MuiThemeProvider>
+ </header>
+
<form
className={classes.form}
onSubmit={handleSubmit(onSubmit)}
data-testid="Form"
>
- <InputField
- name="email"
- type="email"
- control={control}
- rules={{
- validate: (value: string) =>
- /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value),
- required: {
- value: true,
- message: 'Email is not valid',
- },
- }}
- label="Email"
- error={!!errors.email}
- errorMessage="Insert email"
- />
-
- <InputField
- name="password"
- type="password"
- control={control}
- rules={{
- minLength: 8,
- maxLength: 60,
- required: {
- value: true,
- message: 'Insert valid password',
- },
- }}
- label="Password"
- error={!!errors.password}
- errorMessage="Insert valid password"
- />
-
- <InputField
- name="username"
- type="text"
- control={control}
- rules={{
- maxLength: 150,
- required: {
- value: true,
- message: 'Insert valid username',
- },
- }}
- label="Username"
- error={!!errors.username}
- errorMessage="Insert valid username"
- />
-
- <InputField
- name="firstName"
- type="text"
- control={control}
- rules={{
- maxLength: 150,
- required: {
- value: true,
- message: 'Insert valid first name',
- },
- }}
- label="First name"
- error={!!errors.firstName}
- errorMessage="Insert valid first name"
- />
-
- <InputField
- name="lastName"
- type="text"
- control={control}
- rules={{
- maxLength: 150,
- required: {
- value: true,
- message: 'Insert valid last name',
- },
- }}
- label="Last name"
- error={!!errors.lastName}
- errorMessage="Insert valid last name"
- />
-
- <InputField
- name="address"
- type="text"
- control={control}
- rules={{
- required: {
- value: true,
- message: 'Insert valid address',
- },
- }}
- label="Address"
- error={!!errors.address}
- errorMessage="Insert valid address"
- />
-
- <InputField
- name="phoneNumber"
- type="number"
- control={control}
- rules={{
- maxLength: 15,
- required: {
- value: true,
- message: 'Insert valid phone number',
- },
- }}
- label="Phone number"
- error={!!errors.phoneNumber}
- errorMessage="Insert valid phone number"
- />
-
- <InputField
- name="memberCardNumber"
- type="number"
- control={control}
- rules={{
- maxLength: 20,
- required: {
- value: true,
- message: 'Insert valid card number',
- },
- }}
- label="Card number"
- error={!!errors.memberCardNumber}
- errorMessage="Insert valid card number"
- />
-
- <InputField
- name="notes"
- type="text"
- control={control}
- rules={{
- required: {
- value: true,
- message: 'Add notes',
- },
- }}
- label="Notes"
- error={!!errors.notes}
- errorMessage="Insert notes"
- />
-
- <Button
- data-testid="Submit"
- type="submit"
- fullWidth
- variant="contained"
- color="primary"
- className={classes.submit}
- >
- Sign Up
- </Button>
+ <Grid item container>
+ <Grid item xs={12} md={5}>
+ <InputField
+ name="firstName"
+ type="text"
+ control={control}
+ rules={{
+ maxLength: 150,
+ required: {
+ value: true,
+ message: 'Insert valid first name',
+ },
+ }}
+ label="First name"
+ error={!!errors.firstName}
+ errorMessage="Insert valid first name"
+ />
+ </Grid>
+
+ <Hidden smDown>
+ <Grid item xs={2} />
+ </Hidden>
+
+ <Grid item xs={12} md={5}>
+ <InputField
+ name="lastName"
+ type="text"
+ control={control}
+ rules={{
+ maxLength: 150,
+ required: {
+ value: true,
+ message: 'Insert valid last name',
+ },
+ }}
+ label="Last name"
+ error={!!errors.lastName}
+ errorMessage="Insert valid last name"
+ />
+ </Grid>
+
+ <InputField
+ name="address"
+ type="text"
+ control={control}
+ rules={{
+ required: {
+ value: true,
+ message: 'Insert valid address',
+ },
+ }}
+ label="Address"
+ error={!!errors.address}
+ errorMessage="Insert valid address"
+ />
+
+ <Grid item xs={12} md={5}>
+ <InputField
+ name="phoneNumber"
+ type="number"
+ control={control}
+ rules={{
+ maxLength: 15,
+ required: {
+ value: true,
+ message: 'Insert valid phone number',
+ },
+ }}
+ label="Phone number"
+ error={!!errors.phoneNumber}
+ errorMessage="Insert valid phone number"
+ />
+ </Grid>
+
+ <Hidden smDown>
+ <Grid item xs={2} />
+ </Hidden>
+
+ <Grid item xs={12} md={5}>
+ <InputField
+ name="memberCardNumber"
+ type="number"
+ control={control}
+ rules={{
+ maxLength: 20,
+ required: {
+ value: true,
+ message: 'Insert valid card number',
+ },
+ }}
+ label="Card number"
+ error={!!errors.memberCardNumber}
+ errorMessage="Insert valid card number"
+ />
+ </Grid>
+
+ <Grid item xs={12} className={classes.paddingBottomSmall}>
+ <InputField
+ name="notes"
+ type="text"
+ control={control}
+ rules={{
+ required: {
+ value: true,
+ message: 'Add notes',
+ },
+ }}
+ label="Notes"
+ error={!!errors.notes}
+ errorMessage="Insert notes"
+ />
+ </Grid>
+
+ <InputField
+ name="username"
+ type="text"
+ control={control}
+ rules={{
+ maxLength: 150,
+ required: {
+ value: true,
+ message: 'Insert valid username',
+ },
+ }}
+ label="Username"
+ error={!!errors.username}
+ errorMessage="Insert valid username"
+ />
+
+ <InputField
+ name="email"
+ type="email"
+ control={control}
+ rules={{
+ validate: (value: string) =>
+ /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value),
+ required: {
+ value: true,
+ message: 'Email is not valid',
+ },
+ }}
+ label="Email"
+ error={!!errors.email}
+ errorMessage="Insert email"
+ />
+
+ <InputField
+ name="password"
+ type="password"
+ control={control}
+ rules={{
+ minLength: 8,
+ maxLength: 60,
+ required: {
+ value: true,
+ message: 'Insert valid password',
+ },
+ }}
+ label="Password"
+ error={!!errors.password}
+ errorMessage="Insert valid password"
+ />
+
+ <Button
+ data-testid="Submit"
+ type="submit"
+ fullWidth
+ variant="contained"
+ color="primary"
+ className={classes.submit}
+ >
+ Sign Up
+ </Button>
+ </Grid>
</form>
+
+ <MuiThemeProvider theme={themeResp}>
+ <Grid item container>
+ <Grid item xs={12} color="primary" className={classes.paddingBottom}>
+ <Typography>
+ Already have an account?
+ <Link href={`${NonAuthRoutes.auth}${NonAuthRoutes.signIn}`}>
+ Log in.
+ </Link>
+ </Typography>
+ </Grid>
+ </Grid>
+ </MuiThemeProvider>
</>
);
};
diff --git a/src/components/Auth/SignUpForm/useStyles.ts b/src/components/Auth/SignUpForm/useStyles.ts
index 4a510bf92bf7cffee0efce3aebfd00998f44a3be..2928c5712f1aadc12d4e51b3507180d3c629e61b 100644
--- a/src/components/Auth/SignUpForm/useStyles.ts
+++ b/src/components/Auth/SignUpForm/useStyles.ts
@@ -14,5 +14,14 @@ export const useStyles = makeStyles((theme: Theme) =>
submit: {
margin: theme.spacing(3, 0, 2),
},
+ paddingTop: {
+ paddingTop: theme.spacing(10),
+ },
+ paddingBottom: {
+ paddingBottom: theme.spacing(10),
+ },
+ paddingBottomSmall: {
+ paddingBottom: theme.spacing(5),
+ },
}),
);
diff --git a/src/components/Authorization/Authorization.tsx b/src/components/Authorization/Authorization.tsx
index 08db3cea5572ddc10184b44cece73f59e49e5ce7..f63265ece6abbabb13fb33a7ae5083496d3269a9 100644
--- a/src/components/Authorization/Authorization.tsx
+++ b/src/components/Authorization/Authorization.tsx
@@ -4,6 +4,8 @@ import { NonAuthRoutes } from 'api/routes';
import { Redirect } from 'react-router-dom';
import { Unauthorized } from 'components/Unauthorized/Unauthorized';
import { AuthContext } from 'components/Auth/AuthContext';
+import { useRole } from 'hooks/useRole';
+import { useAuth } from 'hooks/useAuth';
const HandleIsAuth: FC<{ isAuth: boolean }> = ({ isAuth }) =>
isAuth ? (
@@ -35,11 +37,12 @@ export const withAuthorization = (allowedRoles: string[]) => <
const ComponentWithAuthorization: FC<T> = (
props: Omit<T, keyof WithAuthProps>,
) => {
- const { role, isAuth } = useContext(AuthContext);
- console.log(`ROLE ${role} AUTH ${isAuth}`);
+ const [role, setRole, isLoading] = useRole();
+ const [isAuth] = useAuth();
+ console.log(`ROLE ${role} AUTH ${isAuth} LOADED ${isLoading}`);
/* eslint-disable no-nested-ternary */
- return typeof isAuth === null && role === null ? (
+ return isAuth === null || isLoading ? (
<BlurCircular />
) : // props comes afterwards so the can override the default ones.
allowedRoles.includes(role) && isAuth ? (
diff --git a/src/components/Dashboard/HomePage/HomePage.tsx b/src/components/Dashboard/HomePage/HomePage.tsx
index 94f1eb7c9ed64465e724d768f8aa600096bc90f4..02ec6a3d796d9a10fa3fc776cc2b3724ffaaab1b 100644
--- a/src/components/Dashboard/HomePage/HomePage.tsx
+++ b/src/components/Dashboard/HomePage/HomePage.tsx
@@ -22,7 +22,7 @@ themeResp = responsiveFontSizes(themeResp);
const useStyles = makeStyles(() => ({
root: {
minHeight: '100vh',
- backgroundImage: `url(${'/assets/bg3.png'})`,
+ backgroundImage: `url(${'/assets/bgBIG.svg'})`,
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
},
@@ -98,32 +98,33 @@ export const HomePage: FC = () => {
</MuiThemeProvider>
</div>
- <Grid item container className={classes.paddingTop}>
- <Grid item xs={2} />
- <Grid item xs={8}>
- <Typography variant="h3">Your Next Reservation</Typography>
+ <MuiThemeProvider theme={themeResp}>
+ <Grid item container className={classes.paddingTop}>
+ <Grid item xs={2} />
+ <Grid item xs={8}>
+ <Typography variant="h2">Your Next Reservation</Typography>
+ </Grid>
+ <Grid item xs={2} />
</Grid>
- <Grid item xs={2} />
- </Grid>
- <Grid item container style={{ paddingTop: '20px' }}>
- <Grid item xs={1} lg={2} />
- <Grid item xs={10} lg={8}>
- <Reservation departure="" destination="" time="" date="" />
+ <Grid item container style={{ paddingTop: '20px' }}>
+ <Grid item xs={1} lg={2} />
+ <Grid item xs={10} lg={8}>
+ <Reservation departure="" destination="" time="" date="" />
+ </Grid>
+ <Grid item xs={1} lg={2} />
</Grid>
- <Grid item xs={1} lg={2} />
- </Grid>
- <Grid item container className={classes.paddingTop}>
- <Grid item xs={2} />
- <Grid item xs={8}>
- <Typography variant="h3" align="right">
- Some Our Numbers
- </Typography>
+ <Grid item container className={classes.paddingTop}>
+ <Grid item xs={2} />
+ <Grid item xs={8}>
+ <Typography variant="h2" align="right">
+ Some Our Numbers
+ </Typography>
+ </Grid>
+ <Grid item xs={2} />
</Grid>
- <Grid item xs={2} />
- </Grid>
-
+ </MuiThemeProvider>
<Numbers />
</Grid>
);
diff --git a/src/components/Dashboard/HomePage/NavBar.tsx b/src/components/Dashboard/HomePage/NavBar.tsx
index e05702fe0be796606d802702a5b88f2d9276c5b8..db1bb7be12d30e20fb14a823e5c074998df29359 100644
--- a/src/components/Dashboard/HomePage/NavBar.tsx
+++ b/src/components/Dashboard/HomePage/NavBar.tsx
@@ -1,6 +1,6 @@
import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core/styles';
-import { Tabs, Tab } from '@material-ui/core';
+import { Tabs, Tab, Grid, Hidden } from '@material-ui/core';
import HomeIcon from '@material-ui/icons/Home';
import ImportContactsIcon from '@material-ui/icons/ImportContacts';
import AccountCircleIcon from '@material-ui/icons/AccountCircle';
@@ -28,6 +28,21 @@ const useStyles = makeStyles(() => ({
rightAlign: {
marginLeft: 'auto',
},
+ tabsSmall: {
+ color: 'white',
+ paddingLeft: '1.2em',
+ paddingRight: '1em',
+ paddingTop: '0.9em',
+ paddingBottom: '2em',
+ width: '100%',
+ },
+ tabIconSmall: {
+ fontSize: '2.4em',
+ },
+ tabPanSmall: {
+ paddingLeft: '2em',
+ paddingRight: '2em',
+ },
}));
export const NavBar: FC = () => {
@@ -45,32 +60,65 @@ export const NavBar: FC = () => {
};
return (
- <Tabs
- variant="scrollable"
- scrollButtons="on"
- onChange={handleChange}
- value={value}
- className={classes.tabs}
- TabIndicatorProps={{ style: { display: 'none' } }}
- >
- <Tab
- label="HomePage"
- value={`${AuthRoutes.dashboard}${AuthRoutes.home}`}
- icon={<HomeIcon className={classes.tabIcon} />}
- className={classes.tabPan}
- />
- <Tab
- label="Reservation"
- value={`${AuthRoutes.dashboard}${AuthRoutes.reservation}`}
- icon={<ImportContactsIcon className={classes.tabIcon} />}
- className={`${classes.tabPan} ${classes.rightAlign}`}
- />
- <Tab
- label="Profile"
- value={`${AuthRoutes.dashboard}${AuthRoutes.profile}`}
- className={classes.tabPan}
- icon={<AccountCircleIcon className={classes.tabIcon} />}
- />
- </Tabs>
+ <div>
+ <Hidden smDown>
+ <Tabs
+ onChange={handleChange}
+ value={value}
+ className={classes.tabs}
+ TabIndicatorProps={{ style: { display: 'none' } }}
+ >
+ <Tab
+ label="HomePage"
+ value={`${AuthRoutes.dashboard}${AuthRoutes.home}`}
+ icon={<HomeIcon className={classes.tabIcon} />}
+ className={classes.tabPan}
+ />
+
+ <Tab
+ label="Reservation"
+ value={`${AuthRoutes.dashboard}${AuthRoutes.reservation}`}
+ icon={<ImportContactsIcon className={classes.tabIcon} />}
+ className={`${classes.tabPan} ${classes.rightAlign}`}
+ />
+ <Tab
+ label="Profile"
+ value={`${AuthRoutes.dashboard}${AuthRoutes.profile}`}
+ className={classes.tabPan}
+ icon={<AccountCircleIcon className={classes.tabIcon} />}
+ />
+ </Tabs>
+ </Hidden>
+
+ <Hidden mdUp>
+ <Tabs
+ onChange={handleChange}
+ value={value}
+ className={classes.tabsSmall}
+ TabIndicatorProps={{ style: { display: 'none' } }}
+ centered
+ >
+ <Tab
+ label=""
+ value={`${AuthRoutes.dashboard}${AuthRoutes.home}`}
+ icon={<HomeIcon className={classes.tabIconSmall} />}
+ className={classes.tabPanSmall}
+ />
+
+ <Tab
+ label=""
+ value={`${AuthRoutes.dashboard}${AuthRoutes.reservation}`}
+ icon={<ImportContactsIcon className={classes.tabIconSmall} />}
+ className={classes.tabPanSmall}
+ />
+ <Tab
+ label=""
+ value={`${AuthRoutes.dashboard}${AuthRoutes.profile}`}
+ icon={<AccountCircleIcon className={classes.tabIconSmall} />}
+ className={classes.tabPanSmall}
+ />
+ </Tabs>
+ </Hidden>
+ </div>
);
};
diff --git a/src/components/Dashboard/HomePage/NavBarLogin.tsx b/src/components/Dashboard/HomePage/NavBarLogin.tsx
index e37413e0ddd4d1cd44a60f9eb517e09c0560ee5e..718c6a16dc09d48d1625c238ef71b77cc78888d7 100644
--- a/src/components/Dashboard/HomePage/NavBarLogin.tsx
+++ b/src/components/Dashboard/HomePage/NavBarLogin.tsx
@@ -45,19 +45,22 @@ export const NavBarLogin: FC = () => {
};
return (
- <Tabs
- textColor="primary"
- onChange={handleChange}
- value={value}
- className={classes.tabs}
- TabIndicatorProps={{ style: { display: 'none' } }}
- >
- <Tab
- value={`${AuthRoutes.dashboard}${AuthRoutes.home}`}
- label="Login"
- icon={<LockIcon className={classes.tabIcon} />}
- className={`${classes.tabPan} ${classes.rightAlign}`}
- />
- </Tabs>
+ <nav>
+ <Tabs
+ textColor="primary"
+ onChange={handleChange}
+ value={value}
+ className={classes.tabs}
+ TabIndicatorProps={{ style: { display: 'none' } }}
+ >
+ <Tab
+ value={`${AuthRoutes.dashboard}${AuthRoutes.home}`}
+ label="Login"
+ icon={<LockIcon className={classes.tabIcon} />}
+ className={`${classes.tabPan} ${classes.rightAlign}`}
+ aria-label="Login"
+ />
+ </Tabs>
+ </nav>
);
};
diff --git a/src/components/Dashboard/HomePage/Numbers.tsx b/src/components/Dashboard/HomePage/Numbers.tsx
index 20f38c870d04171411e355d21afe7ca52efba788..c97a5fccd0795c99bc7718958c3358489b71e0b9 100644
--- a/src/components/Dashboard/HomePage/Numbers.tsx
+++ b/src/components/Dashboard/HomePage/Numbers.tsx
@@ -69,9 +69,17 @@ export const Numbers: FC = () => {
300
</Typography>
- <Typography variant="h6" align="center">
- Rides Offered
- </Typography>
+ <Hidden smDown>
+ <Typography variant="h5" align="center">
+ Rides Offered
+ </Typography>
+ </Hidden>
+
+ <Hidden mdUp>
+ <Typography variant="h5" align="center">
+ Rides
+ </Typography>
+ </Hidden>
</CardContent>
</Grid>
@@ -92,12 +100,20 @@ export const Numbers: FC = () => {
</Grid>
<Typography variant="h4" align="center">
- 25000
+ 2500
</Typography>
- <Typography variant="h6" align="center">
- Kilometers
- </Typography>
+ <Hidden smDown>
+ <Typography variant="h5" align="center">
+ Kilometers
+ </Typography>
+ </Hidden>
+
+ <Hidden mdUp>
+ <Typography variant="h5" align="center">
+ Kms
+ </Typography>
+ </Hidden>
</CardContent>
</Grid>
@@ -125,9 +141,17 @@ export const Numbers: FC = () => {
225
</Typography>
- <Typography variant="h6" align="center">
- People who used our service
- </Typography>
+ <Hidden smDown>
+ <Typography variant="h5" align="center">
+ People who used our service
+ </Typography>
+ </Hidden>
+
+ <Hidden mdUp>
+ <Typography variant="h5" align="center">
+ Users
+ </Typography>
+ </Hidden>
</CardContent>
</Grid>
diff --git a/src/components/Dashboard/HomePage/Steps.tsx b/src/components/Dashboard/HomePage/Steps.tsx
index 2452c59d93467d111e979526541d69f24e409410..3302c8dd6dac3d548d32223e3c7e2b8f6472f09e 100644
--- a/src/components/Dashboard/HomePage/Steps.tsx
+++ b/src/components/Dashboard/HomePage/Steps.tsx
@@ -19,6 +19,12 @@ const useStyles = makeStyles(() => ({
boxShadow: 'none',
backgroundColor: 'transparent',
},
+ bodyText: {
+ fontSize: '1.26em',
+ },
+ bodyTextLarger: {
+ fontSize: '2.3em',
+ },
}));
export const Steps: FC = () => {
@@ -30,7 +36,11 @@ export const Steps: FC = () => {
<Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
<CardContent>
- <Typography variant="h4" align="center">
+ <Typography
+ variant="h2"
+ className={classes.bodyTextLarger}
+ align="center"
+ >
STEP 1
</Typography>
@@ -46,7 +56,7 @@ export const Steps: FC = () => {
</Grid>
</Grid>
- <Typography variant="h6">
+ <Typography variant="body1" className={classes.bodyText}>
Log In or Register an account on the site. Fill all the fields
related to your personal information.
</Typography>
@@ -67,7 +77,11 @@ export const Steps: FC = () => {
<Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
<CardContent>
- <Typography variant="h4" align="center">
+ <Typography
+ variant="h2"
+ className={classes.bodyTextLarger}
+ align="center"
+ >
STEP 2
</Typography>
@@ -83,7 +97,7 @@ export const Steps: FC = () => {
</Grid>
</Grid>
- <Typography variant="h6">
+ <Typography variant="body1" className={classes.bodyText}>
Book in the reservation section a free ride at least 48h than your
appointment
</Typography>
@@ -103,7 +117,11 @@ export const Steps: FC = () => {
<Grid item xs={10} lg={2} component={Card} className={classes.paddingBot}>
<CardContent>
- <Typography variant="h4" align="center">
+ <Typography
+ variant="h2"
+ className={classes.bodyTextLarger}
+ align="center"
+ >
STEP 3
</Typography>
@@ -119,7 +137,7 @@ export const Steps: FC = () => {
</Grid>
</Grid>
- <Typography variant="h6">
+ <Typography variant="body1" className={classes.bodyText}>
Wait your free drive compfortably at home and reach the place you
have booked in the reservation easily!
</Typography>
diff --git a/src/components/Dashboard/ProfilePage/ProfilePage.tsx b/src/components/Dashboard/ProfilePage/ProfilePage.tsx
index 2856a225f1f4fe806dece906f90bbd143a6f30a3..6a23d52784af6ab8127699699969f8fc778d2905 100644
--- a/src/components/Dashboard/ProfilePage/ProfilePage.tsx
+++ b/src/components/Dashboard/ProfilePage/ProfilePage.tsx
@@ -1,9 +1,97 @@
import React, { FC, useContext } from 'react';
-import Button from '@material-ui/core/Button';
+import { makeStyles } from '@material-ui/core/styles';
import axios from 'axios';
import { NonAuthRoutes } from 'api/routes';
import { useHistory } from 'react-router-dom';
import { AuthContext } from 'components/Auth/AuthContext';
+import {
+ CssBaseline,
+ Grid,
+ Typography,
+ Hidden,
+ createMuiTheme,
+ responsiveFontSizes,
+ MuiThemeProvider,
+ TextField,
+ Button,
+ Select,
+ MenuItem,
+ FormControl,
+} from '@material-ui/core';
+import { NavBar } from 'components/Dashboard/HomePage/NavBar';
+
+let themeResp = createMuiTheme();
+themeResp = responsiveFontSizes(themeResp);
+
+const useStyles = 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',
+ },
+ marginTop: {
+ marginTop: '5em',
+ },
+ marginTopLittle: {
+ marginTop: '1em',
+ },
+
+ buttonUpdate: {
+ marginTop: '2em',
+ marginLeft: 'auto',
+ },
+ paddingTopLittle: {
+ paddingTop: '1em',
+ },
+ 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: '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',
+ },
+}));
export const ProfilePage: FC = () => {
const history = useHistory();
@@ -15,11 +103,186 @@ export const ProfilePage: FC = () => {
});
};
+ const classes = useStyles();
+
+ const [lang, setLang] = React.useState<string | number>('');
+ const [open, setOpen] = React.useState(false);
+
+ const handleChange = (event: React.ChangeEvent<{ value: unknown }>): void => {
+ setLang(event.target.value as number);
+ };
+
+ const handleClose = (): void => {
+ setOpen(false);
+ };
+
+ const handleOpen = (): void => {
+ setOpen(true);
+ };
+
return (
<div data-testid="ProfilePage">
- <Button variant="outlined" color="default" onClick={logout}>
- Logout
- </Button>
+ <Grid container direction="column" className={classes.paddingBottom}>
+ <div className={classes.root}>
+ <CssBaseline />
+
+ <Grid item>
+ <NavBar />
+ </Grid>
+
+ <header>
+ <MuiThemeProvider theme={themeResp}>
+ <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}>
+ Set Here Your
+ </Typography>
+ <Typography variant="h1" className={classes.whiteText}>
+ PROFILE
+ </Typography>
+ </Grid>
+
+ <Grid item xs={1} />
+ </Grid>
+ </MuiThemeProvider>
+ </header>
+ </div>
+
+ <FormControl aria-label="Info User">
+ <MuiThemeProvider theme={themeResp}>
+ <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
+ fullWidth
+ variant="outlined"
+ color="default"
+ onClick={logout}
+ className={classes.marginTop}
+ >
+ Logout
+ </Button>
+ </Grid>
+
+ <Grid item xs={2} />
+ </Grid>
+ </MuiThemeProvider>
+ </FormControl>
+ </Grid>
</div>
);
};
diff --git a/src/components/Dashboard/ReservationPage/Reservation/ReservationProps.ts b/src/components/Dashboard/ReservationPage/Reservation/ReservationProps.ts
index 512c6c9e38e13a4cefe0c6a4f64f0e6a149e6be6..1819723c15e41da04615003a786aea3ef0f40644 100644
--- a/src/components/Dashboard/ReservationPage/Reservation/ReservationProps.ts
+++ b/src/components/Dashboard/ReservationPage/Reservation/ReservationProps.ts
@@ -3,4 +3,5 @@ export type ReservationProps = {
destination: string;
time: string;
date: string;
+ senior?: number;
};
diff --git a/src/components/Dashboard/ReservationPage/Reservation/SeniorSearch.tsx b/src/components/Dashboard/ReservationPage/Reservation/SeniorSearch.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4863134118c107523d44e5bd1185d9036b36918b
--- /dev/null
+++ b/src/components/Dashboard/ReservationPage/Reservation/SeniorSearch.tsx
@@ -0,0 +1,73 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React, { FC, useState } from 'react';
+import TextField from '@material-ui/core/TextField';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import { getSeniorList } from 'api/getSeniorList';
+import { ResponseProps } from 'api/ResponseProps';
+import { Control, Controller } from 'react-hook-form';
+import { ReservationProps } from './ReservationProps';
+
+type SeniorSearchProps = {
+ control: Control<ReservationProps>;
+};
+
+export const SeniorSearch: FC<SeniorSearchProps> = ({
+ control,
+}: SeniorSearchProps) => {
+ const [value, setValue] = useState<ResponseProps | null>(null);
+ const [seniors, setSeniors] = useState<ResponseProps[]>([]);
+ const [query, setQuery] = useState<string>('');
+
+ // FIX: Input closing when the data is changed.
+ // The issue is caused by the stopped re-rendering of react hook form. Consider
+ // attaching the value manually or to isolate this component.
+ const handleChange = (newValue: string): void => {
+ const MIN_SEARCH_LENGTH = 4;
+ if (newValue.length >= MIN_SEARCH_LENGTH && value == null) {
+ getSeniorList(newValue).then((list) => {
+ if (list.length !== 0) {
+ setSeniors(list);
+ } else {
+ setSeniors([]);
+ }
+ });
+ }
+ };
+
+ return (
+ <Controller
+ control={control}
+ name="senior"
+ as={({ onChange }) => (
+ <Autocomplete
+ value={value}
+ id="senior-searcher"
+ onInputChange={(_, newValue) => handleChange(newValue)}
+ onChange={(_, val) => {
+ onChange(val?.id);
+ setValue(val);
+ }}
+ options={seniors}
+ getOptionSelected={(option, val) => option.id === val.id}
+ getOptionLabel={(option) => option.user.lastName}
+ renderOption={(option) => (
+ <>
+ {option.user.firstName} {option.user.lastName}{' '}
+ {option.user.username} {option.memberCardNumber}
+ </>
+ )}
+ renderInput={(params) => (
+ <TextField
+ {...params}
+ label="Search a senior"
+ variant="outlined"
+ InputProps={{
+ ...params.InputProps,
+ }}
+ />
+ )}
+ />
+ )}
+ />
+ );
+};
diff --git a/src/components/Dashboard/ReservationPage/ReservationDialog.tsx b/src/components/Dashboard/ReservationPage/ReservationDialog.tsx
index 499f130e01f6e5ecb2c9cd2bdc2da37d665113d3..f362876642d3e4fb8126e0e819623cc8c905a509 100644
--- a/src/components/Dashboard/ReservationPage/ReservationDialog.tsx
+++ b/src/components/Dashboard/ReservationPage/ReservationDialog.tsx
@@ -1,7 +1,5 @@
import React, { FC } from 'react';
import {
- Grid,
- Typography,
Dialog,
DialogActions,
DialogContent,
@@ -9,15 +7,11 @@ import {
DialogTitle,
Button,
} from '@material-ui/core';
-import AddIcon from '@material-ui/icons/Add';
-import Fab from '@material-ui/core/Fab';
-import { NavBar } from 'components/Dashboard/HomePage/NavBar';
-import { Reservation } from 'components/Dashboard/ReservationPage/Reservation/Reservation';
import { useReservations } from 'hooks/useReservations';
import { ReservationProps } from 'components/Dashboard/ReservationPage/Reservation/ReservationProps';
import { SubmitHandler, useForm } from 'react-hook-form';
import { InputField } from 'components/Auth/InputField/InputField';
-import { useStyles } from './ReservationPage.style';
+import { SeniorSearch } from './Reservation/SeniorSearch';
type ReservationDialogProps = {
handleClose: () => void;
@@ -27,8 +21,15 @@ export const ReservationDialog: FC<ReservationDialogProps> = ({
handleClose,
isOpen,
}: ReservationDialogProps) => {
- const classes = useStyles();
- const { control, handleSubmit } = useForm<ReservationProps>();
+ const { control, handleSubmit } = useForm<ReservationProps>({
+ mode: 'onSubmit',
+ defaultValues: {
+ date: '',
+ time: '',
+ destination: '',
+ departure: '',
+ },
+ });
const reservation = useReservations();
@@ -41,68 +42,54 @@ export const ReservationDialog: FC<ReservationDialogProps> = ({
return (
<div data-testid="ReservationDialog">
- <Grid container direction="column" className={classes.paddingBottom}>
- <div className={classes.root}>
- <Grid item>
- <NavBar />
- </Grid>
+ <Dialog
+ open={isOpen}
+ onClose={handleClose}
+ aria-labelledby="form-dialog-title"
+ >
+ <form onSubmit={handleSubmit(onSubmit)} data-testid="Form">
+ <DialogTitle id="form-dialog-title">Book New Reservation</DialogTitle>
+ <DialogContent>
+ <DialogContentText>
+ Write here below the details of your next reservation
+ </DialogContentText>
- <Dialog
- open={isOpen}
- onClose={handleClose}
- aria-labelledby="form-dialog-title"
- >
- <form onSubmit={handleSubmit(onSubmit)} data-testid="Form">
- <DialogTitle id="form-dialog-title">
- Book New Reservation
- </DialogTitle>
- <DialogContent>
- <DialogContentText>
- Write here below the details of your next reservation
- </DialogContentText>
-
- <InputField
- name="name"
- label="Name Reservation"
- type="text"
- control={control}
- />
- <InputField
- name="date"
- label="Reservation date"
- type="date"
- control={control}
- />
- <InputField
- name="time"
- label="Department Time"
- type="time"
- control={control}
- />
- <InputField
- name="destination"
- label="Destination"
- type="text"
- control={control}
- />
- </DialogContent>
- <DialogActions>
- <Button onClick={handleClose} color="primary">
- Cancel
- </Button>
- <Button
- type="submit"
- fullWidth
- variant="contained"
- color="primary"
- >
- Insert
- </Button>
- </DialogActions>
- </form>
- </Dialog>
- </div>
- </Grid>
+ <SeniorSearch control={control} />
+ <InputField
+ name="name"
+ label="Name Reservation"
+ type="text"
+ control={control}
+ />
+ <InputField
+ name="date"
+ label="Reservation date"
+ type="date"
+ control={control}
+ />
+ <InputField
+ name="time"
+ label="Department Time"
+ type="time"
+ control={control}
+ />
+ <InputField
+ name="destination"
+ label="Destination"
+ type="text"
+ control={control}
+ />
+ </DialogContent>
+ <DialogActions>
+ <Button onClick={handleClose} color="primary">
+ Cancel
+ </Button>
+ <Button type="submit" fullWidth variant="contained" color="primary">
+ Insert
+ </Button>
+ </DialogActions>
+ </form>
+ </Dialog>
</div>
);
};
diff --git a/src/components/Dashboard/ReservationPage/ReservationPage.style.ts b/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
index c3d2fca6c309c408222292a499d1d07903da935b..b873407c5bb6b1d874c35ef30b765c1a07720e3d 100644
--- a/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
+++ b/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/core/styles';
export const useStyles = makeStyles(() => ({
root: {
minHeight: '36vh',
- backgroundImage: `url(${'/assets/bg7.png'})`,
+ backgroundImage: `url(${'/assets/bgMED.svg'})`,
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
},
@@ -41,11 +41,19 @@ export const useStyles = makeStyles(() => ({
fontSize: '50px',
},
fab: {
- margin: '1.5em',
+ 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/Dashboard/ReservationPage/ReservationPage.tsx b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
index c4e5ee210c76474ce3a451ed6a724fc3bae68457..231c416e667c038a40f79b82f37e5640b95f4c1a 100644
--- a/src/components/Dashboard/ReservationPage/ReservationPage.tsx
+++ b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
@@ -7,7 +7,11 @@ import {
DialogContent,
DialogContentText,
DialogTitle,
+ Hidden,
Button,
+ MuiThemeProvider,
+ createMuiTheme,
+ responsiveFontSizes,
} from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import Fab from '@material-ui/core/Fab';
@@ -20,6 +24,9 @@ import { InputField } from 'components/Auth/InputField/InputField';
import { useStyles } from './ReservationPage.style';
import { ReservationDialog } from './ReservationDialog';
+let themeResp = createMuiTheme();
+themeResp = responsiveFontSizes(themeResp);
+
export const ReservationPage: FC = () => {
const classes = useStyles();
const { control, handleSubmit } = useForm<ReservationProps>();
@@ -50,54 +57,73 @@ export const ReservationPage: FC = () => {
<NavBar />
</Grid>
<ReservationDialog handleClose={handleClose} isOpen={isOpen} />
+ <header>
+ <MuiThemeProvider theme={themeResp}>
+ <Grid item container className={classes.paddingBottom}>
+ <Grid item xs={1} md={2} lg={2} />
- <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}>
- Plan Here Your
- </Typography>
- <Typography variant="h1" className={classes.whiteText}>
- RESERVATIONS
- </Typography>
- </Grid>
+ <Grid item xs={10} md={6} lg={4}>
+ <Typography variant="h2" className={classes.whiteText}>
+ Plan Here Your
+ </Typography>
+ <Typography variant="h2" className={classes.whiteText}>
+ RESERVATIONS
+ </Typography>
+ </Grid>
- <Grid item xs={1} />
- </Grid>
+ <Grid item xs={1} />
+ </Grid>
+ </MuiThemeProvider>
+ </header>
</div>
- <Fab
- color="primary"
- size="large"
- aria-label="add"
- className={classes.fab}
- onClick={handleOpen}
- >
- <AddIcon className={classes.extendedIcon} />
- </Fab>
-
- <Grid item container className={classes.paddingTop}>
- <Grid item xs={2} />
- <Grid item xs={8}>
- <Typography variant="h3">Your Next Reservations</Typography>
+ <Hidden smDown>
+ <Fab
+ color="primary"
+ size="large"
+ className={classes.fab}
+ onClick={handleOpen}
+ aria-label="Add New Reservations"
+ >
+ <AddIcon className={classes.extendedIcon} />
+ </Fab>
+ </Hidden>
+
+ <Hidden mdUp>
+ <Fab
+ color="primary"
+ size="large"
+ aria-label="add"
+ className={classes.fabSmall}
+ onClick={handleOpen}
+ >
+ <AddIcon className={classes.extendedIcon} />
+ </Fab>
+ </Hidden>
+
+ <MuiThemeProvider theme={themeResp}>
+ <Grid item container className={classes.paddingTop}>
+ <Grid item xs={2} />
+ <Grid item xs={8}>
+ <Typography variant="h3">Your Next Reservations</Typography>
+ </Grid>
+ <Grid item xs={2} />
</Grid>
- <Grid item xs={2} />
- </Grid>
- <Reservation departure="" destination="" time="" date="" />
+ <Reservation departure="" destination="" time="" date="" />
- <Grid item container className={classes.paddingTop}>
- <Grid item xs={2} />
- <Grid item xs={8}>
- <Typography variant="h3" align="right">
- Your Past Reservations
- </Typography>
+ <Grid item container className={classes.paddingTop}>
+ <Grid item xs={2} />
+ <Grid item xs={8}>
+ <Typography variant="h3" align="right">
+ Your Past Reservations
+ </Typography>
+ </Grid>
+ <Grid item xs={2} />
</Grid>
- <Grid item xs={2} />
- </Grid>
- <Reservation departure="" destination="" time="" date="" />
+ <Reservation departure="" destination="" time="" date="" />
+ </MuiThemeProvider>
</Grid>
</div>
);
diff --git a/src/components/LandingPage/LandingPage.tsx b/src/components/LandingPage/LandingPage.tsx
index 1a07d866636cbadb0848e971b2cf94d64b090241..52cde70899bb1c443a92d2ac1b9ab668c8c3a9af 100644
--- a/src/components/LandingPage/LandingPage.tsx
+++ b/src/components/LandingPage/LandingPage.tsx
@@ -21,7 +21,7 @@ themeResp = responsiveFontSizes(themeResp);
const useStyles = makeStyles(() => ({
root: {
minHeight: '100vh',
- backgroundImage: `url(${'/assets/bg3.png'})`,
+ backgroundImage: `url(${'/assets/bgBIG.svg'})`,
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
},
@@ -65,36 +65,38 @@ export const LandingPage: FC = () => {
<div className={classes.root}>
<CssBaseline />
- <Grid item>
- <NavBarLogin />
- </Grid>
+ <header>
+ <Grid item>
+ <NavBarLogin />
+ </Grid>
- <MuiThemeProvider theme={themeResp}>
- <Grid item container className={classes.paddingBottom}>
- <Grid item xs={1} md={2} lg={2} />
+ <MuiThemeProvider theme={themeResp}>
+ <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}>
- Book Free Rides Now With
- </Typography>
- <Typography variant="h1" className={classes.whiteText}>
- MOVE AID
- </Typography>
- </Grid>
+ <Grid item xs={10} md={6} lg={4}>
+ <Typography variant="h2" className={classes.whiteText}>
+ Book Free Rides Now With
+ </Typography>
+ <Typography variant="h1" className={classes.whiteText}>
+ MOVE AID
+ </Typography>
+ </Grid>
- <Grid item xs={false} md={3} lg={5}>
- <Hidden mdDown>
- <Container>
- <MapElement />
- </Container>
- </Hidden>
- </Grid>
+ <Grid item xs={false} md={3} lg={5}>
+ <Hidden mdDown>
+ <Container>
+ <MapElement />
+ </Container>
+ </Hidden>
+ </Grid>
- <Grid item xs={1} />
- </Grid>
+ <Grid item xs={1} />
+ </Grid>
- <Steps />
- </MuiThemeProvider>
+ <Steps />
+ </MuiThemeProvider>
+ </header>
</div>
<Grid item container className={classes.paddingTop}>
diff --git a/src/hooks/useRole.ts b/src/hooks/useRole.ts
index 785a9793d68e38bc9aad578169aa195a0d84f9fc..217383ef569e9460e032229a00d7a9b43897e74b 100644
--- a/src/hooks/useRole.ts
+++ b/src/hooks/useRole.ts
@@ -4,8 +4,10 @@ import { useEffect, useState } from 'react';
export const useRole = (): [
string,
React.Dispatch<React.SetStateAction<string>>,
+ boolean,
] => {
const [role, setRole] = useState('');
+ const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
let isMounted = true;
@@ -14,11 +16,12 @@ export const useRole = (): [
getRole().then((responseRole) => {
if (isMounted) {
setRole(responseRole);
+ if (role !== null) setIsLoading(false);
}
});
return () => {
isMounted = false;
};
}, []);
- return [role, setRole];
+ return [role, setRole, isLoading];
};
diff --git a/yarn.lock b/yarn.lock
index da12648f2fedb3c73a162c22f141baa02fa82a19..1e4c5695a6879cbd3372edc53dadb163d2d17703 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1565,6 +1565,17 @@
dependencies:
"@babel/runtime" "^7.4.4"
+"@material-ui/lab@^4.0.0-alpha.58":
+ version "4.0.0-alpha.58"
+ resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.58.tgz#c7ebb66f49863c5acbb20817163737caa299fafc"
+ integrity sha512-GKHlJqLxUeHH3L3dGQ48ZavYrqGOTXkFkiEiuYMAnAvXAZP4rhMIqeHOPXSUQan4Bd8QnafDcpovOSLnadDmKw==
+ dependencies:
+ "@babel/runtime" "^7.4.4"
+ "@material-ui/utils" "^4.11.2"
+ clsx "^1.0.4"
+ prop-types "^15.7.2"
+ react-is "^16.8.0 || ^17.0.0"
+
"@material-ui/styles@^4.11.3":
version "4.11.3"
resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.3.tgz#1b8d97775a4a643b53478c895e3f2a464e8916f2"
@@ -2000,6 +2011,11 @@
resolved "https://registry.yarnpkg.com/@types/http-cache-semantics/-/http-cache-semantics-4.0.0.tgz#9140779736aa2655635ee756e2467d787cfe8a2a"
integrity sha512-c3Xy026kOF7QOTn00hbIllV1dLR9hG9NkSrLQgCVs8NF6sBU+VGWjD3wLPhmh1TYAc7ugCFsvHYMN4VcBN1U1A==
+"@types/humps@^2.0.0":
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/@types/humps/-/humps-2.0.0.tgz#9ad07801cd34f9d9ce379fa66f62d3049937d815"
+ integrity sha512-bP/s9HUT2oTJ0c3XGcHGISwTNs6r8eUPNfU6DuOSU8EHgtHqwvoDEyj76jPhKT/0MszS1PF/hHolxRrHSLYUPQ==
+
"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
version "2.0.3"
resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
@@ -6869,6 +6885,11 @@ human-signals@^1.1.1:
resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
+humps@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/humps/-/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa"
+ integrity sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=
+
hunspell-spellchecker@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/hunspell-spellchecker/-/hunspell-spellchecker-1.0.2.tgz#a10b0bd2fa00a65ab62a4c6b734ce496d318910e"