ReservationPage.tsx

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';
import { ReservationProps } from 'components/Dashboard/ReservationPage/Reservation/ReservationProps';
import { SubmitHandler, useForm } from 'react-hook-form';
import { InputField } from 'components/Auth/InputField/InputField';

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: '1.5em',
    bottom: '0',
    right: '0',
    position: 'fixed',
    fontSize: '2em',
    padding: '1.5em',
  },
}));

export const ReservationPage: FC = () => {
  const classes = useStyles();
  const { control, handleSubmit } = useForm<ReservationProps>();

  const [open, setOpen] = React.useState(false);

  const reservation = useReservations();

  const handleOpen = (): void => {
    setOpen(true);
  };

  const handleClose = (): void => {
    setOpen(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={handleOpen}
            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>

          <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} />
            </Grid>
          </MuiThemeProvider>
        </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>
          </Grid>
          <Grid item xs={2} />
        </Grid>

        <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>
          <Grid item xs={2} />
        </Grid>

        <Reservation departure="" destination="" time="" date="" />
      </Grid>
    </div>
  );
};