From c107330c3547aa14f16b9201c05985be88d6e006 Mon Sep 17 00:00:00 2001
From: Alberto Defendi <1369-ahl-berto@users.noreply.gitlab.inf.unibz.it>
Date: Mon, 21 Jun 2021 08:56:40 +0200
Subject: [PATCH] Move reservation list to component.
---
.../ReservationPage/ReservationListViewer.tsx | 26 +++++++++++++++++
.../ReservationPage/ReservationPage.style.ts | 2 +-
.../ReservationPage/ReservationPage.tsx | 28 ++++---------------
3 files changed, 32 insertions(+), 24 deletions(-)
create mode 100644 src/components/Dashboard/ReservationPage/ReservationListViewer.tsx
diff --git a/src/components/Dashboard/ReservationPage/ReservationListViewer.tsx b/src/components/Dashboard/ReservationPage/ReservationListViewer.tsx
new file mode 100644
index 0000000..a169057
--- /dev/null
+++ b/src/components/Dashboard/ReservationPage/ReservationListViewer.tsx
@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import { Grid } from '@material-ui/core';
+import { Reservation } from 'components/Dashboard/ReservationPage/Reservation/Reservation';
+import { useReservations } from 'hooks/useReservations';
+
+/**
+ * Displays a list of all reservations from api.
+ * @returns rendered list of reservations.
+ */
+export const ReservationListViewer: FC = () => {
+ const reservations = useReservations();
+
+ return (
+ <div data-testid="ReservationListViewer">
+ <Grid item container>
+ {reservations.length !== 0 ? (
+ reservations.map((reservation, key) => (
+ <Reservation reservation={reservation} />
+ ))
+ ) : (
+ <h1>You do not have reservations.</h1>
+ )}
+ </Grid>
+ </div>
+ );
+};
diff --git a/src/components/Dashboard/ReservationPage/ReservationPage.style.ts b/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
index b873407..3781776 100644
--- a/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
+++ b/src/components/Dashboard/ReservationPage/ReservationPage.style.ts
@@ -1,6 +1,6 @@
import { makeStyles } from '@material-ui/core/styles';
-export const useStyles = makeStyles(() => ({
+export const reservationPageStyle = makeStyles(() => ({
root: {
minHeight: '36vh',
backgroundImage: `url(${'/assets/bgMED.svg'})`,
diff --git a/src/components/Dashboard/ReservationPage/ReservationPage.tsx b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
index d4a4488..55b8051 100644
--- a/src/components/Dashboard/ReservationPage/ReservationPage.tsx
+++ b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
@@ -1,32 +1,16 @@
import React, { FC } from 'react';
-import {
- Grid,
- Typography,
- Dialog,
- DialogActions,
- DialogContent,
- DialogContentText,
- DialogTitle,
- Hidden,
- Button,
- MuiThemeProvider,
- createMuiTheme,
- responsiveFontSizes,
-} from '@material-ui/core';
+import { Grid, Typography, Hidden } from '@material-ui/core';
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 { SubmitHandler, useForm } from 'react-hook-form';
-import { useReservations } from 'hooks/useReservations';
-import { useStyles } from './ReservationPage.style';
+import { reservationPageStyle } from './ReservationPage.style';
import { ReservationDialog } from './ReservationDialog';
+import { ReservationListViewer } from './ReservationListViewer';
export const ReservationPage: FC = () => {
- const classes = useStyles();
+ const classes = reservationPageStyle();
const [isOpen, setIsOpen] = React.useState<boolean>(false);
- const reservations = useReservations();
const handleOpen = (): void => {
setIsOpen(true);
@@ -91,9 +75,7 @@ export const ReservationPage: FC = () => {
<Grid item xs={8}>
<Typography variant="h3">Your Next Reservations</Typography>
</Grid>
- {reservations.map((reservation, key) => (
- <Reservation reservation={reservation} />
- ))}
+ <ReservationListViewer />
</Grid>
</Grid>
</div>
--
GitLab