Move dialog to this file.

src/components/Dashboard/ReservationPage/ReservationDialog.tsx

+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>
+  );
+};

src/components/Dashboard/ReservationPage/ReservationPage.tsx

@@ -18,21 +18,22 @@ import { ReservationProps } from 'components/Dashboard/ReservationPage/Reservati
 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 handleOpen = (): void => {
-    setOpen(true);
+    setIsOpen(true);
   };
 
   const handleClose = (): void => {
-    setOpen(false);
+    setIsOpen(false);
   };
 
   const onSubmit: SubmitHandler<ReservationProps> = (
@@ -48,61 +49,7 @@ export const ReservationPage: FC = () => {
           <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>
+          <ReservationDialog handleClose={handleClose} isOpen={isOpen} />
 
           <Grid item container className={classes.paddingBottom}>
             <Grid item xs={1} md={2} lg={2} />