feat: task list generated based on fetch

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

@@ -64,15 +64,13 @@ const CompetitionPage = () => {
       </Link>
 
       <div className="flex flex-col gap-6">
-        {competition.image_url && (
+        <div className="aspect-2 h-auto w-full overflow-hidden rounded-xl">
-          <div className="aspect-2 h-auto w-full overflow-hidden rounded-xl">
+          <img
-            <img
+            src={competition.image_url ? competition.image_url : '/DANO.png'}
-              src={competition.image_url}
+            alt={competition.title}
-              alt={competition.title}
+            className="h-full w-full object-cover object-center"
-              className="h-full w-full object-cover object-center"
+          />
-            />
+        </div>
-          </div>
-        )}
 
         <div className="flex flex-col-reverse gap-8 md:flex-row">
           <div className="flex flex-1 flex-col gap-5">
@@ -89,7 +87,7 @@ const CompetitionPage = () => {
               onClick={handleStart} 
               disabled={startMutation.isPending}
             >
-              {startMutation.isPending ? "Загрузка..." : "Начать"}
+              {startMutation.isPending ? "Загрузка..." : "Приступить к выполнению"}
             </Button>
           </div>
         </div>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Task } from "@/shared/types";
+import { Task } from '@/shared/types/task';
 import { getTaskBgColor, getTaskTextColor } from '../../utils/utils';
 
 interface CompetitionHeaderProps {
@@ -28,12 +28,12 @@ const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
             <Link
               key={task.id}
               to={`/competition/${competitionId}/tasks/${task.id}`}
-              className={`${getTaskBgColor(task.status)} ${getTaskTextColor(task.status)} 
+              className={`text-[var(--color-task-text-uncleared)] bg-[var(--color-task-uncleared)]
                 rounded-lg px-3 py-1.5 font-medium text-sm font-hse-sans cursor-pointer 
                 transition-all hover:brightness-95 flex-shrink-0
                 `}
             >
-              {task.number}
+              {task.in_competition_position}
             </Link>
           ))}
         </div>

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

@@ -10,30 +10,6 @@ interface TaskContentProps {
 }
 
 const TaskContent: React.FC<TaskContentProps> = ({ task }) => {
-  const markdownContent = `
-## Задача на числовую последовательность
-
-Рассмотрим последовательность чисел: 
-\`2, 3, 5, 9, 17, 33, 65, 129, ...\`
-
-Каждый член этой последовательности, **начиная с третьего**, равен сумме двух предыдущих членов:
-- $a_1 = 2$
-- $a_2 = 3$
-- $a_n = a_{n-1} + a_{n-2}$ для всех $n ≥ 3$
-
-### Задание:
-Найдите сумму первых 15 членов этой последовательности.
-
-*Примечание:* Для решения задачи вам может быть полезно записать несколько первых членов последовательности:
-1. $a_1 = 2$
-2. $a_2 = 3$
-3. $a_3 = 3 + 2 = 5$
-4. $a_4 = 5 + 3 = 8$
-5. $a_5 = 8 + 5 = 13$
-
-**В ответе укажите целое число.**
-  `;
-
   return (
     <div className="flex-1 bg-white rounded-lg p-6">
       <h2 className="text-3xl font-semibold mb-6 font-hse-sans">
@@ -45,7 +21,7 @@ const TaskContent: React.FC<TaskContentProps> = ({ task }) => {
           remarkPlugins={[remarkMath]}
           rehypePlugins={[rehypeKatex]}
         >
-          {markdownContent}
+          {task.description}
         </ReactMarkdown>
       </div>
     </div>

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

@@ -1,45 +1,32 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useParams, Navigate } from "react-router-dom";
-import { Task, TaskStatus } from "@/shared/types";
+import { mockSolutions } from "@/shared/mocks/mocks";
-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";
+import { useQuery } from "@tanstack/react-query";
 
 const CompetitionSession = () => {
   const { id, taskId } = useParams<{ id: string; taskId?: string }>();
-  const [tasks, setTasks] = useState<Task[]>([]);
   const [answer, setAnswer] = useState("");
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
   const competitionId = id || "";
 
-  useEffect(() => {
+  const tasksQuery = useQuery({
-    const fetchTasks = async () => {
+    queryKey: ["competitionTasks", competitionId],
-      try {
+    queryFn: () => getCompetitionTasks(competitionId),
-        setLoading(true);
+    enabled: !!competitionId,
-        const fetchedTasks = await getCompetitionTasks(competitionId);
+    // refetchOnWindowFocus: false, 
-        setTasks(fetchedTasks);
+  });
-        setError(null);
-      } catch (err) {
-        console.error("Failed to fetch tasks:", err);
-        setError("Не удалось загрузить задания. Пожалуйста, попробуйте позже.");
-      } finally {
-        setLoading(false);
-      }
-    };
 
-    if (competitionId) {
+  const tasks = tasksQuery.data || [];
-      fetchTasks();
+  const isLoading = tasksQuery.isLoading;
-    }
+  const error = tasksQuery.error ? "Не удалось загрузить задания. Пожалуйста, попробуйте позже." : null;
-  }, [competitionId]);
 
   const currentTask = tasks.find((t) => t.id === taskId) || null;
 
-  if (!taskId && tasks.length > 0 && !loading) {
+  if (!taskId && tasks.length > 0 && !isLoading) {
     return (
       <Navigate
         to={`/competition/${competitionId}/tasks/${tasks[0].id}`}
@@ -68,7 +55,7 @@ const CompetitionSession = () => {
 
       <main className="flex-1 bg-[#F8F8F8] pb-8">
         <div className="mx-auto max-w-6xl px-4 py-6">
-          {loading ? (
+          {isLoading ? (
             <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>
@@ -82,7 +69,7 @@ const CompetitionSession = () => {
               <TaskContent task={currentTask} />
               <TaskSolution
                 task={currentTask}
-                solutions={mockSolutions} // Still using mock solutions
+                solutions={mockSolutions}
                 answer={answer}
                 setAnswer={setAnswer}
                 onSubmit={handleSubmit}

services/frontend/src/shared/types/task.ts

@@ -2,7 +2,7 @@ export interface Task {
   id: string;
   title: string;
   description: string;
-  type: 'input' | 'file' | 'code';
+  type: TaskType;
   in_competition_position: number;
   points: number;
 }