Add ettempts in contests

src/views/mission/statement/Header.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
     chevroneLeft,
     chevroneRight,
@@ -6,6 +6,9 @@ import {
 } from '../../../assets/icons/header';
 import { Logo } from '../../../assets/logos';
 import { useNavigate } from 'react-router-dom';
+import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
+import { useQuery } from '../../../hooks/useQuery';
+import { fetchMyAttemptsInContest } from '../../../redux/slices/contests';
 
 interface HeaderProps {
     missionId: number;
@@ -14,6 +17,57 @@ interface HeaderProps {
 
 const Header: React.FC<HeaderProps> = ({ missionId, back }) => {
     const navigate = useNavigate();
+    const dispatch = useAppDispatch();
+
+    const query = useQuery();
+    const contestId = Number(query.get('contestId') ?? undefined);
+
+    const attempt = useAppSelector(
+        (state) => state.contests.fetchMyAttemptsInContest.attempts[0],
+    );
+
+    const [time, setTime] = useState(0);
+
+    useEffect(() => {
+        if (!contestId) return;
+        const calc = (time: string) => {
+            return time != '' && new Date() <= new Date(time);
+        };
+        if (attempt) {
+            if (!calc(attempt.expiresAt)) {
+                navigate('/home/contests');
+            }
+            const diffMs =
+                new Date(attempt.expiresAt).getTime() - new Date().getTime();
+
+            const seconds = Math.floor(diffMs / 1000);
+
+            setTime(seconds);
+
+            const interval = setInterval(() => {
+                setTime((t) => {
+                    if (t <= 1) {
+                        clearInterval(interval);
+                        navigate('/home/contests');
+                        return 0;
+                    }
+                    return t - 1;
+                });
+            }, 1000);
+
+            return () => clearInterval(interval);
+        }
+    }, [attempt]);
+
+    useEffect(() => {
+        if (contestId) {
+            dispatch(fetchMyAttemptsInContest(contestId));
+        }
+    }, [contestId]);
+
+    const minutes = String(Math.floor(time / 60)).padStart(2, '0');
+    const seconds = String(time % 60).padStart(2, '0');
+
     return (
         <header className="w-full h-[60px] flex items-center px-4 gap-[20px]">
             <img
@@ -59,6 +113,9 @@ const Header: React.FC<HeaderProps> = ({ missionId, back }) => {
                     }}
                 />
             </div>
+            {!!contestId && !!attempt && (
+                <div className="">{`${minutes}:${seconds}`}</div>
+            )}
         </header>
     );
 };