profile contests

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

@@ -0,0 +1,62 @@
+import { useEffect, useState } from 'react';
+import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
+import { setMenuActiveProfilePage } from '../../../../redux/slices/store';
+import { fetchContests } from '../../../../redux/slices/contests';
+import ContestsBlock from './ContestsBlock';
+
+const Contests = () => {
+    const dispatch = useAppDispatch();
+    const now = new Date();
+
+    const [modalActive, setModalActive] = useState<boolean>(false);
+
+    // Берём данные из Redux
+    const contests = useAppSelector((state) => state.contests.contests);
+    const status = useAppSelector((state) => state.contests.statuses.create);
+    const error = useAppSelector((state) => state.contests.error);
+
+    // При загрузке страницы — выставляем активную вкладку и подгружаем контесты
+    useEffect(() => {
+        dispatch(fetchContests({}));
+    }, []);
+
+    useEffect(() => {
+        dispatch(setMenuActiveProfilePage('contests'));
+    }, []);
+
+    if (status == 'loading') {
+        return (
+            <div className="text-liquid-white p-4">Загрузка контестов...</div>
+        );
+    }
+
+    if (error) {
+        return <div className="text-red-500 p-4">Ошибка: {error}</div>;
+    }
+
+    return (
+        <div className="h-full w-full relative flex flex-col text-[60px] font-bold p-[20px]">
+            <ContestsBlock
+                className="mb-[20px]"
+                type="reg"
+                title="Предстоящие контесты"
+                contests={contests.filter((contest) => {
+                    const endTime = new Date(contest.endsAt).getTime();
+                    return endTime >= now.getTime();
+                })}
+            />
+
+            <ContestsBlock
+                className="mb-[20px]"
+                title="Мои контесты"
+                type="my"
+                contests={contests.filter((contest) => {
+                    const endTime = new Date(contest.endsAt).getTime();
+                    return endTime < now.getTime();
+                })}
+            />
+        </div>
+    );
+};
+
+export default Contests;