diff --git a/src/api/getReservations.ts b/src/api/getReservations.ts
deleted file mode 100644
index 9f28c7d3455493636f6038ae53fe43de6b6f4f5b..0000000000000000000000000000000000000000
--- a/src/api/getReservations.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import axios from 'axios';
-
-export const getReservations = async (): Promise<any> =>
- axios('/api/web/reservations/').then((res) => res.data);
diff --git a/src/components/Dashboard/HomePage/HomePage.tsx b/src/components/Dashboard/HomePage/HomePage.tsx
index c0f5e704406e4793c1a7a70d126707e2a13905f4..928c3b3c49398c4d5273c7a407ddfccc2af4613d 100644
--- a/src/components/Dashboard/HomePage/HomePage.tsx
+++ b/src/components/Dashboard/HomePage/HomePage.tsx
@@ -1,16 +1,9 @@
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} />
diff --git a/src/components/Dashboard/ReservationPage/Reservation/Reservation.tsx b/src/components/Dashboard/ReservationPage/Reservation/Reservation.tsx
index b9cd2bedb8074d158fd74dc4c3653a22333e9ec2..62a96829b75a70b4d535a805edb65dacf460da86 100644
--- a/src/components/Dashboard/ReservationPage/Reservation/Reservation.tsx
+++ b/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>
);
};
diff --git a/src/components/Dashboard/ReservationPage/Reservation/ReservationProps.ts b/src/components/Dashboard/ReservationPage/Reservation/ReservationProps.ts
deleted file mode 100644
index 1819723c15e41da04615003a786aea3ef0f40644..0000000000000000000000000000000000000000
--- a/src/components/Dashboard/ReservationPage/Reservation/ReservationProps.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export type ReservationProps = {
- departure: string;
- destination: string;
- time: string;
- date: string;
- senior?: number;
-};
diff --git a/src/components/Dashboard/ReservationPage/ReservationPage.tsx b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
index 231c416e667c038a40f79b82f37e5640b95f4c1a..d4a44886327e5dd194cf5a8f12666ba3d07d9317 100644
--- a/src/components/Dashboard/ReservationPage/ReservationPage.tsx
+++ b/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>
);