From 426e16b6065e5a76cdffc544fed57f41ec5219b4 Mon Sep 17 00:00:00 2001
From: Alberto Defendi <1369-ahl-berto@users.noreply.gitlab.inf.unibz.it>
Date: Mon, 21 Jun 2021 15:48:19 +0200
Subject: [PATCH] Component to display week reservations.
---
.../WeekReservations/WeekReservations.tsx | 40 +++++++++++++++++++
1 file changed, 40 insertions(+)
create mode 100644 src/components/Dashboard/ReservationPage/WeekReservations/WeekReservations.tsx
diff --git a/src/components/Dashboard/ReservationPage/WeekReservations/WeekReservations.tsx b/src/components/Dashboard/ReservationPage/WeekReservations/WeekReservations.tsx
new file mode 100644
index 0000000..ad452f1
--- /dev/null
+++ b/src/components/Dashboard/ReservationPage/WeekReservations/WeekReservations.tsx
@@ -0,0 +1,40 @@
+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>
+ );
+};
--
GitLab