Rename components and extract header to file.

src/components/Dashboard/ReservationPage/ReservationListViewer.tsx → 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 (

src/components/Dashboard/ReservationPage/WeekReservations/WeekReservations.tsx → 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"
         />

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>

src/components/Dashboard/ReservationPage/ReservationPageHeader.tsx

+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>
+  );
+};