ReservationsListByWeek.tsx

import React, { FC, useState } from 'react';
import { Grid } from '@material-ui/core';
import { Reservation } from 'components/Dashboard/ReservationPage/Reservation/Reservation';
import { useReservationsListByWeek } from 'hooks/useReservationsListByWeek';
import { KeyboardDatePicker } from '@material-ui/pickers/DatePicker';

/**
 * Displays a list of all reservations from api.
 * @returns rendered list of reservations.
 */
export const ReservationsListByWeek: FC = () => {
  const [selectedDate, handleDateChange] = useState<Date | null>(new Date());

  const reservations = useReservationsListByWeek(selectedDate);

  return (
    <div data-testid="ReservationListViewer">
      <KeyboardDatePicker
        value={selectedDate}
        variant="static"
        onChange={(date) => handleDateChange(date)}
        format="dd/MM/yyyy"
      />
      <Grid item container>
        {reservations.length !== 0 ? (
          reservations.map((reservation, key) => (
            <Reservation reservation={reservation} />
          ))
        ) : (
          <h1>You do not have reservations.</h1>
        )}
      </Grid>
    </div>
  );
};