upd

src/components/SidebarTab2.tsx

@@ -1,11 +1,15 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable no-irregular-whitespace */
 import { Trans } from "react-i18next";
 import useSidebarTabStore from "../stores/useSidebarStore";
 import TimeSelector from "./TimeSelector";
 import CloseIcon from "./icons/CloseIcon";
-import { format } from "date-fns";
+import { eachMinuteOfInterval, format, parse, parseISO } from "date-fns";
 import i18n from "../i18n";
 import { enUS, ru } from "date-fns/locale";
+import ky from "ky";
+import { useEffect, useState } from "react";
 
 function SidebarTab2() {
   const [
@@ -15,6 +19,7 @@ function SidebarTab2() {
     setSelectedTime,
     selectedDay,
     selectedTime,
+    buildId,
   ] = useSidebarTabStore((state) => [
     state.currentTab,
     state.setCurrentTab,
@@ -22,13 +27,84 @@ function SidebarTab2() {
     state.setSelectedTime,
     state.selectedDay,
     state.selectedTime,
+    state.buildId,
   ]);
+  const [scheduledSessions, setScheduledSessions] = useState<any[]>();
+  const [schedule, setSchedule] = useState<{ [key: string]: any }>();
+  const [scheduleTimes, setScheduleTimes] = useState<any[]>();
 
   function handleSelectTime(time: string) {
     setSelectedTime(time);
     setCurrentTab(currentTab + 1);
   }
 
+  async function getSchedule() {
+    if (!selectedDay) return;
+
+    try {
+      const result: { [key: string]: any } = await ky
+        .get(
+          `http://localhost:3001/schedules/builds/${buildId}?date=${selectedDay.toISOString()}`
+        )
+        .json();
+
+      setSchedule(result);
+    } catch (error) {
+      if (error instanceof Error) {
+        console.log("Error: ", error.message);
+      }
+    }
+  }
+
+  function generateScheduleTimes() {
+    if (!schedule || !scheduledSessions) return;
+
+    const step = schedule.sessionDuration + schedule.sessionBreak;
+    const times = eachMinuteOfInterval(
+      {
+        start: parse(schedule.startTime, "HH:mm", new Date()),
+        end: parse(schedule.endTime, "HH:mm", new Date()),
+      },
+      { step }
+    );
+
+    const formatTimes = times.map((time) => ({
+      value: format(time, "HH:mm"),
+      active:
+        scheduledSessions.filter(
+          (scheduledSession) => scheduledSession.startAt === time.toISOString()
+        ).length < 3,
+    }));
+
+    setScheduleTimes(formatTimes);
+  }
+
+  async function getScheduledSessions() {
+    if (!selectedDay) return;
+
+    const result: any[] = await ky
+      .get(
+        `http://localhost:3001/scheduled_sessions/builds/${buildId}?date=${selectedDay?.toISOString()}`
+      )
+      .json();
+
+    setScheduledSessions(result);
+  }
+
+  useEffect(() => {
+    getScheduledSessions();
+  }, [selectedDay]);
+
+  useEffect(() => {
+    if (!scheduledSessions) return;
+
+    getSchedule();
+  }, [scheduledSessions]);
+
+  useEffect(() => {
+    generateScheduleTimes();
+  }, [schedule]);
+
   return (
     <div className="sm:p-8 p-6 flex flex-col justify-between sm:gap-8 gap-6 min-h-full">
       <div>
@@ -57,22 +133,23 @@ function SidebarTab2() {
               </p>
             </div>
 
-            <div className="border-b  border-[#798FFF] p-4 text-center">
+            <div className="border-b border-[#798FFF] p-4 text-center">
               <p className="leading-none font-gilroy font-semibold text-sm">
-                {selectedTime ? (
-                  selectedTime
-                ) : (
-                  <Trans i18nKey={"sidebar.time"}>Время</Trans>
-                )}
+                <Trans i18nKey={"sidebar.time"}>Время</Trans>
               </p>
             </div>
           </div>
         </div>
 
         <div className="mt-6">
-          <TimeSelector
-            handleSelect={(time: string) => handleSelectTime(time)}
-          />
+          {scheduleTimes && scheduleTimes.length > 0 ? (
+            <TimeSelector
+              times={scheduleTimes}
+              handleSelect={(time) => handleSelectTime(time)}
+            />
+          ) : (
+            "Загрузка данных..."
+          )}
         </div>
       </div>