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 37c9635393a68a2d3af603897e611050d3cc3e32..1cd99aa468ef7cf3885f645b7c43b1e036591197 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 ad452f18391176d1b7d0d91793373cfe94e974ac..46c9e9c2589267984f50a803c231430498f29959 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 fea77db54cb6c210da40559864556f9310fb3231..1cfc1d8b83614ef5dfa22a6ab070874946c5b3c4 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 0000000000000000000000000000000000000000..e2765008e76301f2dc77a8a4b5491c2fe1968c37 --- /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> + ); +};