From 8aae9a330f9a339b89536fbda598fd6bfa5ed869 Mon Sep 17 00:00:00 2001
From: Alberto Defendi <1369-ahl-berto@users.noreply.gitlab.inf.unibz.it>
Date: Tue, 22 Jun 2021 07:15:19 +0200
Subject: [PATCH] Rename components and extract header to file.
---
.../ReservationList.tsx} | 2 +-
.../ReservationsListByWeek.tsx} | 6 ++--
.../ReservationPage/ReservationPage.tsx | 30 ++++------------
.../ReservationPage/ReservationPageHeader.tsx | 34 +++++++++++++++++++
4 files changed, 45 insertions(+), 27 deletions(-)
rename src/components/Dashboard/ReservationPage/{ReservationListViewer.tsx => ReservationList/ReservationList.tsx} (93%)
rename src/components/Dashboard/ReservationPage/{WeekReservations/WeekReservations.tsx => ReservationList/ReservationsListByWeek.tsx} (86%)
create mode 100644 src/components/Dashboard/ReservationPage/ReservationPageHeader.tsx
diff --git a/src/components/Dashboard/ReservationPage/ReservationListViewer.tsx b/src/components/Dashboard/ReservationPage/ReservationList/ReservationList.tsx
similarity index 93%
rename from src/components/Dashboard/ReservationPage/ReservationListViewer.tsx
rename to src/components/Dashboard/ReservationPage/ReservationList/ReservationList.tsx
index 37c9635..1cd99aa 100644
--- a/src/components/Dashboard/ReservationPage/ReservationListViewer.tsx
+++ b/src/components/Dashboard/ReservationPage/ReservationList/ReservationList.tsx
@@ -7,7 +7,7 @@ import { useReservations } from 'hooks/useReservations';
* Displays a list of all reservations from api.
* @returns rendered list of reservations.
*/
-export const ReservationListViewer: FC = () => {
+export const ReservationList: FC = () => {
const reservations = useReservations();
return (
diff --git a/src/components/Dashboard/ReservationPage/WeekReservations/WeekReservations.tsx b/src/components/Dashboard/ReservationPage/ReservationList/ReservationsListByWeek.tsx
similarity index 86%
rename from src/components/Dashboard/ReservationPage/WeekReservations/WeekReservations.tsx
rename to src/components/Dashboard/ReservationPage/ReservationList/ReservationsListByWeek.tsx
index ad452f1..46c9e9c 100644
--- a/src/components/Dashboard/ReservationPage/WeekReservations/WeekReservations.tsx
+++ b/src/components/Dashboard/ReservationPage/ReservationList/ReservationsListByWeek.tsx
@@ -2,6 +2,7 @@ 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 itLocale from 'date-fns/locale/en-US';
import {
KeyboardDatePicker,
MuiPickersUtilsProvider,
@@ -12,16 +13,17 @@ import { useReservationsListByWeek } from 'hooks/useReservationsListByWeek';
* Displays a list of all reservations from api.
* @returns rendered list of reservations.
*/
-export const WeekReservations: FC = () => {
+export const ReservationsListByWeek: FC = () => {
const [selectedDate, handleDateChange] = useState<Date | null>(new Date());
const reservations = useReservationsListByWeek(selectedDate);
return (
- <MuiPickersUtilsProvider utils={DateFnsUtils}>
+ <MuiPickersUtilsProvider locale={itLocale} utils={DateFnsUtils}>
<div data-testid="ReservationListViewer">
<KeyboardDatePicker
value={selectedDate}
+ variant="static"
onChange={(date) => handleDateChange(date)}
format="dd/MM/yyyy"
/>
diff --git a/src/components/Dashboard/ReservationPage/ReservationPage.tsx b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
index fea77db..1cfc1d8 100644
--- a/src/components/Dashboard/ReservationPage/ReservationPage.tsx
+++ b/src/components/Dashboard/ReservationPage/ReservationPage.tsx
@@ -5,7 +5,9 @@ import Fab from '@material-ui/core/Fab';
import { NavBar } from 'components/Dashboard/HomePage/NavBar';
import { reservationPageStyle } from './ReservationPage.style';
import { ReservationDialog } from './ReservationDialog';
-import { ReservationListViewer } from './ReservationListViewer';
+import { ReservationList } from './ReservationList/ReservationList';
+import { ReservationsListByWeek } from './ReservationList/ReservationsListByWeek';
+import { ReservationPageHeader } from './ReservationPageHeader';
export const ReservationPage: FC = () => {
const classes = reservationPageStyle();
@@ -23,28 +25,8 @@ export const ReservationPage: FC = () => {
return (
<div data-testid="Reservation">
<Grid container direction="column" className={classes.paddingBottom}>
- <div className={classes.root}>
- <Grid item>
- <NavBar />
- </Grid>
- <ReservationDialog handleClose={handleClose} isOpen={isOpen} />
- <header>
- <Grid item container className={classes.paddingBottom}>
- <Grid item xs={1} md={2} lg={2} />
-
- <Grid item xs={10} md={6} lg={4}>
- <Typography variant="h2" className={classes.whiteText}>
- Plan Here Your
- </Typography>
- <Typography variant="h2" className={classes.whiteText}>
- RESERVATIONS
- </Typography>
- </Grid>
-
- <Grid item xs={1} />
- </Grid>
- </header>
- </div>
+ <ReservationPageHeader />
+ <ReservationDialog handleClose={handleClose} isOpen={isOpen} />
<Hidden smDown>
<Fab
@@ -79,7 +61,7 @@ export const ReservationPage: FC = () => {
<Grid item xs={1} lg={2} />
<Grid item xs={10} lg={8}>
- <ReservationListViewer />
+ <ReservationsListByWeek />
</Grid>
<Grid item xs={1} lg={2} />
</Grid>
diff --git a/src/components/Dashboard/ReservationPage/ReservationPageHeader.tsx b/src/components/Dashboard/ReservationPage/ReservationPageHeader.tsx
new file mode 100644
index 0000000..e276500
--- /dev/null
+++ b/src/components/Dashboard/ReservationPage/ReservationPageHeader.tsx
@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+import { Grid, Typography } from '@material-ui/core';
+import { NavBar } from 'components/Dashboard/HomePage/NavBar';
+import { reservationPageStyle } from './ReservationPage.style';
+
+export const ReservationPageHeader: FC = () => {
+ const classes = reservationPageStyle();
+
+ return (
+ <Grid container direction="column" className={classes.paddingBottom}>
+ <div className={classes.root}>
+ <Grid item>
+ <NavBar />
+ </Grid>
+ <header>
+ <Grid item container className={classes.paddingBottom}>
+ <Grid item xs={1} md={2} lg={2} />
+
+ <Grid item xs={10} md={6} lg={4}>
+ <Typography variant="h2" className={classes.whiteText}>
+ Plan Here Your
+ </Typography>
+ <Typography variant="h2" className={classes.whiteText}>
+ RESERVATIONS
+ </Typography>
+ </Grid>
+
+ <Grid item xs={1} />
+ </Grid>
+ </header>
+ </div>
+ </Grid>
+ );
+};
--
GitLab