diff --git a/src/components/Auth/InputField/InputField.tsx b/src/components/Auth/InputField/InputField.tsx
index 758c1f47a548dea41bc0226300ff0f1408b4f76b..af97fa3b785fe1d216f1df0f6219a09ebe812e1b 100644
--- a/src/components/Auth/InputField/InputField.tsx
+++ b/src/components/Auth/InputField/InputField.tsx
@@ -15,11 +15,11 @@ type Props = {
* Takes error from react-hook-form and is thrown if
* the component is not valid.
*/
- error: boolean;
+ error?: boolean;
/**
* Message to display if the component is not valid.
*/
- errorMessage: string;
+ errorMessage?: string;
/**
* React-hook-form control.
*/
@@ -28,10 +28,28 @@ type Props = {
* Validation rules.
*/
rules?: Partial<unknown>;
+ /**
+ * HTML type of input.
+ */
+ type: string;
+
+ /**
+ * MUI props override for defining style on fly.
+ */
+ InputLabelProps?: Record<string, boolean>;
};
export const InputField: FC<Props> = (props: Props) => {
- const { name, label, error, errorMessage, control, rules } = props;
+ const {
+ name,
+ label,
+ error,
+ type,
+ errorMessage,
+ control,
+ rules,
+ InputLabelProps,
+ } = props;
return (
<Controller
name={name}
@@ -41,7 +59,7 @@ export const InputField: FC<Props> = (props: Props) => {
<TextField
variant="outlined"
margin="normal"
- type={name}
+ type={type}
required
fullWidth
id={name}
@@ -53,6 +71,7 @@ export const InputField: FC<Props> = (props: Props) => {
autoFocus
error={error}
helperText={error && errorMessage}
+ InputLabelProps={{ ...InputLabelProps, shrink: true }}
/>
)}
/>
@@ -61,4 +80,7 @@ export const InputField: FC<Props> = (props: Props) => {
InputField.defaultProps = {
rules: undefined,
+ error: false,
+ errorMessage: '',
+ InputLabelProps: {},
};
diff --git a/src/components/Auth/SignInForm/SignInForm.tsx b/src/components/Auth/SignInForm/SignInForm.tsx
index 71825c73f8be5d3b9a8d57840477ec79686a4c07..3c44dcb3d38b91c7f8f702c500ec0f64c2866d30 100644
--- a/src/components/Auth/SignInForm/SignInForm.tsx
+++ b/src/components/Auth/SignInForm/SignInForm.tsx
@@ -80,12 +80,14 @@ export const SignInForm: FC = () => {
},
}}
label="username"
+ type="username"
error={!!errors.username}
errorMessage="Insert username"
/>
<InputField
name="password"
+ type="password"
control={control}
rules={{
minLength: 8,
diff --git a/src/components/Auth/SignUpForm/SignUpForm.tsx b/src/components/Auth/SignUpForm/SignUpForm.tsx
index 055cb9dfd6a65782251a65b9cd08e28ab8b34e0c..b947b51260790a2c723816f22f4b1f84e0e6061c 100644
--- a/src/components/Auth/SignUpForm/SignUpForm.tsx
+++ b/src/components/Auth/SignUpForm/SignUpForm.tsx
@@ -62,6 +62,7 @@ export const SignUpForm: FC = () => {
>
<InputField
name="email"
+ type="email"
control={control}
rules={{
validate: (value: string) =>
@@ -78,6 +79,7 @@ export const SignUpForm: FC = () => {
<InputField
name="password"
+ type="password"
control={control}
rules={{
minLength: 8,
@@ -94,6 +96,7 @@ export const SignUpForm: FC = () => {
<InputField
name="username"
+ type="text"
control={control}
rules={{
maxLength: 150,
@@ -109,6 +112,7 @@ export const SignUpForm: FC = () => {
<InputField
name="firstName"
+ type="text"
control={control}
rules={{
maxLength: 150,
@@ -124,6 +128,7 @@ export const SignUpForm: FC = () => {
<InputField
name="lastName"
+ type="text"
control={control}
rules={{
maxLength: 150,
@@ -139,6 +144,7 @@ export const SignUpForm: FC = () => {
<InputField
name="address"
+ type="text"
control={control}
rules={{
required: {
@@ -153,6 +159,7 @@ export const SignUpForm: FC = () => {
<InputField
name="phoneNumber"
+ type="number"
control={control}
rules={{
maxLength: 15,
@@ -168,6 +175,7 @@ export const SignUpForm: FC = () => {
<InputField
name="memberCardNumber"
+ type="number"
control={control}
rules={{
maxLength: 20,
@@ -183,6 +191,7 @@ export const SignUpForm: FC = () => {
<InputField
name="notes"
+ type="text"
control={control}
rules={{
required: {
diff --git a/src/components/Dashboard/ReservationPage/Reservation/Reservation.tsx b/src/components/Dashboard/ReservationPage/Reservation/Reservation.tsx
index 7b6cc337f071afb84bb3e899001a5a3e1ce195ec..b9cd2bedb8074d158fd74dc4c3653a22333e9ec2 100644
--- a/src/components/Dashboard/ReservationPage/Reservation/Reservation.tsx
+++ b/src/components/Dashboard/ReservationPage/Reservation/Reservation.tsx
@@ -10,6 +10,7 @@ import {
TableHead,
TableRow,
} from '@material-ui/core';
+import { ReservationProps } from './ReservationProps';
const useStyles = makeStyles(() => ({
noShadow: {
@@ -19,13 +20,6 @@ const useStyles = makeStyles(() => ({
},
}));
-type ReservationProps = {
- departure: string;
- destination: string;
- time: string;
- date: string;
-};
-
export const Reservation: FC<ReservationProps> = ({
departure,
destination,
diff --git a/src/components/Dashboard/ReservationPage/Reservation/ReservationProps.ts b/src/components/Dashboard/ReservationPage/Reservation/ReservationProps.ts
new file mode 100644
index 0000000000000000000000000000000000000000..512c6c9e38e13a4cefe0c6a4f64f0e6a149e6be6
--- /dev/null
+++ b/src/components/Dashboard/ReservationPage/Reservation/ReservationProps.ts
@@ -0,0 +1,6 @@
+export type ReservationProps = {
+ departure: string;
+ destination: string;
+ time: string;
+ date: string;
+};
diff --git a/src/components/Dashboard/ReservationPage/ReservationDialog.tsx b/src/components/Dashboard/ReservationPage/ReservationDialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..499f130e01f6e5ecb2c9cd2bdc2da37d665113d3
--- /dev/null
+++ b/src/components/Dashboard/ReservationPage/ReservationDialog.tsx
@@ -0,0 +1,108 @@
+import React, { FC } from 'react';
+import {
+ Grid,
+ Typography,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogContentText,
+ 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';
+
+type ReservationDialogProps = {
+ handleClose: () => void;
+ isOpen: boolean;
+};
+export const ReservationDialog: FC<ReservationDialogProps> = ({
+ handleClose,
+ isOpen,
+}: ReservationDialogProps) => {
+ const classes = useStyles();
+ const { control, handleSubmit } = useForm<ReservationProps>();
+
+ const reservation = useReservations();
+
+ const onSubmit: SubmitHandler<ReservationProps> = (
+ data: ReservationProps,
+ ) => {
+ console.log(data);
+ handleClose();
+ };
+
+ 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>
+
+ <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>
+ </div>
+ );
+};
diff --git a/src/components/Dashboard/ReservationPage/ReservationPage.style.ts b/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c3d2fca6c309c408222292a499d1d07903da935b
--- /dev/null
+++ b/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
@@ -0,0 +1,51 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles(() => ({
+ root: {
+ minHeight: '36vh',
+ backgroundImage: `url(${'/assets/bg7.png'})`,
+ backgroundRepeat: 'no-repeat',
+ backgroundSize: 'cover',
+ },
+ rightAlign: {
+ marginLeft: 'auto',
+ },
+ whiteText: {
+ color: 'white',
+ },
+ imageIcon: {
+ maxHeight: '50%',
+ },
+ paddingBottom: {
+ paddingBottom: '65px',
+ },
+ paddingTop: {
+ paddingTop: '65px',
+ },
+ 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.5em',
+ bottom: '0',
+ right: '0',
+ position: 'fixed',
+ fontSize: '2em',
+ padding: '1.5em',
+ },
+}));
diff --git a/src/components/Dashboard/ReservationPage/ReservationPage.tsx b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
index 862eb8e09f1666b4a412ec375fa4c496779ad35a..c4e5ee210c76474ce3a451ed6a724fc3bae68457 100644
--- a/src/components/Dashboard/ReservationPage/ReservationPage.tsx
+++ b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
@@ -1,209 +1,81 @@
import React, { FC } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
import {
- CssBaseline,
Grid,
Typography,
- Hidden,
- createMuiTheme,
- responsiveFontSizes,
- MuiThemeProvider,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
- TextField,
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';
-
-let themeResp = createMuiTheme();
-themeResp = responsiveFontSizes(themeResp);
-
-const useStyles = makeStyles(() => ({
- root: {
- minHeight: '36vh',
- backgroundImage: `url(${'/assets/bg7.png'})`,
- backgroundRepeat: 'no-repeat',
- backgroundSize: 'cover',
- },
- rightAlign: {
- marginLeft: 'auto',
- },
- whiteText: {
- color: 'white',
- },
- imageIcon: {
- maxHeight: '50%',
- },
- paddingBottom: {
- paddingBottom: '65px',
- },
- paddingTop: {
- paddingTop: '65px',
- },
- 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',
- },
-}));
+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 { ReservationDialog } from './ReservationDialog';
export const ReservationPage: FC = () => {
const classes = useStyles();
+ const { control, handleSubmit } = useForm<ReservationProps>();
- const [open, setOpen] = React.useState(false);
+ const [isOpen, setIsOpen] = React.useState<boolean>(false);
const reservation = useReservations();
- const handleClickOpen = (): void => {
- setOpen(true);
+ const handleOpen = (): void => {
+ setIsOpen(true);
};
const handleClose = (): void => {
- setOpen(false);
+ setIsOpen(false);
+ };
+
+ const onSubmit: SubmitHandler<ReservationProps> = (
+ data: ReservationProps,
+ ) => {
+ console.log(data);
};
return (
<div data-testid="Reservation">
<Grid container direction="column" className={classes.paddingBottom}>
<div className={classes.root}>
- <CssBaseline />
-
<Grid item>
<NavBar />
</Grid>
-
- <Dialog
- open={open}
- onClose={handleClose}
- aria-labelledby="form-dialog-title"
- >
- <DialogTitle id="form-dialog-title">
- Book New Reservation
- </DialogTitle>
- <DialogContent>
- <DialogContentText>
- Write here below the details of your next reservation
- </DialogContentText>
- <TextField
- autoFocus
- margin="dense"
- id="name"
- label="Name Reservation"
- type="text"
- fullWidth
- />
- <TextField
- autoFocus
- margin="dense"
- id="name"
- label="Date"
- type="date"
- fullWidth
- InputLabelProps={{ shrink: true }}
- />
- <TextField
- autoFocus
- margin="dense"
- id="name"
- label="Department Time"
- type="time"
- fullWidth
- InputLabelProps={{ shrink: true }}
- />
- <TextField
- autoFocus
- margin="dense"
- id="name"
- label="Destination"
- type="text"
- fullWidth
- />
- </DialogContent>
- <DialogActions>
- <Button onClick={handleClose} color="primary">
- Cancel
- </Button>
- <Button onClick={handleClose} color="primary" variant="contained">
- Subscribe
- </Button>
- </DialogActions>
- </Dialog>
-
- <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}>
- Plan Here Your
- </Typography>
- <Typography variant="h1" className={classes.whiteText}>
- RESERVATIONS
- </Typography>
- </Grid>
-
- <Grid item xs={1} />
+ <ReservationDialog handleClose={handleClose} isOpen={isOpen} />
+
+ <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>
- </MuiThemeProvider>
- </div>
- <Hidden mdDown>
- <Fab
- color="primary"
- size="large"
- aria-label="add"
- className={classes.fab}
- onClick={handleClickOpen}
- >
- <AddIcon className={classes.extendedIcon} />
- </Fab>
- </Hidden>
+ <Grid item xs={1} />
+ </Grid>
+ </div>
- <Hidden lgUp>
- <Fab
- color="primary"
- size="small"
- aria-label="add"
- className={classes.fabSmall}
- >
- <AddIcon />
- </Fab>
- </Hidden>
+ <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} />