feat: task list generated based on fetch

This commit is contained in:
rngsurrounded
2025-03-02 21:31:01 +09:00
parent b67d03798a
commit bcfd0968b9
5 changed files with 29 additions and 68 deletions
@@ -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">
<img
src={competition.image_url}
src={competition.image_url ? competition.image_url : '/DANO.png'}
alt={competition.title}
className="h-full w-full object-cover object-center"
/>
</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>
@@ -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>
@@ -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>
@@ -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"; // Keep mocks for solutions for now
import { mockSolutions } from "@/shared/mocks/mocks";
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 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);
}
};
const tasksQuery = useQuery({
queryKey: ["competitionTasks", competitionId],
queryFn: () => getCompetitionTasks(competitionId),
enabled: !!competitionId,
// refetchOnWindowFocus: false,
});
if (competitionId) {
fetchTasks();
}
}, [competitionId]);
const tasks = tasksQuery.data || [];
const isLoading = tasksQuery.isLoading;
const error = tasksQuery.error ? "Не удалось загрузить задания. Пожалуйста, попробуйте позже." : null;
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}
+1 -1
View File
@@ -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;
}