From f9e5d3614a330afd2bc42523512d0b307a25a450 Mon Sep 17 00:00:00 2001
From: Tatyana <krasnovavgma@yandex.ru>
Date: Thu, 4 Sep 2025 22:13:37 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BD=D0=B0=D0=B4=D0=BE=20=D1=80=D0=B5=D1=88?=
 =?UTF-8?q?=D0=B8=D1=82=D1=8C=20=D0=BF=D1=80=D0=BE=D0=B1=D0=BB=D0=B5=D0=BC?=
 =?UTF-8?q?=D1=83=20=D1=81=20=D1=80=D0=BE=D1=83=D1=82=D0=B8=D0=BD=D0=B3?=
 =?UTF-8?q?=D0=BE=D0=BC=20=D0=BF=D0=BE=20=D1=83=D0=BF=D1=80=D0=B0=D0=B6?=
 =?UTF-8?q?=D0=BD=D0=B5=D0=BD=D0=B8=D1=8F=D0=BC=20=D0=BA=D1=83=D1=80=D1=81?=
 =?UTF-8?q?=D0=B0=20/=20=D1=83=20=D0=BD=D0=B0=D1=81=20=D0=B4=D0=BE=D0=BB?=
 =?UTF-8?q?=D0=B6=D0=BD=D1=8B=20=D1=83=D1=87=D0=B8=D1=82=D1=8B=D0=B2=D0=B0?=
 =?UTF-8?q?=D1=82=D1=8C=D1=81=D1=8F=20=D0=B4=D0=BD=D0=B8,=20=D1=82.=D0=BA.?=
 =?UTF-8?q?=20=D0=BC=D0=B0=D1=81=D1=81=D0=B8=D0=B2=20=D1=83=D0=BF=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B6=D0=BD=D0=B5=D0=BD=D0=B8=D0=B9=20=D1=84=D0=B8=D0=BB?=
 =?UTF-8?q?=D1=8C=D1=82=D1=80=D1=83=D0=B5=D1=82=D1=81=D1=8F=20=D0=BF=D0=BE?=
 =?UTF-8?q?=20=D0=B4=D0=BD=D1=8F=D0=BC=20=D0=B8=20=D0=BC=D0=B0=D1=80=D1=88?=
 =?UTF-8?q?=D1=80=D1=83=D1=82=D1=8B=20=D0=BD=D0=B5=D0=B2=D0=B5=D1=80=D0=BD?=
 =?UTF-8?q?=D1=8B=D0=B5=20=D0=BF=D0=BE=D0=BB=D1=83=D1=87=D0=B0=D1=8E=D1=82?=
 =?UTF-8?q?=D1=81=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/CourseExercises.tsx | 55 +++++++++++++++--------------------
 src/pages/Exercise.tsx        | 31 ++------------------
 src/shared/consts/router.ts   |  4 +--
 3 files changed, 27 insertions(+), 63 deletions(-)

