missions and filter

src/views/home/account/Account.tsx

@@ -1,7 +1,7 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
 import AccountMenu from './AccoutMenu';
 import RightPanel from './RightPanel';
-import MissionsBlock from './missions/MissionsBlock';
+import Missions from './missions/Missions';
 import Contests from './contests/Contests';
 import ArticlesBlock from './articles/ArticlesBlock';
 import { useAppDispatch } from '../../../redux/hooks';
@@ -24,10 +24,7 @@ const Account = () => {
                     </div>
                     <div className="h-full min-h-0 overflow-y-scroll medium-scrollbar flex flex-col gap-[20px] ">
                         <Routes>
-                            <Route
-                                path="missions"
-                                element={<MissionsBlock />}
-                            />
+                            <Route path="missions" element={<Missions />} />
                             <Route
                                 path="articles"
                                 element={<ArticlesBlock />}

src/views/home/account/contests/Contests.tsx

@@ -14,9 +14,6 @@ const Contests = () => {
     const myContestsState = useAppSelector(
         (state) => state.contests.fetchMyContests,
     );
-    const regContestsState = useAppSelector(
-        (state) => state.contests.fetchRegisteredContests,
-    );
 
     // При загрузке страницы — выставляем вкладку и подгружаем контесты
     useEffect(() => {

src/views/home/account/contests/MyContestItem.tsx

@@ -1,7 +1,5 @@
 import { cn } from '../../../../lib/cn';
 import { Account } from '../../../../assets/icons/auth';
-import { PrimaryButton } from '../../../../components/button/PrimaryButton';
-import { ReverseButton } from '../../../../components/button/ReverseButton';
 import { useNavigate } from 'react-router-dom';
 import { Edit } from '../../../../assets/icons/input';
 
@@ -57,10 +55,6 @@ const ContestItem: React.FC<ContestItemProps> = ({
 }) => {
     const navigate = useNavigate();
 
-    const now = new Date();
-
-    const waitTime = new Date(startAt).getTime() - now.getTime();
-
     return (
         <div
             className={cn(

src/views/home/account/contests/RegisterContestItem.tsx

@@ -98,22 +98,12 @@ const ContestItem: React.FC<ContestItemProps> = ({
                 {statusRegister == 'reg' ? (
                     <>
                         {' '}
-                        <PrimaryButton
-                            onClick={(e) => {
-                                e.stopPropagation();
-                            }}
-                            text="Регистрация"
-                        />
+                        <PrimaryButton onClick={() => {}} text="Регистрация" />
                     </>
                 ) : (
                     <>
                         {' '}
-                        <ReverseButton
-                            onClick={(e) => {
-                                e.stopPropagation();
-                            }}
-                            text="Вы записаны"
-                        />
+                        <ReverseButton onClick={() => {}} text="Вы записаны" />
                     </>
                 )}
             </div>

src/views/home/account/missions/Missions.tsx

@@ -0,0 +1,109 @@
+import { FC, useEffect } from 'react';
+import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
+import { setMenuActiveProfilePage } from '../../../../redux/slices/store';
+import { cn } from '../../../../lib/cn';
+import MissionsBlock from './MissionsBlock';
+import {
+    fetchMyMissions,
+    setMissionsStatus,
+} from '../../../../redux/slices/missions';
+
+interface ItemProps {
+    count: number;
+    totalCount: number;
+    title: string;
+    color?: 'default' | 'red' | 'green' | 'orange';
+}
+
+const Item: FC<ItemProps> = ({
+    count,
+    totalCount,
+    title,
+    color = 'default',
+}) => {
+    return (
+        <div
+            className={cn(
+                'flex flex-row rounded-full bg-liquid-lighter px-[16px] py-[8px] gap-[10px] text-[14px]',
+                color == 'default' && 'text-liquid-light',
+                color == 'red' && 'text-liquid-red',
+                color == 'green' && 'text-liquid-green',
+                color == 'orange' && 'text-liquid-orange',
+            )}
+        >
+            <div>
+                {count}/{totalCount}
+            </div>
+            <div>{title}</div>
+        </div>
+    );
+};
+
+const Missions = () => {
+    const dispatch = useAppDispatch();
+    const missions = useAppSelector((state) => state.missions.missions);
+    const status = useAppSelector((state) => state.missions.statuses.fetchMy);
+
+    useEffect(() => {
+        dispatch(setMenuActiveProfilePage('missions'));
+        dispatch(fetchMyMissions());
+    }, []);
+
+    useEffect(() => {
+        dispatch(setMissionsStatus({ key: 'fetchMy', status: 'idle' }));
+    }, [status]);
+
+    return (
+        <div className="h-full w-full relative overflow-y-scroll medium-scrollbar">
+            <div className="w-full flex flex-col">
+                <div className="p-[20px] flex flex-col gap-[20px]">
+                    <div className="text-[24px] font-bold text-liquid-white">
+                        Решенные задачи
+                    </div>
+                    <div className="flex flex-row justify-between items-start">
+                        <div className="flex gap-[10px]">
+                            <Item count={14} totalCount={123} title="Задачи" />
+                        </div>
+                        <div className="flex gap-[20px]">
+                            <Item
+                                count={14}
+                                totalCount={123}
+                                title="Easy"
+                                color="green"
+                            />
+                            <Item
+                                count={14}
+                                totalCount={123}
+                                title="Medium"
+                                color="orange"
+                            />
+                            <Item
+                                count={14}
+                                totalCount={123}
+                                title="Hard"
+                                color="red"
+                            />
+                        </div>
+                    </div>
+                    <div className="text-[24px] font-bold text-liquid-white">
+                        Компетенции
+                    </div>
+
+                    <div className="flex flex-wrap gap-[10px]">
+                        <Item count={14} totalCount={123} title="Массивы" />
+                        <Item count={14} totalCount={123} title="Списки" />
+                        <Item count={14} totalCount={123} title="Стэк" />
+                    </div>
+                </div>
+                <div className="p-[20px]">
+                    <MissionsBlock
+                        missions={missions ?? []}
+                        title="Мои миссии"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Missions;

src/views/home/account/missions/MissionsBlock.tsx

@@ -1,66 +1,71 @@
-import { FC, useEffect } from "react";
-import { useAppDispatch } from "../../../../redux/hooks";
-import { setMenuActiveProfilePage } from "../../../../redux/slices/store";
-import { cn } from "../../../../lib/cn";
+import { useState, FC } from 'react';
+import { cn } from '../../../../lib/cn';
+import { ChevroneDown } from '../../../../assets/icons/groups';
+import MyMissionItem from './MyMissionItem';
+import { Mission } from '../../../../redux/slices/missions';
 
-
-interface ItemProps {
-    count: number;
-    totalCount: number;
+interface MissionsBlockProps {
+    missions: Mission[];
     title: string;
-    color?: "default" | "red" | "green" | "orange";
+    className?: string;
 }
 
-const Item: FC<ItemProps> = ({count, totalCount, title, color = "default"}) => {
+const MissionsBlock: FC<MissionsBlockProps> = ({
+    missions,
+    title,
+    className,
+}) => {
+    const [active, setActive] = useState<boolean>(true);
 
-    return <div className={cn("flex flex-row rounded-full bg-liquid-lighter px-[16px] py-[8px] gap-[10px] text-[14px]",
-        color == "default" && "text-liquid-light",
-        color == "red" && "text-liquid-red",
-        color == "green" && "text-liquid-green",
-        color == "orange" && "text-liquid-orange",
-    )}>
-        <div>{count}/{totalCount}</div>
-        <div>{title}</div>
-    </div>
-};
-
-const MissionsBlock = () => {
-  const dispatch = useAppDispatch();
-
-  useEffect(() => {
-    dispatch(setMenuActiveProfilePage("missions"));
-  }, []);
-
-  return (
-    <div className="h-full w-full relative overflow-y-scroll medium-scrollbar">
-      <div className="w-full flex flex-col">
-        <div className="p-[20px] flex flex-col gap-[20px]">
-          <div className="text-[24px] font-bold text-liquid-white">Решенные задачи</div>
-          <div className="flex flex-row justify-between items-start">
-
-          <div className="flex gap-[10px]"> 
-            <Item count={14} totalCount={123} title="Задачи"/>
-          </div>
-          <div className="flex gap-[20px]"> 
-            <Item count={14} totalCount={123} title="Easy" color="green"/>
-            <Item count={14} totalCount={123} title="Medium" color="orange"/>
-            <Item count={14} totalCount={123} title="Hard" color="red"/>
-          </div>
-
-          </div>
-          <div className="text-[24px] font-bold text-liquid-white">Компетенции</div>
-          
-          <div className="flex flex-wrap gap-[10px]"> 
-            <Item count={14} totalCount={123} title="Массивы"/>
-            <Item count={14} totalCount={123} title="Списки"/>
-            <Item count={14} totalCount={123} title="Стэк"/>
-          </div>
+    return (
+        <div
+            className={cn(
+                ' border-b-[1px] border-b-liquid-lighter rounded-[10px]',
+                className,
+            )}
+        >
+            <div
+                className={cn(
+                    ' h-[40px] text-[24px] font-bold flex gap-[10px] items-center cursor-pointer border-b-[1px] border-b-transparent transition-all duration-300',
+                    active && 'border-b-liquid-lighter',
+                )}
+                onClick={() => {
+                    setActive(!active);
+                }}
+            >
+                <span>{title}</span>
+                <img
+                    src={ChevroneDown}
+                    className={cn(
+                        'transition-all duration-300',
+                        active && 'rotate-180',
+                    )}
+                />
+            </div>
+            <div
+                className={cn(
+                    ' grid grid-flow-row grid-rows-[0fr] opacity-0 transition-all duration-300',
+                    active && 'grid-rows-[1fr] opacity-100',
+                )}
+            >
+                <div className="overflow-hidden">
+                    <div className="pb-[10px] pt-[20px]">
+                        {missions.map((v, i) => (
+                            <MyMissionItem
+                                key={i}
+                                id={v.id}
+                                name={v.name}
+                                timeLimit={v.timeLimit}
+                                memoryLimit={v.memoryLimit}
+                                difficulty={v.difficulty}
+                                type={i % 2 ? 'second' : 'first'}
+                            />
+                        ))}
+                    </div>
+                </div>
+            </div>
         </div>
-        <div>Недавиние задачи</div>
-        <div>Мои задачи</div>
-      </div>
-    </div>
-  );
+    );
 };
 
 export default MissionsBlock;

src/views/home/account/missions/MyMissionItem.tsx

@@ -0,0 +1,90 @@
+import { cn } from '../../../../lib/cn';
+import { IconError, IconSuccess } from '../../../../assets/icons/missions';
+import { useNavigate } from 'react-router-dom';
+import { Edit } from '../../../../assets/icons/input';
+
+export interface MissionItemProps {
+    id: number;
+    authorId?: number;
+    name: string;
+    difficulty: number;
+    tags?: string[];
+    timeLimit?: number;
+    memoryLimit?: number;
+    createdAt?: string;
+    updatedAt?: string;
+    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,
+    difficulty,
+    timeLimit = 1000,
+    memoryLimit = 256 * 1024 * 1024,
+    type,
+    status,
+}) => {
+    const navigate = useNavigate();
+    const difficultyItems = ['Easy', 'Medium', 'Hard'];
+    const difficultyString =
+        difficultyItems[Math.min(Math.max(0, difficulty - 1), 2)];
+
+    return (
+        <div
+            className={cn(
+                'min-h-[44px] w-full relative rounded-[10px] text-liquid-white py-[8px]',
+                type == 'first' ? 'bg-liquid-lighter' : 'bg-liquid-background',
+                'grid grid-cols-[80px,2fr,3fr,60px,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}?back=/home/account/missions`);
+            }}
+        >
+            <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={cn(
+                    'text-center text-[18px]',
+                    difficultyString == 'Hard' && 'text-liquid-red',
+                    difficultyString == 'Medium' && 'text-liquid-orange',
+                    difficultyString == 'Easy' && 'text-liquid-green',
+                )}
+            >
+                {difficultyString}
+            </div>
+            <div className="h-[24px] w-[24px]">
+                <img
+                    src={Edit}
+                    className="hover:bg-liquid-light rounded-[8px] transition-all duration-300"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                    }}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default MissionItem;

src/views/home/contest/Contest.tsx

@@ -1,10 +1,9 @@
 import { useEffect } from 'react';
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 import { setMenuActivePage } from '../../../redux/slices/store';
-import { Navigate, Route, Routes, useNavigate, useParams } from 'react-router-dom';
+import { Navigate, Route, Routes, 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 {
@@ -14,7 +13,6 @@ export interface Article {
 }
 
 const Contest = () => {
-    const navigate = useNavigate();
     const { contestId } = useParams<{ contestId: string }>();
     const contestIdNumber =
         contestId && /^\d+$/.test(contestId) ? parseInt(contestId, 10) : null;
@@ -22,8 +20,9 @@ const Contest = () => {
         return <Navigate to="/home/contests" replace />;
     }
     const dispatch = useAppDispatch();
-    const contest = useAppSelector((state) => state.contests.fetchContestById.contest);
-
+    const contest = useAppSelector(
+        (state) => state.contests.fetchContestById.contest,
+    );
 
     useEffect(() => {
         dispatch(setMenuActivePage('contest'));
@@ -34,19 +33,17 @@ const Contest = () => {
     }, [contestIdNumber]);
 
     return (
-        <div className='w-full h-full'>
+        <div className="w-full h-full">
             <Routes>
-                
                 <Route
                     path="submissions"
-                    element={<Submissions contest={contest}/>}
+                    element={<Submissions contest={contest} />}
                 />
                 <Route
                     path="*"
-                    element={<ContestMissions contest={contest}/>}
+                    element={<ContestMissions contest={contest} />}
                 />
             </Routes>
-
         </div>
     );
 };

src/views/home/contests/ContestItem.tsx

@@ -73,6 +73,7 @@ const ContestItem: React.FC<ContestItemProps> = ({
                     : ' bg-liquid-background',
             )}
             onClick={() => {
+                console.log(456);
                 navigate(`/contest/${id}`);
             }}
         >
@@ -99,8 +100,8 @@ const ContestItem: React.FC<ContestItemProps> = ({
                     <>
                         {' '}
                         <PrimaryButton
-                            onClick={(e) => {
-                                e.stopPropagation();
+                            onClick={() => {
+                                console.log(123);
                             }}
                             text="Регистрация"
                         />
@@ -108,12 +109,7 @@ const ContestItem: React.FC<ContestItemProps> = ({
                 ) : (
                     <>
                         {' '}
-                        <ReverseButton
-                            onClick={(e) => {
-                                e.stopPropagation();
-                            }}
-                            text="Вы записаны"
-                        />
+                        <ReverseButton onClick={() => {}} text="Вы записаны" />
                     </>
                 )}
             </div>

src/views/home/missions/Filter.tsx

@@ -0,0 +1,48 @@
+import { Filter, FilterItem } from '../../../components/drop-down-list/Filter';
+import { Sorter } from '../../../components/drop-down-list/Sorter';
+
+const Filters = () => {
+    const items: FilterItem[] = [
+        { text: 'React', value: 'react' },
+        { text: 'Vue', value: 'vue' },
+        { text: 'Angular', value: 'angular' },
+        { text: 'Svelte', value: 'svelte' },
+        { text: 'Next.js', value: 'next' },
+        { text: 'Nuxt', value: 'nuxt' },
+        { text: 'Solid', value: 'solid' },
+        { text: 'Qwik', value: 'qwik' },
+    ];
+
+    return (
+        <div className=" h-[50px] mb-[20px] flex">
+            <div></div>
+
+            <Sorter
+                items={[
+                    {
+                        value: '1',
+                        text: 'Сложность',
+                    },
+                    {
+                        value: '2',
+                        text: 'Дата создания',
+                    },
+                    {
+                        value: '3',
+                        text: 'ID',
+                    },
+                ]}
+                onChange={(v) => console.log(v)}
+            />
+
+            {/* <Filter
+                items={items}
+                defaultState={[items[0], items[3]]} // начальные выбранные элементы
+                onChange={(values) => console.log(values)} // обработчик изменения
+                className="w-[240px]"
+            /> */}
+        </div>
+    );
+};
+
+export default Filters;

src/views/home/missions/Missions.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { setMenuActivePage } from '../../../redux/slices/store';
 import { fetchMissions } from '../../../redux/slices/missions';
 import ModalCreate from './ModalCreate';
+import Filters from './Filter';
 
 export interface Mission {
     id: number;
@@ -45,7 +46,7 @@ const Missions = () => {
                     />
                 </div>
 
-                <div className="bg-liquid-lighter h-[50px] mb-[20px]"></div>
+                <Filters />
 
                 <div>
                     {missions.map((v, i) => (