call variable schedule request

Author: ana-pagnoncelli

src/pages/schedule/ScheduleClassTable/ScheduleClass.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 import {
   Typography,
@@ -12,77 +12,28 @@ import {
 } from "@mui/material";
 
 import { ScheduleClassTableRowDay } from "./ScheduleClassTableRowDay";
-import { ScheduleDay } from "../types";
+import { DateWithWeekDay, DayOfTheWeek, ScheduleDay } from "../types";
 import { tableHeadItemStyle, tableHeadStyle } from "../../styles";
-
-const scheduleList: ScheduleDay[] = [
-  {
-    day: "2021-03-02",
-    numberOfSpots: "2",
-    availableSpots: "2",
-    hours: [
-      {
-        hour: "13",
-        numberOfSpots: "2",
-        availableSpots: "2"
-      },
-      {
-        hour: "14",
-        numberOfSpots: "2",
-        availableSpots: "1"
-      },
-      {
-        hour: "15",
-        numberOfSpots: "2",
-        availableSpots: "0"
-      },
-      {
-        hour: "16",
-        numberOfSpots: "2",
-        availableSpots: "1"
-      },
-      {
-        hour: "17",
-        numberOfSpots: "2",
-        availableSpots: "2"
-      }
-    ]
-  },
-  {
-    day: "2021-03-03",
-    numberOfSpots: "2",
-    availableSpots: "2",
-    hours: [
-      {
-        hour: "13",
-        numberOfSpots: "2",
-        availableSpots: "2"
-      },
-      {
-        hour: "14",
-        numberOfSpots: "2",
-        availableSpots: "1"
-      },
-      {
-        hour: "15",
-        numberOfSpots: "2",
-        availableSpots: "0"
-      },
-      {
-        hour: "16",
-        numberOfSpots: "2",
-        availableSpots: "1"
-      },
-      {
-        hour: "17",
-        numberOfSpots: "2",
-        availableSpots: "2"
-      }
-    ]
-  }
-];
+import { getSchedulesForAListOfDays } from "../requests";
 
 export function ScheduleClass() {
+  const listOfDays: DateWithWeekDay[] = [
+    { week_day: DayOfTheWeek.MONDAY, date: "2023-04-20" },
+    { week_day: DayOfTheWeek.TUESDAY, date: "2023-04-21" }
+  ];
+
+  const [schedulesForAListOfDays, setSchedulesForAListOfDays] = useState<
+    ScheduleDay[]
+  >([]);
+
+  useEffect(() => {
+    const fetchSchedules = async () => {
+      setSchedulesForAListOfDays(await getSchedulesForAListOfDays(listOfDays));
+    };
+
+    fetchSchedules();
+  }, []);
+
   return (
     <>
       <Typography variant='h3'>Schedule a Class </Typography>
@@ -103,7 +54,7 @@ export function ScheduleClass() {
             </TableRow>
           </TableHead>
           <TableBody>
-            {scheduleList.map((scheduleDay) => (
+            {schedulesForAListOfDays.map((scheduleDay) => (
               <ScheduleClassTableRowDay
                 key={scheduleDay.day}
                 scheduleDay={scheduleDay}

src/pages/schedule/requests.tsx

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { FixedSchedule } from "./types";
+import { DateWithWeekDay, FixedSchedule, ScheduleDay } from "./types";
 import {
   scheduleCreated,
   scheduleDeleted
@@ -22,6 +22,24 @@ export const getSchedules = async (): Promise<FixedSchedule[]> => {
   return schedules;
 };
 
+export const getSchedulesForAListOfDays = async (
+  listOfDays: DateWithWeekDay[]
+): Promise<ScheduleDay[]> => {
+  let schedules: ScheduleDay[] = [];
+
+  await axios
+    .post(`/variableSchedules/get/forAListOfDays/`, listOfDays)
+    .then((response) => {
+      schedules = response.data;
+      console.log(schedules);
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+
+  return schedules;
+};
+
 export const deleteScheduleRequest = async (scheduleId: string) => {
   let message: AlertMessage = {
     text: "",

src/pages/schedule/types.tsx

@@ -33,6 +33,11 @@ export type FixedSchedule = {
   users_list: string[];
 };
 
+export type DateWithWeekDay = {
+  week_day: DayOfTheWeek;
+  date: string;
+};
+
 export type FixedSchedulesByDay = {
   availableSpots: number;
   numberOfSpots: number;