Merge branch 'fix/api' into 'dev'

Implement list by date.

See merge request !68

src/api/getReservationListByWeek.ts

+import axios from 'axios';
+import { ReservationType } from 'types/ReservationType';
+import { formatDate } from './util/formatDate';
+
+/**
+ * @async
+ * Perform GET to get a list of all the reservations inserted by the current user given a week.
+ * @param {Date | null} week range.
+ * @returns a list of reservations.
+ */
+export const getReservationsListByWeek = async (
+  week: Date | null,
+): Promise<ReservationType[]> =>
+  week !== null
+    ? axios(`/api/web/reservations/week/${formatDate(week)}/`).then(
+        (res) => res.data,
+      )
+    : [];

src/api/util/formatDate.ts

+/**
+ * Util to format a date complying to server format.
+ * @param date date to format.
+ * @returns date formatted in format YYYY-MM-DD.
+ */
+export const formatDate = (date: Date): string =>
+  date !== null && date !== undefined
+    ? `${date.getUTCFullYear()}-${date.getUTCMonth() + 1}-${date.getUTCDate()}`
+    : '';

src/components/Dashboard/ReservationPage/Reservation/SeniorSearch/SeniorSearch.tsx

@@ -6,15 +6,17 @@ import { getSeniorListByLastName } from 'api/getSeniorListByLastName';
 import { SeniorSearchQueryType } from 'types/SeniorSearchQueryType';
 import { getSeniorListByCard } from 'api/getSeniorListByCard';
 
-type SeniorSearchProps = {
+type PropType = {
   senior: SeniorSearchQueryType | null;
   setSenior: React.Dispatch<React.SetStateAction<SeniorSearchQueryType | null>>;
 };
 
-export const SeniorSearch: FC<SeniorSearchProps> = ({
-  senior,
-  setSenior,
-}: SeniorSearchProps) => {
+/**
+ * Search a senior by member card or by last name.
+ * @param {PropType} react action data for connecting this component.
+ * @returns
+ */
+export const SeniorSearch: FC<PropType> = ({ senior, setSenior }: PropType) => {
   const [seniors, setSeniors] = useState<SeniorSearchQueryType[]>([]);
   const [query, setQuery] = useState<string | number>('');
 

src/components/Dashboard/ReservationPage/WeekReservations/WeekReservations.tsx

+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 {
+  KeyboardDatePicker,
+  MuiPickersUtilsProvider,
+} from '@material-ui/pickers';
+import { useReservationsListByWeek } from 'hooks/useReservationsListByWeek';
+
+/**
+ * Displays a list of all reservations from api.
+ * @returns rendered list of reservations.
+ */
+export const WeekReservations: FC = () => {
+  const [selectedDate, handleDateChange] = useState<Date | null>(new Date());
+
+  const reservations = useReservationsListByWeek(selectedDate);
+
+  return (
+    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+      <div data-testid="ReservationListViewer">
+        <KeyboardDatePicker
+          value={selectedDate}
+          onChange={(date) => handleDateChange(date)}
+          format="dd/MM/yyyy"
+        />
+        <Grid item container>
+          {reservations.length !== 0 ? (
+            reservations.map((reservation, key) => (
+              <Reservation reservation={reservation} />
+            ))
+          ) : (
+            <h1>You do not have reservations.</h1>
+          )}
+        </Grid>
+      </div>{' '}
+    </MuiPickersUtilsProvider>
+  );
+};

src/hooks/useReservationsListByWeek.ts

+import { getReservationsListByWeek } from 'api/getReservationListByWeek';
+import { getReservationsList } from 'api/getReservationsList';
+import { useMemo, useState } from 'react';
+import { ReservationType } from 'types/ReservationType';
+
+export const useReservationsListByWeek = (
+  week: Date | null,
+): ReservationType[] => {
+  const [reservationList, setReservationList] = useState<ReservationType[]>([]);
+  useMemo(() => {
+    let isMounted = true;
+
+    getReservationsListByWeek(week).then((list) => {
+      if (isMounted) {
+        setReservationList(list);
+      }
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [week]);
+  return reservationList;
+};