Move reservation list to component.

src/components/Dashboard/ReservationPage/ReservationListViewer.tsx

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

src/components/Dashboard/ReservationPage/ReservationPage.style.ts

 import { makeStyles } from '@material-ui/core/styles';
 
-export const useStyles = makeStyles(() => ({
+export const reservationPageStyle = makeStyles(() => ({
   root: {
     minHeight: '36vh',
     backgroundImage: `url(${'/assets/bgMED.svg'})`,

src/components/Dashboard/ReservationPage/ReservationPage.tsx

 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>