diff --git a/src/pages/CourseExercises.tsx b/src/pages/CourseExercises.tsx
index 00cd46f..e02d630 100644
--- a/src/pages/CourseExercises.tsx
+++ b/src/pages/CourseExercises.tsx
@@ -15,6 +15,7 @@ import type { Course } from "../pages/Courses";
 // import { Exercise } from "./Exercise";
 
 export interface CourseExercises {
+  id: number;
   id_course: number;
   id_exercise: number;
   exercise: Exercise;
@@ -37,11 +38,13 @@ export const CourseExercises = () => {
 
   const location = useLocation<{ course?: Course }>();
   const course = location.state?.course;
-  
+
 
   const [course_exercises, setExercises] = useState<CourseExercises[]>([]);
   const [selectedDay, setSelectedDay] = useState<number | null>(null);
 
+
+
   const token = localStorage.getItem('authToken');
 
   useEffect(() => {
@@ -60,13 +63,10 @@ export const CourseExercises = () => {
 
     })
       .then(response => {
-        console.log('Response status:', response.status);
-        console.log('Данные страницы упражнения курса:', response.data);
-        // setPacientData(response.data);
+        console.log('Данные упражнения курса:', response.data.course_exercises);
+
         setExercises(response.data.course_exercises);
 
-
-
       })
       .catch(error => {
         if (error.response) {
@@ -88,27 +88,6 @@ export const CourseExercises = () => {
     }
   }, [course_exercises]);
 
-  //Этот код — это React-хук useEffect, который выполняет определённый блок кода при изменении зависимостей. Давайте разберём его подробно:
-  //Он следит за изменением массива course_exercises. Когда course_exercises обновляется (например, загружается с сервера или изменяется), он проверяет:
-
-  // Есть ли в массиве упражнения (course_exercises.length > 0)
-  // И выбран ли уже день (selectedDay === null)
-  // Если оба условия выполняются, то:
-
-  // Устанавливает selectedDay в значение day первого элемента массива course_exercises[0].
-  // Почему это нужно?
-  // Это логика инициализации:
-
-  // Когда данные о упражнениях загружены впервые, и пользователь ещё не выбрал день (selectedDay равен null),
-  // автоматически выбирается первый день из загруженных упражнений.
-  // Почему [course_exercises] в конце?
-  // Это массив зависимостей. Он говорит React:
-
-  // Запускать этот эффект только тогда, когда course_exercises изменится.
-
-  // Без этого эффекта он бы запускался при каждом рендере, что нежелательно.
-
-
   const uniqueDays = Array.from(new Set(course_exercises.map(ex => ex.day))).sort((a, b) => a - b);
 
   const dayMap: { [key: number]: number } = {};
@@ -125,13 +104,12 @@ export const CourseExercises = () => {
     ? course_exercises.filter(ex => ex.day === selectedDay)
     : course_exercises;
 
-
+console.log('отфильтрованный список по дням',filteredExercises)
 
   return (
     <div className="my-36 min-h-screen max-w-4xl mx-auto">
       <HeaderNav item={course?.title ?? 'Название курса'} text={'курс'} />
-      {/* Это выражение использует оператор опциональной цепочки (?.) и оператор нулевого слияния (??). 
-Если course не null и не undefined, то взять его свойство title, иначе — вернуть undefined*/}
+
       <div className="px-6 mb-8">
         {/* Заголовок секции */}
         <div className="flex flex-col sm:flex-row justify-between content-center mb-6">
@@ -147,10 +125,13 @@ export const CourseExercises = () => {
           <div className="mb-6">
             <div className="flex flex-wrap gap-2 overflow-x-auto pb-2">
               {days.map((day, index) => (
+
+
                 <button
                   key={day}
                   onClick={() => {
                     setSelectedDay(day);
+
                   }}
                   className={`flex-shrink-0 px-4 py-2 rounded-full text-xs sm:text-sm font-semibold transition-all duration-300 inline-block ${selectedDay === day
                     ? "bg-[#2BACBE] text-white shadow-lg"
@@ -167,11 +148,21 @@ export const CourseExercises = () => {
 
 
         <div className="exercise-list mb-20">
-          {filteredExercises.length > 0 ? (
+          {
+          
+          
+          filteredExercises.length > 0 ? (
             filteredExercises.map((item, index) => (
               <div
                 key={index}
-                onClick={() => history.push(getRouteExercise(item.id_course.toString(), item.id_exercise.toString()))}
+                onClick={() => {
+
+  // console.log(course_exercises.map(ex => ex.id_exercise))
+        
+
+        // Передаем id_course и индекс из полного массива
+        history.push(getRouteExercise(item.id_course.toString(), item.id_exercise.toString()));
+      }}
                 className="p-4 mb-4 cursor-pointer hover:scale-105 transition duration-300 glass-morphism rounded-3xl border border-white/50 shadow-2xl overflow-hidden backdrop-blur-2xl relative">
                 <div className="flex justify-between items-center">
                   <div>
diff --git a/src/pages/Exercise.tsx b/src/pages/Exercise.tsx
index f0131dc..086f1c8 100644
--- a/src/pages/Exercise.tsx
+++ b/src/pages/Exercise.tsx
@@ -28,7 +28,7 @@ export interface Exercise {
   sessionname: string // Название тренировочной сессии
 }
 
-// Описываем параметры, которые приходят из URL страницы
+
 interface RouteParams {
   courseId: string // ID курса (программы тренировок)
   exerciseId: string // ID конкретного упражнения
@@ -38,41 +38,14 @@ export const Exercise = () => {
   // Получаем функции для навигации и параметры из URL
   const history = useHistory()
   const { courseId, exerciseId } = useParams<RouteParams>()
-
-  // ========== ОСНОВНЫЕ СОСТОЯНИЯ КОМПОНЕНТА ==========
-  // Состояние для хранения данных упражнения (null = данные еще не загружены)
-  // Мы говорим TypeScript, что переменная exercise может быть либо объектом типа Exercise, либо null. Это важно, потому что изначально у нас нет данных (например, мы их ещё не загрузили), и состояние пустое — null
-
-
-  // exercise — это переменная/ текущее значение состояния, которое может быть объектом Exercise или null.
-  // setExercise — функция, с помощью которой можно обновить exercise.
-
-
-  // useState<string>("") — это вызов функции useState с аргументом "" (пустая строка).
-  // Внутри угловых скобок <string> мы указываем тип состояния (TypeScript).
-  // В круглых скобках ("") — передаём начальное значение состояния.
-
   const [exercise, setExercise] = useState<Exercise | null>(null)
-  // useState<Exercise | null>(null) — это вызов функции useState с начальным значением null
-
-  // Состояние загрузки (true = идет загрузка, false = загрузка завершена)
   const [loading, setLoading] = useState(true)
-  // если TypeScript может сам вывести тип из переданного начального значения, то указывать тип явно не обязательно
-
-  // Состояние ошибки (пустая строка = нет ошибки, текст = описание ошибки)
-  // С помощью ДЕСТРУКТУРИЗАЦИИ МАССИВА мы присваиваем первый элемент массива переменной error, а второй — функции setError
-  // Деструктуризация массива — это удобный синтаксис в JavaScript/TypeScript, который позволяет распаковать значения из массива в отдельные переменные
-  // Когда начальное значение — null или undefined, и TypeScript не может понять, какого типа будет состояние.
   const [error, setError] = useState<string>("")
 
   // ========== СОСТОЯНИЯ ТАЙМЕРУ УПРАЖНЕНИЯ ==========
-  // Играет ли сейчас таймер упражнения (true = идет, false = на паузе)
+
   const [isPlaying, setIsPlaying] = useState(false)
-
-  // Текущее время выполнения упражнения в секундах (0 = начало)
   const [currentTime, setCurrentTime] = useState(0)
-
-  // Общее время упражнения в секундах (по умолчанию 15 минут = 900 секунд)
   const [totalTime, setTotalTime] = useState(900)
 
   // ========== СОСТОЯНИЯ ПОДХОДОВ (СЕТОВ) ==========
diff --git a/src/shared/consts/router.ts b/src/shared/consts/router.ts
index dc53b5e..bb6de4c 100644
--- a/src/shared/consts/router.ts
+++ b/src/shared/consts/router.ts
@@ -4,7 +4,7 @@ export const getRouteHome = () => `/home`
 export const getRouteForgotPassword = () => `/forgot-password`
 export const getRouteCourses = () => `/courses`
 export const getRouteCourseExercises = (id: number | string) => `/course/${id}`
-export const getRouteExercise = (courseId: number | string, exerciseId: number | string) =>
-  `/course/${courseId}/${exerciseId}`
+export const getRouteExercise = (courseId: number | string, day: number | string, exerciseId: number | string) =>
+  `/course/${courseId}/${day}/${exerciseId}`
 export const getRouteSettings = () => `/settings`
 export const getRouteCourseComplete = () => `/course-complete`