Replace with new Reservation type.

src/components/Dashboard/HomePage/HomePage.tsx

@@ -109,7 +109,7 @@ export const HomePage: FC = () => {
       <Grid item container style={{ paddingTop: '20px' }}>
         <Grid item xs={1} lg={2} />
         <Grid item xs={10} lg={8}>
-          <Reservation />
+          <Reservation departure="" destination="" time="" date="" />
         </Grid>
         <Grid item xs={1} lg={2} />
       </Grid>

src/components/Dashboard/ReservationPage/ReservationPage.tsx

@@ -21,6 +21,7 @@ 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);
@@ -86,6 +87,8 @@ export const ReservationPage: FC = () => {
 
   const [open, setOpen] = React.useState(false);
 
+  const reservation = useReservations();
+
   const handleClickOpen = (): void => {
     setOpen(true);
   };
@@ -210,29 +213,7 @@ export const ReservationPage: FC = () => {
           <Grid item xs={2} />
         </Grid>
 
-        <Grid item container style={{ paddingTop: '20px' }}>
-          <Grid item xs={1} lg={2} />
-          <Grid item xs={10} lg={8}>
-            <Reservation />
-          </Grid>
-          <Grid item xs={1} lg={2} />
-        </Grid>
-
-        <Grid item container style={{ paddingTop: '20px' }}>
-          <Grid item xs={1} lg={2} />
-          <Grid item xs={10} lg={8}>
-            <Reservation />
-          </Grid>
-          <Grid item xs={1} lg={2} />
-        </Grid>
-
-        <Grid item container style={{ paddingTop: '20px' }}>
-          <Grid item xs={1} lg={2} />
-          <Grid item xs={10} lg={8}>
-            <Reservation />
-          </Grid>
-          <Grid item xs={1} lg={2} />
-        </Grid>
+        <Reservation departure="" destination="" time="" date="" />
 
         <Grid item container className={classes.paddingTop}>
           <Grid item xs={2} />
@@ -244,13 +225,7 @@ export const ReservationPage: FC = () => {
           <Grid item xs={2} />
         </Grid>
 
-        <Grid item container style={{ paddingTop: '20px' }}>
-          <Grid item xs={1} lg={2} />
-          <Grid item xs={10} lg={8}>
-            <Reservation />
-          </Grid>
-          <Grid item xs={1} lg={2} />
-        </Grid>
+        <Reservation departure="" destination="" time="" date="" />
       </Grid>
     </div>
   );