contest submisssions
This commit is contained in:
Виталий Лавшонок
@@ -1,9 +1,11 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
|
||||
import { setMenuActivePage } from '../../../redux/slices/store';
|
||||
import { Navigate, Route, Routes, useParams } from 'react-router-dom';
|
||||
import { Navigate, Route, Routes, useNavigate, useParams } from 'react-router-dom';
|
||||
import { fetchContestById } from '../../../redux/slices/contests';
|
||||
import ContestMissions from './Missions';
|
||||
import { PrimaryButton } from '../../../components/button/PrimaryButton';
|
||||
import Submissions from './Submissions';
|
||||
|
||||
export interface Article {
|
||||
id: number;
|
||||
@@ -12,14 +14,15 @@ export interface Article {
|
||||
}
|
||||
|
||||
const Contest = () => {
|
||||
const navigate = useNavigate();
|
||||
const { contestId } = useParams<{ contestId: string }>();
|
||||
const contestIdNumber =
|
||||
contestId && /^\d+$/.test(contestId) ? parseInt(contestId, 10) : null;
|
||||
if (contestIdNumber === null) {
|
||||
if (!contestIdNumber) {
|
||||
return <Navigate to="/home/contests" replace />;
|
||||
}
|
||||
const dispatch = useAppDispatch();
|
||||
const contest = useAppSelector((state) => state.contests.selectedContest);
|
||||
const contest = useAppSelector((state) => state.contests.fetchContestById.contest);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(setMenuActivePage('contest'));
|
||||
@@ -31,12 +34,19 @@ const Contest = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PrimaryButton onClick={() => {navigate(`/contest/${contestIdNumber}/submissions`)}} text='Мои посылки' />
|
||||
<Routes>
|
||||
|
||||
<Route
|
||||
path="submissions"
|
||||
element={<Submissions contestId={contestIdNumber} />}
|
||||
/>
|
||||
<Route
|
||||
path="*"
|
||||
element={<ContestMissions contest={contest} />}
|
||||
/>
|
||||
</Routes>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
|
||||
export interface MissionItemProps {
|
||||
contestId: number;
|
||||
id: number;
|
||||
name: string;
|
||||
timeLimit?: number;
|
||||
@@ -24,6 +25,7 @@ export function formatBytesToMB(bytes: number): string {
|
||||
}
|
||||
|
||||
const MissionItem: React.FC<MissionItemProps> = ({
|
||||
contestId,
|
||||
id,
|
||||
name,
|
||||
timeLimit = 1000,
|
||||
@@ -48,7 +50,7 @@ const MissionItem: React.FC<MissionItemProps> = ({
|
||||
'cursor-pointer brightness-100 hover:brightness-125 transition-all duration-300',
|
||||
)}
|
||||
onClick={() => {
|
||||
navigate(`/mission/${id}?back=${path}`);
|
||||
navigate(`/mission/${id}?back=${path}&contestId=${contestId}`);
|
||||
}}
|
||||
>
|
||||
<div className="text-[18px] font-bold">#{id}</div>
|
||||
|
||||
@@ -9,7 +9,7 @@ export interface Article {
|
||||
}
|
||||
|
||||
interface ContestMissionsProps {
|
||||
contest: Contest | null;
|
||||
contest?: Contest;
|
||||
}
|
||||
|
||||
const ContestMissions: FC<ContestMissionsProps> = ({ contest }) => {
|
||||
@@ -25,8 +25,10 @@ const ContestMissions: FC<ContestMissionsProps> = ({ contest }) => {
|
||||
{contest?.name} {contest.id}
|
||||
</div>
|
||||
<div className="w-full">
|
||||
{contest.missions.map((v, i) => (
|
||||
{(contest.missions ?? []).map((v, i) => (
|
||||
<MissionItem
|
||||
contestId={contest.id}
|
||||
key={i}
|
||||
id={v.id}
|
||||
name={v.name}
|
||||
timeLimit={v.timeLimitMilliseconds}
|
||||
|
||||
83
src/views/home/contest/SubmissionItem.tsx
Normal file
83
src/views/home/contest/SubmissionItem.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import { cn } from '../../../lib/cn';
|
||||
// import { IconError, IconSuccess } from "../../../assets/icons/missions";
|
||||
// import { useNavigate } from "react-router-dom";
|
||||
|
||||
export interface SubmissionItemProps {
|
||||
id: number;
|
||||
language: string;
|
||||
time: string;
|
||||
verdict: string;
|
||||
type: 'first' | 'second';
|
||||
status?: 'success' | 'wronganswer' | 'timelimit';
|
||||
}
|
||||
|
||||
export function formatMilliseconds(ms: number): string {
|
||||
const rounded = Math.round(ms) / 1000;
|
||||
const formatted = rounded.toString().replace(/\.?0+$/, '');
|
||||
return `${formatted} c`;
|
||||
}
|
||||
|
||||
export function formatBytesToMB(bytes: number): string {
|
||||
const megabytes = Math.floor(bytes / (1024 * 1024));
|
||||
return `${megabytes} МБ`;
|
||||
}
|
||||
|
||||
function formatDate(dateString: string): string {
|
||||
const date = new Date(dateString);
|
||||
|
||||
const day = date.getDate().toString().padStart(2, '0');
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||||
const year = date.getFullYear();
|
||||
|
||||
const hours = date.getHours().toString().padStart(2, '0');
|
||||
const minutes = date.getMinutes().toString().padStart(2, '0');
|
||||
|
||||
return `${day}/${month}/${year}\n${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
const SubmissionItem: React.FC<SubmissionItemProps> = ({
|
||||
id,
|
||||
language,
|
||||
time,
|
||||
verdict,
|
||||
type,
|
||||
status,
|
||||
}) => {
|
||||
// const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
' w-full relative rounded-[10px] text-liquid-white',
|
||||
type == 'first' ? 'bg-liquid-lighter' : 'bg-liquid-background',
|
||||
'grid grid-cols-[80px,1fr,1fr,2fr] grid-flow-col gap-[20px] px-[20px] box-border items-center',
|
||||
status == 'wronganswer' &&
|
||||
'border-l-[11px] border-l-liquid-red pl-[9px]',
|
||||
status == 'timelimit' &&
|
||||
'border-l-[11px] border-l-liquid-orange pl-[9px]',
|
||||
status == 'success' &&
|
||||
'border-l-[11px] border-l-liquid-green pl-[9px]',
|
||||
'cursor-pointer brightness-100 hover:brightness-125 transition-all duration-300',
|
||||
)}
|
||||
onClick={() => {}}
|
||||
>
|
||||
<div className="text-[18px] font-bold">#{id}</div>
|
||||
<div className="text-[18px] font-bold text-center">
|
||||
{formatDate(time)}
|
||||
</div>
|
||||
<div className="text-[18px] font-bold text-center">{language}</div>
|
||||
<div
|
||||
className={cn(
|
||||
'text-[18px] font-bold text-center',
|
||||
status == 'wronganswer' && 'text-liquid-red',
|
||||
status == 'timelimit' && 'text-liquid-orange',
|
||||
status == 'success' && 'text-liquid-green',
|
||||
)}
|
||||
>
|
||||
{verdict}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubmissionItem;
|
||||
@@ -0,0 +1,73 @@
|
||||
import SubmissionItem from './SubmissionItem';
|
||||
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
|
||||
import { FC, useEffect } from 'react';
|
||||
import { fetchMySubmissions, setContestStatus } from '../../../redux/slices/contests';
|
||||
|
||||
export interface Mission {
|
||||
id: number;
|
||||
authorId: number;
|
||||
name: string;
|
||||
difficulty: 'Easy' | 'Medium' | 'Hard';
|
||||
tags: string[];
|
||||
timeLimit: number;
|
||||
memoryLimit: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
interface SubmissionsProps {
|
||||
contestId: number;
|
||||
}
|
||||
|
||||
const Submissions: FC<SubmissionsProps> = ({ contestId }) => {
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const {submissions, status} = useAppSelector(
|
||||
(state) => state.contests.fetchMySubmissions
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(fetchMySubmissions(contestId));
|
||||
}, [contestId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (status == "successful"){
|
||||
dispatch(setContestStatus({key:"fetchMySubmissions", status: "idle"}));
|
||||
}
|
||||
}, [status])
|
||||
|
||||
const checkStatus = (status: string) => {
|
||||
if (status == 'IncorrectAnswer') return 'wronganswer';
|
||||
if (status == 'TimeLimitError') return 'timelimit';
|
||||
return undefined;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full w-full box-border overflow-y-scroll overflow-x-hidden thin-scrollbar pr-[10px]">
|
||||
{submissions &&
|
||||
submissions.map((v, i) => (
|
||||
<SubmissionItem
|
||||
key={i}
|
||||
id={v.id??0}
|
||||
language={v.solution.language}
|
||||
time={v.solution.time}
|
||||
verdict={
|
||||
v.solution.testerMessage?.includes(
|
||||
'Compilation failed',
|
||||
)
|
||||
? 'Compilation failed'
|
||||
: v.solution.testerMessage
|
||||
}
|
||||
type={i % 2 ? 'second' : 'first'}
|
||||
status={
|
||||
v.solution.testerMessage == 'All tests passed'
|
||||
? 'success'
|
||||
: checkStatus(v.solution.testerErrorCode)
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Submissions;
|
||||
|
||||
Reference in New Issue
Block a user