my contests

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

@@ -1,60 +1,64 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
 import { setMenuActiveProfilePage } from '../../../../redux/slices/store';
-import { fetchContests } from '../../../../redux/slices/contests';
+import {
+    fetchMyContests,
+    fetchRegisteredContests,
+} 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({}));
-    }, []);
+    // Redux-состояния
+    const myContestsState = useAppSelector(
+        (state) => state.contests.fetchMyContests,
+    );
+    const regContestsState = useAppSelector(
+        (state) => state.contests.fetchRegisteredContests,
+    );
 
+    // При загрузке страницы — выставляем вкладку и подгружаем контесты
     useEffect(() => {
         dispatch(setMenuActiveProfilePage('contests'));
+        dispatch(fetchMyContests());
+        dispatch(fetchRegisteredContests({}));
     }, []);
 
-    if (status == 'loading') {
-        return (
-            <div className="text-liquid-white p-4">Загрузка контестов...</div>
-        );
-    }
-
-    if (error) {
-        return <div className="text-red-500 p-4">Ошибка: {error}</div>;
-    }
+    console.log(myContestsState);
 
     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();
-                })}
-            />
+        <div className="h-full w-full relative flex flex-col text-[60px] font-bold p-[20px] gap-[20px]">
+            {/* Контесты, в которых я участвую */}
+            <div>
+                <ContestsBlock
+                    className="mb-[20px]"
+                    title="Предстоящие контесты"
+                    type="reg"
+                    // contests={regContestsState.contests}
+                    contests={[]}
+                />
+            </div>
 
-            <ContestsBlock
-                className="mb-[20px]"
-                title="Мои контесты"
-                type="my"
-                contests={contests.filter((contest) => {
-                    const endTime = new Date(contest.endsAt).getTime();
-                    return endTime < now.getTime();
-                })}
-            />
+            {/* Контесты, которые я создал */}
+            <div>
+                {myContestsState.status === 'loading' ? (
+                    <div className="text-liquid-white p-4 text-[24px]">
+                        Загрузка ваших контестов...
+                    </div>
+                ) : myContestsState.error ? (
+                    <div className="text-red-500 p-4 text-[24px]">
+                        Ошибка: {myContestsState.error}
+                    </div>
+                ) : (
+                    <ContestsBlock
+                        className="mb-[20px]"
+                        title="Мои контесты"
+                        type="my"
+                        contests={myContestsState.contests}
+                    />
+                )}
+            </div>
         </div>
     );
 };