contests

src/views/home/contest/Contest.tsx

@@ -0,0 +1,45 @@
+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 { fetchContestById } from '../../../redux/slices/contests';
+import ContestMissions from './Missions';
+
+export interface Article {
+    id: number;
+    name: string;
+    tags: string[];
+}
+
+const Contest = () => {
+    const { contestId } = useParams<{ contestId: string }>();
+    const contestIdNumber =
+        contestId && /^\d+$/.test(contestId) ? parseInt(contestId, 10) : null;
+    if (contestIdNumber === null) {
+        return <Navigate to="/home/contests" replace />;
+    }
+
+    const dispatch = useAppDispatch();
+    const contest = useAppSelector((state) => state.contests.selectedContest);
+
+    useEffect(() => {
+        dispatch(setMenuActivePage('contest'));
+    }, []);
+
+    useEffect(() => {
+        dispatch(fetchContestById(contestIdNumber));
+    }, [contestIdNumber]);
+
+    return (
+        <div>
+            <Routes>
+                <Route
+                    path="*"
+                    element={<ContestMissions contest={contest} />}
+                />
+            </Routes>
+        </div>
+    );
+};
+
+export default Contest;

src/views/home/contest/MissionItem.tsx

@@ -0,0 +1,65 @@
+import { cn } from '../../../lib/cn';
+import { IconError, IconSuccess } from '../../../assets/icons/missions';
+import { useNavigate } from 'react-router-dom';
+
+export interface MissionItemProps {
+    id: number;
+    name: string;
+    timeLimit?: number;
+    memoryLimit?: number;
+    type?: 'first' | 'second';
+    status?: 'empty' | 'success' | 'error';
+}
+
+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} МБ`;
+}
+
+const MissionItem: React.FC<MissionItemProps> = ({
+    id,
+    name,
+    timeLimit = 1000,
+    memoryLimit = 256 * 1024 * 1024,
+    type,
+    status,
+}) => {
+    const navigate = useNavigate();
+
+    return (
+        <div
+            className={cn(
+                'min-h-[44px] w-full relative rounded-[10px] text-liquid-white',
+                type == 'first' ? 'bg-liquid-lighter' : 'bg-liquid-background',
+                'grid grid-cols-[80px,2fr,300px,24px] grid-flow-col gap-[20px] px-[20px] box-border items-center',
+                status == 'error' &&
+                    'border-l-[11px] border-l-liquid-red 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={() => {
+                navigate(`/mission/${id}`);
+            }}
+        >
+            <div className="text-[18px] font-bold">#{id}</div>
+            <div className="text-[18px] font-bold">{name}</div>
+            <div className="text-[12px] text-right">
+                стандартный ввод/вывод {formatMilliseconds(timeLimit)},{' '}
+                {formatBytesToMB(memoryLimit)}
+            </div>
+            <div className="h-[24px] w-[24px]">
+                {status == 'error' && <img src={IconError} />}
+                {status == 'success' && <img src={IconSuccess} />}
+            </div>
+        </div>
+    );
+};
+
+export default MissionItem;

src/views/home/contest/Missions.tsx

@@ -0,0 +1,42 @@
+import { FC } from 'react';
+import { useAppDispatch } from '../../../redux/hooks';
+import MissionItem, { MissionItemProps } from './MissionItem';
+import { Contest } from '../../../redux/slices/contests';
+
+export interface Article {
+    id: number;
+    name: string;
+    tags: string[];
+}
+
+interface ContestMissionsProps {
+    contest: Contest | null;
+}
+
+const ContestMissions: FC<ContestMissionsProps> = ({ contest }) => {
+    if (!contest) {
+        return <></>;
+    }
+
+    return (
+        <div className=" h-screen grid grid-rows-[74px,1fr] p-[20px] gap-[20px]">
+            <div className=""></div>
+            <div className="h-full min-h-0 overflow-y-scroll medium-scrollbar flex flex-col gap-[20px]">
+                <div className="h-[40px] w-ufll ">
+                    {contest?.name} {contest.id}
+                </div>
+                <div className="w-full">
+                    {contest.missions.map((v, i) => (
+                        <MissionItem
+                            id={v.missionId}
+                            name={v.name}
+                            type={i % 2 ? 'second' : 'first'}
+                        />
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ContestMissions;