Display reservations from server.

See #15.

src/api/getReservations.ts

-import axios from 'axios';
-
-export const getReservations = async (): Promise<any> =>
-  axios('/api/web/reservations/').then((res) => res.data);

src/components/Dashboard/HomePage/HomePage.tsx

 import React, { FC } from 'react';
-import {
-  CssBaseline,
-  Grid,
-  Typography,
-  Hidden,
-  Container,
-} from '@material-ui/core';
+import { Grid, Typography, Hidden, Container } from '@material-ui/core';
 import { MapElement } from 'components/Dashboard/HomePage/MapElement';
 import { NavBar } from 'components/Dashboard/HomePage/NavBar';
 import { Numbers } from 'components/Dashboard/HomePage/Numbers';
 import { Steps } from 'components/Dashboard/HomePage/Steps';
-import { Reservation } from '../ReservationPage/Reservation/Reservation';
 import { homePageStyle } from './HomePage.style';
 
 export const HomePage: FC = () => {
@@ -19,8 +12,6 @@ export const HomePage: FC = () => {
   return (
     <Grid container direction="column" className={classes.paddingBottom}>
       <div className={classes.root}>
-        <CssBaseline />
-
         <Grid item>
           <NavBar />
         </Grid>
@@ -59,19 +50,11 @@ export const HomePage: 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 departure="" destination="" time="" date="" />
-        </Grid>
-        <Grid item xs={1} lg={2} />
-      </Grid>
-
       <Grid item container className={classes.paddingTop}>
         <Grid item xs={2} />
         <Grid item xs={8}>
           <Typography variant="h2" align="right">
-            Some Our Numbers
+            Some of our Numbers
           </Typography>
         </Grid>
         <Grid item xs={2} />

src/components/Dashboard/ReservationPage/Reservation/Reservation.tsx

@@ -10,7 +10,7 @@ import {
   TableHead,
   TableRow,
 } from '@material-ui/core';
-import { ReservationProps } from './ReservationProps';
+import { InsertReservationType } from 'types/InsertReservationType';
 
 const useStyles = makeStyles(() => ({
   noShadow: {
@@ -20,38 +20,29 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-export const Reservation: FC<ReservationProps> = ({
-  departure,
-  destination,
-  time,
-  date,
-}: ReservationProps) => {
+type PropsType = {
+  reservation: InsertReservationType;
+};
+
+export const Reservation: FC<PropsType> = ({ reservation }: PropsType) => {
   const classes = useStyles();
 
   return (
     <Grid item container style={{ paddingTop: '20px' }}>
-      <Grid item xs={1} lg={2} />
-      <Grid item xs={10} lg={8}>
-        <TableContainer component={Paper}>
-          <Table aria-label="simple table">
-            <TableHead>
+      <TableContainer component={Paper}>
+        <Table aria-label="simple table">
+          <TableHead>
+            {reservation.tripStages.map((stage, key) => (
               <TableRow>
-                <TableCell>DriveToHospital </TableCell>
-              </TableRow>
-            </TableHead>
-
-            <TableBody>
-              <TableRow key="departure">
-                <TableCell component="th" scope="row">
-                  Departure
+                <TableCell key={stage.number}>
+                  {stage.location.address}
                 </TableCell>
-                <TableCell align="right">{departure}</TableCell>
+                <TableCell key={stage.number}>{stage.estimatedBeAt}</TableCell>
               </TableRow>
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </Grid>
-      <Grid item xs={1} lg={2} />
+            ))}
+          </TableHead>
+        </Table>
+      </TableContainer>
     </Grid>
   );
 };

src/components/Dashboard/ReservationPage/Reservation/ReservationProps.ts

-export type ReservationProps = {
-  departure: string;
-  destination: string;
-  time: string;
-  date: string;
-  senior?: number;
-};

src/components/Dashboard/ReservationPage/ReservationPage.tsx

@@ -17,23 +17,16 @@ 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 { useReservations } from 'hooks/useReservations';
 import { useStyles } from './ReservationPage.style';
 import { ReservationDialog } from './ReservationDialog';
 
-let themeResp = createMuiTheme();
-themeResp = responsiveFontSizes(themeResp);
-
 export const ReservationPage: FC = () => {
   const classes = useStyles();
-  const { control, handleSubmit } = useForm<ReservationProps>();
 
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
-
-  const reservation = useReservations();
+  const reservations = useReservations();
 
   const handleOpen = (): void => {
     setIsOpen(true);
@@ -43,12 +36,6 @@ export const ReservationPage: FC = () => {
     setIsOpen(false);
   };
 
-  const onSubmit: SubmitHandler<ReservationProps> = (
-    data: ReservationProps,
-  ) => {
-    console.log(data);
-  };
-
   return (
     <div data-testid="Reservation">
       <Grid container direction="column" className={classes.paddingBottom}>
@@ -58,22 +45,20 @@ export const ReservationPage: FC = () => {
           </Grid>
           <ReservationDialog handleClose={handleClose} isOpen={isOpen} />
           <header>
-            <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="h2" className={classes.whiteText}>
-                    RESERVATIONS
-                  </Typography>
-                </Grid>
-
-                <Grid item xs={1} />
+            <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="h2" className={classes.whiteText}>
+                  RESERVATIONS
+                </Typography>
               </Grid>
-            </MuiThemeProvider>
+
+              <Grid item xs={1} />
+            </Grid>
           </header>
         </div>
 
@@ -101,29 +86,15 @@ export const ReservationPage: FC = () => {
           </Fab>
         </Hidden>
 
-        <MuiThemeProvider theme={themeResp}>
-          <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 item container className={classes.paddingTop}>
+          <Grid item xs={2} />
+          <Grid item xs={8}>
+            <Typography variant="h3">Your Next Reservations</Typography>
           </Grid>
-
-          <Reservation departure="" destination="" time="" date="" />
-        </MuiThemeProvider>
+          {reservations.map((reservation, key) => (
+            <Reservation reservation={reservation} />
+          ))}
+        </Grid>
       </Grid>
     </div>
   );