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

This commit is contained in:
Timur
2025-03-03 21:01:22 +03:00
15 changed files with 346 additions and 69 deletions
+3 -1
View File
@@ -15,6 +15,7 @@ def analyze_data_task(self, submission_id):
submission = CompetitionTaskSubmission.objects.get(id=submission_id) submission = CompetitionTaskSubmission.objects.get(id=submission_id)
try: try:
code = submission.content.read() code = submission.content.read()
print("YA SSF")
files = [ files = [
{ {
"url": ( "url": (
@@ -32,7 +33,7 @@ def analyze_data_task(self, submission_id):
f"{settings.CHECKER_API_ENDPOINT}/execute", f"{settings.CHECKER_API_ENDPOINT}/execute",
json={ json={
"files": files, "files": files,
"code": base64.encode(code), "code": base64.b64encode(code).decode("utf-8"),
"answer_file_path": submission.task.answer_file_path, "answer_file_path": submission.task.answer_file_path,
"expected_hash": hashlib.sha256( "expected_hash": hashlib.sha256(
submission.task.correct_answer_file.read() submission.task.correct_answer_file.read()
@@ -42,6 +43,7 @@ def analyze_data_task(self, submission_id):
) )
response.raise_for_status() response.raise_for_status()
result = response.json() result = response.json()
print("HOHOHO")
submission.stdout.save("output.txt", ContentFile(result["output"])) submission.stdout.save("output.txt", ContentFile(result["output"]))
submission.result = { 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 { useParams, Link, useNavigate } from "react-router-dom";
import { Button } from "@/components/ui/button"; 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 ReactMarkdown from "react-markdown";
import { useQuery, useMutation } from "@tanstack/react-query"; 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 { getCompetitionTasks } from "@/shared/api/session";
import { Loading } from "@/components/ui/loading"; import { Loading } from "@/components/ui/loading";
import { CompetitionType } from "@/shared/types/competition"; import { CompetitionType } from "@/shared/types/competition";
import remarkMath from "remark-math"; import remarkMath from "remark-math";
import remarkGfm from "remark-gfm"; import remarkGfm from "remark-gfm";
import rehypeKatex from "rehype-katex"; import rehypeKatex from "rehype-katex";
import { CompetitionResultsModal } from "./components/CompetitionResultModal";
const CompetitionPage = () => { const CompetitionPage = () => {
const { id } = useParams<{ id: string }>(); const { id } = useParams<{ id: string }>();
const navigate = useNavigate(); const navigate = useNavigate();
const competitionId = id || ""; const competitionId = id || "";
const [isResultsModalOpen, setIsResultsModalOpen] = useState(false);
const competitionQuery = useQuery({ const competitionQuery = useQuery({
queryKey: ["competition", competitionId], queryKey: ["competition", competitionId],
@@ -22,6 +25,12 @@ const CompetitionPage = () => {
enabled: !!competitionId, enabled: !!competitionId,
}); });
const resultsQuery = useQuery({
queryKey: ["competitionResults", competitionId],
queryFn: () => getCompetitionResults(competitionId),
enabled: !!competitionId,
});
const startMutation = useMutation({ const startMutation = useMutation({
mutationFn: () => startCompetition(competitionId), mutationFn: () => startCompetition(competitionId),
onSuccess: async () => { onSuccess: async () => {
@@ -60,10 +69,10 @@ const CompetitionPage = () => {
const handleStart = () => { const handleStart = () => {
startMutation.mutate(); startMutation.mutate();
}; };
const handleViewResults = () => { const hasResults = resultsQuery.data &&
console.log("sorryan"); resultsQuery.data.length > 0 &&
}; resultsQuery.data.some(result => result.result !== -2);
if (competitionQuery.isLoading) { if (competitionQuery.isLoading) {
return <Loading />; return <Loading />;
@@ -75,15 +84,6 @@ const CompetitionPage = () => {
const competition = competitionQuery.data; 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 = () => { const isCompetitionNotStarted = () => {
if (!competition?.start_date) return false; if (!competition?.start_date) return false;
@@ -92,9 +92,18 @@ const CompetitionPage = () => {
return now < startDate; 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 competitionNotStarted = isCompetitionNotStarted();
const competitionEnded = isCompetitionEnded();
return ( return (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
@@ -133,17 +142,17 @@ const CompetitionPage = () => {
)} )}
</div> </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 && ( {competitionNotStarted && competition.type === CompetitionType.COMPETITIVE && (
<div className="bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full text-sm font-medium"> <div className="bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full text-sm font-medium">
Скоро начнется Скоро начнется
</div> </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> </div>
<h1 className="text-[34px] leading-11 font-semibold text-balance"> <h1 className="text-[34px] leading-11 font-semibold text-balance">
@@ -178,17 +187,8 @@ const CompetitionPage = () => {
</div> </div>
</div> </div>
<div className="w-full *:w-full md:w-96"> <div className="w-full *:w-full md:w-96 flex flex-col gap-3">
{competitionEnded && competition.type === CompetitionType.COMPETITIVE ? ( {competitionNotStarted && 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 ? (
<Button <Button
size={"lg"} size={"lg"}
disabled={true} disabled={true}
@@ -197,7 +197,7 @@ const CompetitionPage = () => {
<AlertCircle size={18} className="mr-2" /> <AlertCircle size={18} className="mr-2" />
Скоро начнется Скоро начнется
</Button> </Button>
) : ( ) : !competitionEnded ? (
<Button <Button
size={"lg"} size={"lg"}
onClick={handleStart} onClick={handleStart}
@@ -205,10 +205,35 @@ const CompetitionPage = () => {
> >
{startMutation.isPending ? "Загрузка..." : "Приступить к выполнению"} {startMutation.isPending ? "Загрузка..." : "Приступить к выполнению"}
</Button> </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> </div>
</div> </div>
<CompetitionResultsModal
competitionTitle={competition.title}
results={resultsQuery.data}
isLoading={resultsQuery.isLoading}
error={resultsQuery.error}
isOpen={isResultsModalOpen}
onOpenChange={setIsResultsModalOpen}
/>
</div> </div>
); );
}; };
@@ -1,8 +1,9 @@
import React, { useState, useEffect } from 'react'; 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 { Task } from '@/shared/types/task';
import { ArrowLeft, Clock } from 'lucide-react'; import { ArrowLeft } from 'lucide-react';
import { CompetitionType } from '@/shared/types/competition'; import { CompetitionType } from '@/shared/types/competition';
import { CompetitionResult } from '@/shared/types/competition';
interface CompetitionHeaderProps { interface CompetitionHeaderProps {
title: string; title: string;
@@ -11,8 +12,9 @@ interface CompetitionHeaderProps {
setAnswer: (value: string) => void; setAnswer: (value: string) => void;
setSelectedFile: (file: File | null) => void; setSelectedFile: (file: File | null) => void;
competitionType?: CompetitionType; competitionType?: CompetitionType;
startDate?: Date; startDate?: Date | string;
endDate?: Date; endDate?: Date | string;
taskResults?: CompetitionResult[];
} }
const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({ const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
@@ -23,9 +25,11 @@ const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
setSelectedFile, setSelectedFile,
competitionType, competitionType,
startDate, startDate,
endDate endDate,
taskResults = []
}) => { }) => {
const navigate = useNavigate(); const navigate = useNavigate();
const { taskId } = useParams<{ taskId?: string }>();
const [timeLeft, setTimeLeft] = useState<string>(''); const [timeLeft, setTimeLeft] = useState<string>('');
const handleTaskSelect = (taskId: string) => { const handleTaskSelect = (taskId: string) => {
@@ -34,7 +38,7 @@ const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
navigate(`/competition/${competitionId}/tasks/${taskId}`); navigate(`/competition/${competitionId}/tasks/${taskId}`);
} }
const formatDate = (date?: Date) => { const formatDate = (date?: Date | string) => {
if (!date) return ''; if (!date) return '';
const dateObj = typeof date === 'string' ? new Date(date) : date; const dateObj = typeof date === 'string' ? new Date(date) : date;
@@ -74,6 +78,42 @@ const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
return () => clearInterval(timerInterval); return () => clearInterval(timerInterval);
}, [endDate, competitionId, navigate, competitionType]); }, [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); const showTimeSection = competitionType === CompetitionType.COMPETITIVE && (startDate || endDate);
return ( return (
@@ -120,18 +160,19 @@ const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
</div> </div>
<div className="flex items-center justify-center gap-4 pb-4 overflow-x-auto no-scrollbar"> <div className="flex items-center justify-center gap-4 pb-4 overflow-x-auto no-scrollbar">
{tasks.map((task) => ( {tasks.map((task) => {
<button const { backgroundColor, color, className } = getTaskStatus(task);
key={task.id} return (
className={`text-[var(--color-task-text-uncleared)] bg-[var(--color-task-uncleared)] <button
rounded-lg px-3 py-1.5 font-medium text-sm font-hse-sans cursor-pointer key={task.id}
transition-all hover:brightness-95 flex-shrink-0 style={{ backgroundColor, color }}
`} className={className}
onClick={() => handleTaskSelect(task.id)} onClick={() => handleTaskSelect(task.id)}
> >
{task.in_competition_position} {task.in_competition_position}
</button> </button>
))} );
})}
</div> </div>
</div> </div>
</header> </header>
@@ -1,10 +1,10 @@
import { useState, useEffect } from "react"; 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 CompetitionHeader from "./components/CompetitionHeader";
import TaskContent from "./components/TaskContent"; import TaskContent from "./components/TaskContent";
import TaskSolution from "./modules/TaskSolution"; import TaskSolution from "./modules/TaskSolution";
import { getCompetitionTasks, submitTaskSolution } from "@/shared/api/session"; 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 { Loader2 } from "lucide-react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { TaskType } from "@/shared/types/task"; import { TaskType } from "@/shared/types/task";
@@ -16,7 +16,6 @@ const CompetitionSession = () => {
const [isReloading, setIsReloading] = useState(false); const [isReloading, setIsReloading] = useState(false);
const competitionId = id || ""; const competitionId = id || "";
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const navigate = useNavigate();
const competitionQuery = useQuery({ const competitionQuery = useQuery({
queryKey: ["competition", competitionId], queryKey: ["competition", competitionId],
@@ -30,6 +29,12 @@ const CompetitionSession = () => {
enabled: !!competitionId, enabled: !!competitionId,
}); });
const resultsQuery = useQuery({
queryKey: ["competitionResults", competitionId],
queryFn: () => getCompetitionResults(competitionId),
enabled: !!competitionId,
});
const submitMutation = useMutation({ const submitMutation = useMutation({
mutationFn: () => { mutationFn: () => {
if (!currentTask || !competitionId) throw new Error("Missing task or competition ID"); if (!currentTask || !competitionId) throw new Error("Missing task or competition ID");
@@ -47,10 +52,14 @@ const CompetitionSession = () => {
queryKey: ['solutionHistory', competitionId, taskId] queryKey: ['solutionHistory', competitionId, taskId]
}); });
queryClient.invalidateQueries({
queryKey: ['competitionResults', competitionId]
});
setIsReloading(true); setIsReloading(true);
setTimeout(() => { setTimeout(() => {
window.location.reload() window.location.reload();
setIsReloading(false); setIsReloading(false);
}, 2500); }, 2500);
}, },
@@ -61,6 +70,7 @@ const CompetitionSession = () => {
const competition = competitionQuery.data; const competition = competitionQuery.data;
const tasks = tasksQuery.data || []; const tasks = tasksQuery.data || [];
const results = resultsQuery.data || [];
const isLoading = tasksQuery.isLoading || competitionQuery.isLoading; const isLoading = tasksQuery.isLoading || competitionQuery.isLoading;
const error = tasksQuery.error || competitionQuery.error const error = tasksQuery.error || competitionQuery.error
? "Не удалось загрузить данные. Пожалуйста, попробуйте позже." ? "Не удалось загрузить данные. Пожалуйста, попробуйте позже."
@@ -113,6 +123,7 @@ const CompetitionSession = () => {
competitionType={competition?.type} competitionType={competition?.type}
startDate={competition?.start_date} startDate={competition?.start_date}
endDate={competition?.end_date} endDate={competition?.end_date}
taskResults={results}
/> />
<main className="flex-1 bg-[#F8F8F8] pb-8"> <main className="flex-1 bg-[#F8F8F8] pb-8">
@@ -138,6 +149,16 @@ const CompetitionSession = () => {
onSubmit={handleSubmit} onSubmit={handleSubmit}
isSubmitting={isSubmitting} 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>
) : ( ) : (
<div className="flex h-40 items-center justify-center rounded-lg bg-white"> <div className="flex h-40 items-center justify-center rounded-lg bg-white">
@@ -30,10 +30,8 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
{isCleared ? ( {isCleared ? (
<Button <Button
className="font-hse-sans flex-grow bg-green-600 hover:bg-green-700"
disabled={true} disabled={true}
> >
<CheckCircle className="mr-2 h-4 w-4" />
Задача сдана! Задача сдана!
</Button> </Button>
) : hasSubmissionsLeft ? ( ) : 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 { UserInfo } from "./widgets/user-info";
import { UserAchievements } from "./widgets/user-achievements"; 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 { useQuery } from "@tanstack/react-query";
import { getCurrentUser } from "@/shared/api/user"; import { getCurrentUser } from "@/shared/api/user";
import { Loading } from "@/components/ui/loading"; import { Loading } from "@/components/ui/loading";
@@ -25,11 +25,11 @@ const ProfilePage = () => {
return ( return (
<div className="flex flex-col items-stretch gap-14"> <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} /> <UserInfo user={user} />
<UserAchievements achievements={user.achievements} /> <UserAchievements achievements={user.achievements} />
</div> </div>
<UserStats /> <UserStatsSections />
</div> </div>
); );
}; };
@@ -11,7 +11,7 @@ export const UserAchievements = ({
<section className="flex flex-1 flex-col gap-5"> <section className="flex flex-1 flex-col gap-5">
<h2 className="text-3xl font-semibold">Достижения</h2> <h2 className="text-3xl font-semibold">Достижения</h2>
{achievements && ( {achievements && (
<div className="grid grid-cols-2 gap-6"> <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
{achievements.map((a) => ( {achievements.map((a) => (
<AchievementDialog key={a.name} achievement={a}> <AchievementDialog key={a.name} achievement={a}>
<AchievementCard achievement={a} /> <AchievementCard achievement={a} />
@@ -2,7 +2,7 @@ import { User } from "@/shared/types/user";
export const UserInfo = ({ user }: { user: User }) => { export const UserInfo = ({ user }: { user: User }) => {
return ( 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 && ( {user.avatar && (
<div className="aspect-square h-auto w-full max-w-[300px] overflow-hidden rounded-full border"> <div className="aspect-square h-auto w-full max-w-[300px] overflow-hidden rounded-full border">
<img <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 ( return (
<div> <section className="flex flex-col gap-6">
<h2 className="text-3xl font-semibold">Аналитика</h2> <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) => { 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) => { export const startCompetition = async (competitionId: string) => {
+5 -1
View File
@@ -1,6 +1,10 @@
import { userFetch } from "."; import { userFetch } from ".";
import { User } from "../types/user"; import { User, UserStats } from "../types/user";
export const getCurrentUser = async () => { export const getCurrentUser = async () => {
return await userFetch<User>("/me"); 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 { export interface CompetitionResult {
task_name: string; task_name: string;
result: number; result: number;
max_points: number;
} }
@@ -12,3 +12,8 @@ export interface Achievement {
received_at: Date; received_at: Date;
icon?: string; icon?: string;
} }
export interface UserStats {
total_attempts: number;
solved_tasks: number;
}