Merge branch 'master' of gitlab.prodcontest.ru:team-15/project

services/frontend/src/pages/CompetitionSession/index.tsx

@@ -1,24 +1,61 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useParams, Navigate } from "react-router-dom";
-import { Task } from "@/shared/types";
-import { mockSolutions, mockTasks } from "@/shared/mocks/mocks";
+import { Task, TaskStatus } from "@/shared/types";
+import { mockSolutions } from "@/shared/mocks/mocks"; // Keep mocks for solutions for now
 import CompetitionHeader from "./components/CompetitionHeader";
 import TaskContent from "./components/TaskContent";
 import TaskSolution from "./modules/TaskSolution";
+import { getCompetitionTasks } from "@/shared/api/session";
+import { Loader2 } from "lucide-react";
 
 const CompetitionSession = () => {
   const { id, taskId } = useParams<{ id: string; taskId?: string }>();
-  const [tasks] = useState<Task[]>(mockTasks);
+  const [tasks, setTasks] = useState<Task[]>([]);
   const [answer, setAnswer] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-  const currentTask = tasks.find((t) => t.id === taskId) || tasks.at(0);
+  const competitionId = id || "";
 
-  if (!taskId && tasks.length > 0) {
-    return <Navigate to={`/competition/${id}/tasks/${tasks[0].id}`} replace />;
+  useEffect(() => {
+    const fetchTasks = async () => {
+      try {
+        setLoading(true);
+        const fetchedTasks = await getCompetitionTasks(competitionId);
+        setTasks(fetchedTasks);
+        setError(null);
+      } catch (err) {
+        console.error("Failed to fetch tasks:", err);
+        setError("Не удалось загрузить задания. Пожалуйста, попробуйте позже.");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (competitionId) {
+      fetchTasks();
+    }
+  }, [competitionId]);
+
+  const currentTask = tasks.find((t) => t.id === taskId) || null;
+
+  if (!taskId && tasks.length > 0 && !loading) {
+    return (
+      <Navigate
+        to={`/competition/${competitionId}/tasks/${tasks[0].id}`}
+        replace
+      />
+    );
   }
 
-  const handleSubmit = () => {
-    console.log("Submitting answer:", answer);
+  const handleSubmit = async () => {
+    if (!currentTask || !competitionId) return;
+
+    try {
+      console.log("Solution submitted successfully");
+    } catch (err) {
+      console.error("Failed to submit solution:", err);
+    }
   };
 
   return (
@@ -26,17 +63,26 @@ const CompetitionSession = () => {
       <CompetitionHeader
         title="Олимпиада DANO 2025. Индивидуальный этап"
         tasks={tasks}
-        competitionId={id || ""}
+        competitionId={competitionId}
       />
 
       <main className="flex-1 bg-[#F8F8F8] pb-8">
         <div className="mx-auto max-w-6xl px-4 py-6">
-          {currentTask ? (
+          {loading ? (
+            <div className="flex h-40 flex-col items-center justify-center rounded-lg bg-white">
+              <Loader2 className="mb-2 h-8 w-8 animate-spin text-gray-400" />
+              <p className="font-hse-sans text-gray-500">Загрузка заданий...</p>
+            </div>
+          ) : error ? (
+            <div className="flex h-40 items-center justify-center rounded-lg bg-white">
+              <p className="font-hse-sans text-red-500">{error}</p>
+            </div>
+          ) : currentTask ? (
             <div className="font-hse-sans flex flex-col gap-6 md:flex-row">
               <TaskContent task={currentTask} />
               <TaskSolution
                 task={currentTask}
-                solutions={mockSolutions}
+                solutions={mockSolutions} // Still using mock solutions
                 answer={answer}
                 setAnswer={setAnswer}
                 onSubmit={handleSubmit}
@@ -44,7 +90,7 @@ const CompetitionSession = () => {
             </div>
           ) : (
             <div className="flex h-40 items-center justify-center rounded-lg bg-white">
-              <p className="font-hse-sans text-gray-500">Загрузка задания...</p>
+              <p className="font-hse-sans text-gray-500">Задание не найдено</p>
             </div>
           )}
         </div>