Attach form. Prepare onSubmit. Replace TextFields.

src/components/Dashboard/ReservationPage/ReservationPage.tsx

@@ -22,6 +22,9 @@ 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);
@@ -78,6 +81,7 @@ const useStyles = makeStyles(() => ({
 
 export const ReservationPage: FC = () => {
   const classes = useStyles();
+  const { control, handleSubmit } = useForm<ReservationProps>();
 
   const [open, setOpen] = React.useState(false);
 
@@ -91,6 +95,12 @@ export const ReservationPage: FC = () => {
     setOpen(false);
   };
 
+  const onSubmit: SubmitHandler<ReservationProps> = (
+    data: ReservationProps,
+  ) => {
+    console.log(data);
+  };
+
   return (
     <div data-testid="Reservation">
       <Grid container direction="column" className={classes.paddingBottom}>
@@ -106,56 +116,54 @@ export const ReservationPage: FC = () => {
             onClose={handleOpen}
             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>
+            <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}>