mirror of
https://gitlab.com/megazordpobeda/DataRush.git
synced 2026-05-22 22:07:10 +00:00
Merge branch 'master' of gitlab.prodcontest.ru:team-15/project
This commit is contained in:
@@ -15,6 +15,7 @@ def analyze_data_task(self, submission_id):
|
||||
submission = CompetitionTaskSubmission.objects.get(id=submission_id)
|
||||
try:
|
||||
code = submission.content.read()
|
||||
print("YA SSF")
|
||||
files = [
|
||||
{
|
||||
"url": (
|
||||
@@ -32,7 +33,7 @@ def analyze_data_task(self, submission_id):
|
||||
f"{settings.CHECKER_API_ENDPOINT}/execute",
|
||||
json={
|
||||
"files": files,
|
||||
"code": base64.encode(code),
|
||||
"code": base64.b64encode(code).decode("utf-8"),
|
||||
"answer_file_path": submission.task.answer_file_path,
|
||||
"expected_hash": hashlib.sha256(
|
||||
submission.task.correct_answer_file.read()
|
||||
@@ -42,6 +43,7 @@ def analyze_data_task(self, submission_id):
|
||||
)
|
||||
response.raise_for_status()
|
||||
result = response.json()
|
||||
print("HOHOHO")
|
||||
|
||||
submission.stdout.save("output.txt", ContentFile(result["output"]))
|
||||
submission.result = {
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
// src/components/competition/CompetitionResultsModal.tsx
|
||||
import React from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Loader2 } from 'lucide-react';
|
||||
|
||||
export interface CompetitionResult {
|
||||
task_name: string;
|
||||
result: number;
|
||||
max_points: number
|
||||
}
|
||||
|
||||
interface CompetitionResultsModalProps {
|
||||
competitionTitle: string;
|
||||
results: CompetitionResult[] | undefined;
|
||||
isLoading: boolean;
|
||||
error: unknown;
|
||||
isOpen: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export const CompetitionResultsModal: React.FC<CompetitionResultsModalProps> = ({
|
||||
competitionTitle,
|
||||
results,
|
||||
isLoading,
|
||||
error,
|
||||
isOpen,
|
||||
onOpenChange,
|
||||
}) => {
|
||||
const renderResultValue = (result: number, maxPoints: number) => {
|
||||
if (result === -1) {
|
||||
return (
|
||||
<span className="font-semibold" style={{
|
||||
color: 'var(--color-task-text-checking)',
|
||||
backgroundColor: 'var(--color-task-checking)',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '4px'
|
||||
}}>
|
||||
На проверке
|
||||
</span>
|
||||
);
|
||||
} else if (result === -2) {
|
||||
return (
|
||||
<span className="font-semibold" style={{
|
||||
color: 'var(--color-task-text-uncleared)',
|
||||
backgroundColor: 'var(--color-task-uncleared)',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '4px'
|
||||
}}>
|
||||
Нет ответа
|
||||
</span>
|
||||
);
|
||||
} else if (result === 0) {
|
||||
return (
|
||||
<span className="font-semibold" style={{
|
||||
color: 'var(--color-task-text-wrong)',
|
||||
backgroundColor: 'var(--color-task-wrong)',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '4px'
|
||||
}}>
|
||||
Неверно (0/{maxPoints})
|
||||
</span>
|
||||
);
|
||||
} else if (result < maxPoints) {
|
||||
return (
|
||||
<span className="font-semibold" style={{
|
||||
color: 'var(--color-task-text-partial)',
|
||||
backgroundColor: 'var(--color-task-partial)',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '4px'
|
||||
}}>
|
||||
Частично верно ({result}/{maxPoints})
|
||||
</span>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<span className="font-semibold" style={{
|
||||
color: 'var(--color-task-text-correct)',
|
||||
backgroundColor: 'var(--color-task-correct)',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '4px'
|
||||
}}>
|
||||
Верно ({result}/{maxPoints})
|
||||
</span>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md md:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Результаты</DialogTitle>
|
||||
<DialogDescription>
|
||||
Ваши результаты по соревнованию "{competitionTitle}"
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="mt-4 space-y-4">
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center py-8">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-gray-400" />
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="text-center py-6 text-red-500">
|
||||
Произошла ошибка при загрузке результатов
|
||||
</div>
|
||||
) : results && results.length > 0 ? (
|
||||
results.map((result, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex flex-col md:flex-row justify-between items-start md:items-center p-4 bg-gray-50 rounded-lg border"
|
||||
>
|
||||
<div className="font-medium mb-2 md:mb-0">{result.task_name}</div>
|
||||
<div className="text-right">
|
||||
{renderResultValue(result.result, result.max_points)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center py-6 text-gray-500">
|
||||
Нет доступных результатов
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@@ -1,20 +1,23 @@
|
||||
import { useState } from "react";
|
||||
import { useParams, Link, useNavigate } from "react-router-dom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowLeft, Clock, Trophy, BookOpen, BarChart2, AlertCircle } from "lucide-react";
|
||||
import { ArrowLeft, Clock, Trophy, BookOpen, AlertCircle, BarChart2 } from "lucide-react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import { getCompetition, startCompetition } from "@/shared/api/competitions";
|
||||
import { getCompetition, startCompetition, getCompetitionResults } from "@/shared/api/competitions";
|
||||
import { getCompetitionTasks } from "@/shared/api/session";
|
||||
import { Loading } from "@/components/ui/loading";
|
||||
import { CompetitionType } from "@/shared/types/competition";
|
||||
import remarkMath from "remark-math";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import rehypeKatex from "rehype-katex";
|
||||
import { CompetitionResultsModal } from "./components/CompetitionResultModal";
|
||||
|
||||
const CompetitionPage = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const competitionId = id || "";
|
||||
const [isResultsModalOpen, setIsResultsModalOpen] = useState(false);
|
||||
|
||||
const competitionQuery = useQuery({
|
||||
queryKey: ["competition", competitionId],
|
||||
@@ -22,6 +25,12 @@ const CompetitionPage = () => {
|
||||
enabled: !!competitionId,
|
||||
});
|
||||
|
||||
const resultsQuery = useQuery({
|
||||
queryKey: ["competitionResults", competitionId],
|
||||
queryFn: () => getCompetitionResults(competitionId),
|
||||
enabled: !!competitionId,
|
||||
});
|
||||
|
||||
const startMutation = useMutation({
|
||||
mutationFn: () => startCompetition(competitionId),
|
||||
onSuccess: async () => {
|
||||
@@ -60,10 +69,10 @@ const CompetitionPage = () => {
|
||||
const handleStart = () => {
|
||||
startMutation.mutate();
|
||||
};
|
||||
|
||||
const handleViewResults = () => {
|
||||
console.log("sorryan");
|
||||
};
|
||||
|
||||
const hasResults = resultsQuery.data &&
|
||||
resultsQuery.data.length > 0 &&
|
||||
resultsQuery.data.some(result => result.result !== -2);
|
||||
|
||||
if (competitionQuery.isLoading) {
|
||||
return <Loading />;
|
||||
@@ -75,15 +84,6 @@ const CompetitionPage = () => {
|
||||
|
||||
const competition = competitionQuery.data;
|
||||
|
||||
const isCompetitionEnded = () => {
|
||||
if (!competition?.end_date) return false;
|
||||
|
||||
const endDate = new Date(competition.end_date);
|
||||
const now = new Date();
|
||||
|
||||
return now > endDate;
|
||||
};
|
||||
|
||||
const isCompetitionNotStarted = () => {
|
||||
if (!competition?.start_date) return false;
|
||||
|
||||
@@ -92,9 +92,18 @@ const CompetitionPage = () => {
|
||||
|
||||
return now < startDate;
|
||||
};
|
||||
|
||||
const isCompetitionEnded = () => {
|
||||
if (!competition?.end_date) return false;
|
||||
|
||||
const endDate = new Date(competition.end_date);
|
||||
const now = new Date();
|
||||
|
||||
return now > endDate;
|
||||
};
|
||||
|
||||
const competitionEnded = isCompetitionEnded();
|
||||
const competitionNotStarted = isCompetitionNotStarted();
|
||||
const competitionEnded = isCompetitionEnded();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
@@ -133,17 +142,17 @@ const CompetitionPage = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{competitionEnded && competition.type === CompetitionType.COMPETITIVE && (
|
||||
<div className="bg-red-100 text-red-700 px-3 py-1 rounded-full text-sm font-medium">
|
||||
Завершено
|
||||
</div>
|
||||
)}
|
||||
|
||||
{competitionNotStarted && competition.type === CompetitionType.COMPETITIVE && (
|
||||
<div className="bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full text-sm font-medium">
|
||||
Скоро начнется
|
||||
</div>
|
||||
)}
|
||||
|
||||
{competitionEnded && competition.type === CompetitionType.COMPETITIVE && (
|
||||
<div className="bg-red-100 text-red-700 px-3 py-1 rounded-full text-sm font-medium">
|
||||
Завершено
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h1 className="text-[34px] leading-11 font-semibold text-balance">
|
||||
@@ -178,17 +187,8 @@ const CompetitionPage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full *:w-full md:w-96">
|
||||
{competitionEnded && competition.type === CompetitionType.COMPETITIVE ? (
|
||||
<Button
|
||||
size={"lg"}
|
||||
onClick={handleViewResults}
|
||||
className="bg-indigo-600 hover:bg-indigo-700"
|
||||
>
|
||||
<BarChart2 size={18} className="mr-2" />
|
||||
Смотреть результаты
|
||||
</Button>
|
||||
) : competitionNotStarted && competition.type === CompetitionType.COMPETITIVE ? (
|
||||
<div className="w-full *:w-full md:w-96 flex flex-col gap-3">
|
||||
{competitionNotStarted && competition.type === CompetitionType.COMPETITIVE ? (
|
||||
<Button
|
||||
size={"lg"}
|
||||
disabled={true}
|
||||
@@ -197,7 +197,7 @@ const CompetitionPage = () => {
|
||||
<AlertCircle size={18} className="mr-2" />
|
||||
Скоро начнется
|
||||
</Button>
|
||||
) : (
|
||||
) : !competitionEnded ? (
|
||||
<Button
|
||||
size={"lg"}
|
||||
onClick={handleStart}
|
||||
@@ -205,10 +205,35 @@ const CompetitionPage = () => {
|
||||
>
|
||||
{startMutation.isPending ? "Загрузка..." : "Приступить к выполнению"}
|
||||
</Button>
|
||||
) : null}
|
||||
|
||||
{hasResults && (
|
||||
<Button
|
||||
size={"lg"}
|
||||
onClick={() => setIsResultsModalOpen(true)}
|
||||
>
|
||||
<BarChart2 size={18} className="mr-2" />
|
||||
Посмотреть результаты
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{competitionEnded && !hasResults && competition.type === CompetitionType.COMPETITIVE && !resultsQuery.isLoading && (
|
||||
<div className="text-center p-4 border rounded-md bg-gray-50">
|
||||
<p className="text-gray-600">Соревнование завершено. Увы</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CompetitionResultsModal
|
||||
competitionTitle={competition.title}
|
||||
results={resultsQuery.data}
|
||||
isLoading={resultsQuery.isLoading}
|
||||
error={resultsQuery.error}
|
||||
isOpen={isResultsModalOpen}
|
||||
onOpenChange={setIsResultsModalOpen}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
+59
-18
@@ -1,8 +1,9 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom';
|
||||
import { Task } from '@/shared/types/task';
|
||||
import { ArrowLeft, Clock } from 'lucide-react';
|
||||
import { ArrowLeft } from 'lucide-react';
|
||||
import { CompetitionType } from '@/shared/types/competition';
|
||||
import { CompetitionResult } from '@/shared/types/competition';
|
||||
|
||||
interface CompetitionHeaderProps {
|
||||
title: string;
|
||||
@@ -11,8 +12,9 @@ interface CompetitionHeaderProps {
|
||||
setAnswer: (value: string) => void;
|
||||
setSelectedFile: (file: File | null) => void;
|
||||
competitionType?: CompetitionType;
|
||||
startDate?: Date;
|
||||
endDate?: Date;
|
||||
startDate?: Date | string;
|
||||
endDate?: Date | string;
|
||||
taskResults?: CompetitionResult[];
|
||||
}
|
||||
|
||||
const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
|
||||
@@ -23,9 +25,11 @@ const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
|
||||
setSelectedFile,
|
||||
competitionType,
|
||||
startDate,
|
||||
endDate
|
||||
endDate,
|
||||
taskResults = []
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
const { taskId } = useParams<{ taskId?: string }>();
|
||||
const [timeLeft, setTimeLeft] = useState<string>('');
|
||||
|
||||
const handleTaskSelect = (taskId: string) => {
|
||||
@@ -34,7 +38,7 @@ const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
|
||||
navigate(`/competition/${competitionId}/tasks/${taskId}`);
|
||||
}
|
||||
|
||||
const formatDate = (date?: Date) => {
|
||||
const formatDate = (date?: Date | string) => {
|
||||
if (!date) return '';
|
||||
|
||||
const dateObj = typeof date === 'string' ? new Date(date) : date;
|
||||
@@ -74,6 +78,42 @@ const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
|
||||
return () => clearInterval(timerInterval);
|
||||
}, [endDate, competitionId, navigate, competitionType]);
|
||||
|
||||
const getTaskStatus = (task: Task) => {
|
||||
const result = taskResults.find(r => r.task_name === task.title);
|
||||
|
||||
let bgColor = 'var(--color-task-uncleared)';
|
||||
let textColor = 'var(--color-task-text-uncleared)';
|
||||
|
||||
if (result) {
|
||||
if (result.result === -1) {
|
||||
bgColor = 'var(--color-task-checking)';
|
||||
textColor = 'var(--color-task-text-checking)';
|
||||
} else if (result.result === -2) {
|
||||
bgColor = 'var(--color-task-uncleared)';
|
||||
textColor = 'var(--color-task-text-uncleared)';
|
||||
} else if (result.result === 0) {
|
||||
bgColor = 'var(--color-task-wrong)';
|
||||
textColor = 'var(--color-task-text-wrong)';
|
||||
} else if (result.result < result.max_points) {
|
||||
bgColor = 'var(--color-task-partial)';
|
||||
textColor = 'var(--color-task-text-partial)';
|
||||
} else if (result.result === result.max_points) {
|
||||
bgColor = 'var(--color-task-correct)';
|
||||
textColor = 'var(--color-task-text-correct)';
|
||||
}
|
||||
}
|
||||
|
||||
const isActive = task.id === taskId;
|
||||
const activeBorder = isActive ? 'border-2 border-blue-500' : '';
|
||||
|
||||
return {
|
||||
backgroundColor: bgColor,
|
||||
color: textColor,
|
||||
className: `rounded-lg px-3 py-1.5 font-medium text-sm font-hse-sans cursor-pointer
|
||||
transition-all hover:brightness-95 flex-shrink-0 ${activeBorder}`
|
||||
};
|
||||
};
|
||||
|
||||
const showTimeSection = competitionType === CompetitionType.COMPETITIVE && (startDate || endDate);
|
||||
|
||||
return (
|
||||
@@ -120,18 +160,19 @@ const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-4 pb-4 overflow-x-auto no-scrollbar">
|
||||
{tasks.map((task) => (
|
||||
<button
|
||||
key={task.id}
|
||||
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
|
||||
`}
|
||||
onClick={() => handleTaskSelect(task.id)}
|
||||
>
|
||||
{task.in_competition_position}
|
||||
</button>
|
||||
))}
|
||||
{tasks.map((task) => {
|
||||
const { backgroundColor, color, className } = getTaskStatus(task);
|
||||
return (
|
||||
<button
|
||||
key={task.id}
|
||||
style={{ backgroundColor, color }}
|
||||
className={className}
|
||||
onClick={() => handleTaskSelect(task.id)}
|
||||
>
|
||||
{task.in_competition_position}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useParams, Navigate, useNavigate } from "react-router-dom";
|
||||
import { useParams, Navigate } from "react-router-dom";
|
||||
import CompetitionHeader from "./components/CompetitionHeader";
|
||||
import TaskContent from "./components/TaskContent";
|
||||
import TaskSolution from "./modules/TaskSolution";
|
||||
import { getCompetitionTasks, submitTaskSolution } from "@/shared/api/session";
|
||||
import { getCompetition } from "@/shared/api/competitions";
|
||||
import { getCompetition, getCompetitionResults } from "@/shared/api/competitions";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { TaskType } from "@/shared/types/task";
|
||||
@@ -16,7 +16,6 @@ const CompetitionSession = () => {
|
||||
const [isReloading, setIsReloading] = useState(false);
|
||||
const competitionId = id || "";
|
||||
const queryClient = useQueryClient();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const competitionQuery = useQuery({
|
||||
queryKey: ["competition", competitionId],
|
||||
@@ -30,6 +29,12 @@ const CompetitionSession = () => {
|
||||
enabled: !!competitionId,
|
||||
});
|
||||
|
||||
const resultsQuery = useQuery({
|
||||
queryKey: ["competitionResults", competitionId],
|
||||
queryFn: () => getCompetitionResults(competitionId),
|
||||
enabled: !!competitionId,
|
||||
});
|
||||
|
||||
const submitMutation = useMutation({
|
||||
mutationFn: () => {
|
||||
if (!currentTask || !competitionId) throw new Error("Missing task or competition ID");
|
||||
@@ -47,10 +52,14 @@ const CompetitionSession = () => {
|
||||
queryKey: ['solutionHistory', competitionId, taskId]
|
||||
});
|
||||
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ['competitionResults', competitionId]
|
||||
});
|
||||
|
||||
setIsReloading(true);
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.reload()
|
||||
window.location.reload();
|
||||
setIsReloading(false);
|
||||
}, 2500);
|
||||
},
|
||||
@@ -61,6 +70,7 @@ const CompetitionSession = () => {
|
||||
|
||||
const competition = competitionQuery.data;
|
||||
const tasks = tasksQuery.data || [];
|
||||
const results = resultsQuery.data || [];
|
||||
const isLoading = tasksQuery.isLoading || competitionQuery.isLoading;
|
||||
const error = tasksQuery.error || competitionQuery.error
|
||||
? "Не удалось загрузить данные. Пожалуйста, попробуйте позже."
|
||||
@@ -113,6 +123,7 @@ const CompetitionSession = () => {
|
||||
competitionType={competition?.type}
|
||||
startDate={competition?.start_date}
|
||||
endDate={competition?.end_date}
|
||||
taskResults={results}
|
||||
/>
|
||||
|
||||
<main className="flex-1 bg-[#F8F8F8] pb-8">
|
||||
@@ -138,6 +149,16 @@ const CompetitionSession = () => {
|
||||
onSubmit={handleSubmit}
|
||||
isSubmitting={isSubmitting}
|
||||
/>
|
||||
{isReloading && (
|
||||
<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
|
||||
<div className="bg-white p-6 rounded-lg shadow-xl text-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-blue-500 mx-auto mb-4" />
|
||||
<p className="font-hse-sans text-gray-700">
|
||||
Решение отправлено! Страница обновится через несколько секунд...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-40 items-center justify-center rounded-lg bg-white">
|
||||
|
||||
-2
@@ -30,10 +30,8 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
|
||||
|
||||
{isCleared ? (
|
||||
<Button
|
||||
className="font-hse-sans flex-grow bg-green-600 hover:bg-green-700"
|
||||
disabled={true}
|
||||
>
|
||||
<CheckCircle className="mr-2 h-4 w-4" />
|
||||
Задача сдана!
|
||||
</Button>
|
||||
) : hasSubmissionsLeft ? (
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
export const UserStatBlock = ({
|
||||
value,
|
||||
description,
|
||||
}: {
|
||||
value: number;
|
||||
description: string;
|
||||
}) => {
|
||||
return (
|
||||
<div className="bg-card flex flex-col items-center gap-4 rounded-xl px-5 py-8 text-center">
|
||||
<h2 className="text-5xl font-bold">{value}</h2>
|
||||
<p className="text-muted-foreground font-semibold">{description}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,6 +1,6 @@
|
||||
import { UserInfo } from "./widgets/user-info";
|
||||
import { UserAchievements } from "./widgets/user-achievements";
|
||||
import { UserStats } from "./widgets/user-stats";
|
||||
import { UserStatsSections } from "./widgets/user-stats";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getCurrentUser } from "@/shared/api/user";
|
||||
import { Loading } from "@/components/ui/loading";
|
||||
@@ -25,11 +25,11 @@ const ProfilePage = () => {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-stretch gap-14">
|
||||
<div className="flex">
|
||||
<div className="flex flex-col gap-5 md:flex-row md:gap-0">
|
||||
<UserInfo user={user} />
|
||||
<UserAchievements achievements={user.achievements} />
|
||||
</div>
|
||||
<UserStats />
|
||||
<UserStatsSections />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -11,7 +11,7 @@ export const UserAchievements = ({
|
||||
<section className="flex flex-1 flex-col gap-5">
|
||||
<h2 className="text-3xl font-semibold">Достижения</h2>
|
||||
{achievements && (
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
{achievements.map((a) => (
|
||||
<AchievementDialog key={a.name} achievement={a}>
|
||||
<AchievementCard achievement={a} />
|
||||
|
||||
@@ -2,7 +2,7 @@ import { User } from "@/shared/types/user";
|
||||
|
||||
export const UserInfo = ({ user }: { user: User }) => {
|
||||
return (
|
||||
<section className="flex max-w-[420px] flex-1 flex-col gap-6">
|
||||
<section className="flex flex-1 flex-col items-center gap-6 text-center md:max-w-[420px] md:items-start md:text-ellipsis">
|
||||
{user.avatar && (
|
||||
<div className="aspect-square h-auto w-full max-w-[300px] overflow-hidden rounded-full border">
|
||||
<img
|
||||
|
||||
@@ -1,7 +1,39 @@
|
||||
export const UserStats = () => {
|
||||
import { Loading } from "@/components/ui/loading";
|
||||
import { UserStatBlock } from "../components/user-stat-block";
|
||||
import { getCurrentUserStats } from "@/shared/api/user";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
export const UserStatsSections = () => {
|
||||
const { data: stats, isLoading } = useQuery({
|
||||
queryKey: ["user-stats"],
|
||||
queryFn: getCurrentUserStats,
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<section className="flex flex-col gap-6">
|
||||
<h2 className="text-3xl font-semibold">Аналитика</h2>
|
||||
</div>
|
||||
{isLoading ? (
|
||||
<div className="relative h-20 w-full">
|
||||
<Loading />
|
||||
</div>
|
||||
) : stats ? (
|
||||
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
|
||||
<UserStatBlock
|
||||
value={stats.solved_tasks}
|
||||
description="Задач решено"
|
||||
/>
|
||||
<UserStatBlock
|
||||
value={stats.total_attempts}
|
||||
description="Попыток выполнено"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center">
|
||||
<h3 className="w-full text-2xl font-semibold">
|
||||
Что-то пошло не так 😔
|
||||
</h3>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -14,7 +14,7 @@ export const getCompetition = async (id: string) => {
|
||||
};
|
||||
|
||||
export const getCompetitionResults = async (id: string) => {
|
||||
return await userFetch<CompetitionResult>(`/competitions/${id}/results`);
|
||||
return await userFetch<CompetitionResult[]>(`/competitions/${id}/results`);
|
||||
}
|
||||
|
||||
export const startCompetition = async (competitionId: string) => {
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
import { userFetch } from ".";
|
||||
import { User } from "../types/user";
|
||||
import { User, UserStats } from "../types/user";
|
||||
|
||||
export const getCurrentUser = async () => {
|
||||
return await userFetch<User>("/me");
|
||||
};
|
||||
|
||||
export const getCurrentUserStats = async () => {
|
||||
return await userFetch<UserStats>("/me/stat");
|
||||
};
|
||||
|
||||
@@ -28,4 +28,5 @@ export enum CompetitionParticipationType {
|
||||
export interface CompetitionResult {
|
||||
task_name: string;
|
||||
result: number;
|
||||
max_points: number;
|
||||
}
|
||||
@@ -12,3 +12,8 @@ export interface Achievement {
|
||||
received_at: Date;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
export interface UserStats {
|
||||
total_attempts: number;
|
||||
solved_tasks: number;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user