Component to display week reservations.

src/components/Dashboard/ReservationPage/WeekReservations/WeekReservations.tsx

+import React, { FC, useState } from 'react';
+import { Grid } from '@material-ui/core';
+import { Reservation } from 'components/Dashboard/ReservationPage/Reservation/Reservation';
+import DateFnsUtils from '@date-io/date-fns';
+import {
+  KeyboardDatePicker,
+  MuiPickersUtilsProvider,
+} from '@material-ui/pickers';
+import { useReservationsListByWeek } from 'hooks/useReservationsListByWeek';
+
+/**
+ * Displays a list of all reservations from api.
+ * @returns rendered list of reservations.
+ */
+export const WeekReservations: FC = () => {
+  const [selectedDate, handleDateChange] = useState<Date | null>(new Date());
+
+  const reservations = useReservationsListByWeek(selectedDate);
+
+  return (
+    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+      <div data-testid="ReservationListViewer">
+        <KeyboardDatePicker
+          value={selectedDate}
+          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>{' '}
+    </MuiPickersUtilsProvider>
+  );
+};