Reservation.tsx

import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {
  Grid,
  Paper,
  Table,
  TableContainer,
  Typography,
} from '@material-ui/core';
import { ReservationType } from 'types/ReservationType';
import {
  Timeline,
  TimelineConnector,
  TimelineContent,
  TimelineDot,
  TimelineItem,
  TimelineOppositeContent,
  TimelineSeparator,
} from '@material-ui/lab';

type PropsType = {
  reservation: ReservationType;
};

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
    margin: '1em 0',
  },
  button: {
    marginTop: theme.spacing(1),
    marginRight: theme.spacing(1),
  },
  actionsContainer: {
    marginBottom: theme.spacing(2),
  },
  resetContainer: {
    padding: theme.spacing(3),
  },
}));

export const Reservation: FC<PropsType> = ({ reservation }: PropsType) => {
  const classes = useStyles();

  return (
    <Grid item container className={classes.root}>
      <TableContainer component={Paper}>
        <Table aria-label="simple table">
          <Timeline>
            {reservation.tripStages.map((stage, key) => (
              <TimelineItem key={stage.number}>
                <TimelineOppositeContent>
                  <Typography>
                    {new Date(stage.estimatedBeAt).toLocaleDateString()}
                  </Typography>
                </TimelineOppositeContent>

                <TimelineSeparator>
                  <TimelineDot />
                  <TimelineConnector />
                </TimelineSeparator>

                <TimelineContent>
                  <Typography>{stage.location.address}</Typography>
                </TimelineContent>
              </TimelineItem>
            ))}
          </Timeline>
        </Table>
      </TableContainer>
    </Grid>
  );
};