competition timer test

services/frontend/src/pages/CompetitionSession/components/CompetitionHeader/index.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { Task } from '@/shared/types/task';
-import { ArrowLeft } from 'lucide-react'; 
+import { ArrowLeft, Clock } from 'lucide-react'; 
-import { useNavigate } from 'react-router-dom';
+import { CompetitionType } from '@/shared/types/task';
 
 interface CompetitionHeaderProps {
   title: string;
@@ -10,6 +10,9 @@ interface CompetitionHeaderProps {
   competitionId: string;
   setAnswer: (value: string) => void;
   setSelectedFile: (file: File | null) => void;
+  competitionType?: CompetitionType;
+  startDate?: Date;
+  endDate?: Date;
 }
 
 const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({ 
@@ -17,16 +20,66 @@ const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
   tasks, 
   competitionId,
   setAnswer,
-  setSelectedFile
+  setSelectedFile,
+  competitionType,
+  startDate,
+  endDate
 }) => {
   const navigate = useNavigate();
-
+  const [timeLeft, setTimeLeft] = useState<string>('');
+  
   const handleTaskSelect = (taskId: string) => {
     setAnswer("");
     setSelectedFile(null);
     navigate(`/competition/${competitionId}/tasks/${taskId}`);
   }
-
+  
+  const formatDate = (date?: Date) => {
+    if (!date) return '';
+    
+    const dateObj = typeof date === 'string' ? new Date(date) : date;
+    return dateObj.toLocaleString('ru-RU', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+  
+  useEffect(() => {
+    if (!endDate || competitionType !== CompetitionType.COMPETITIVE) return;
+    
+    const endDateObj = typeof endDate === 'string' ? new Date(endDate) : endDate;
+    
+    const updateTimer = () => {
+      const now = new Date();
+      const diff = endDateObj.getTime() - now.getTime();
+      
+      // If time is up, redirect to competition page
+      if (diff <= 0) {
+        navigate(`/competition/${competitionId}`);
+        return;
+      }
+      
+      // Calculate hours, minutes, seconds
+      const hours = Math.floor(diff / (1000 * 60 * 60));
+      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+      
+      // Format time left
+      setTimeLeft(`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`);
+    };
+    
+    // Update timer every second
+    updateTimer();
+    const timerInterval = setInterval(updateTimer, 1000);
+    
+    return () => clearInterval(timerInterval);
+  }, [endDate, competitionId, navigate, competitionType]);
+  
+  const showTimeSection = competitionType === CompetitionType.COMPETITIVE && (startDate || endDate);
+  
   return (
     <header className="bg-white shadow-sm sticky top-0 z-30 w-full">
       <div className="mx-auto max-w-6xl px-4">
@@ -42,7 +95,30 @@ const CompetitionHeader: React.FC<CompetitionHeaderProps> = ({
             {title}
           </h1>
           
-          <div className="w-[70px]"></div>
+          {showTimeSection ? (
+            <div className="flex items-center text-gray-600 font-hse-sans text-sm">
+              <Clock className="h-4 w-4 mr-1" />
+              <div className="flex flex-col items-end">
+                {startDate && (
+                  <span className="text-xs text-gray-500">
+                    Начало: {formatDate(startDate)}
+                  </span>
+                )}
+                {endDate && (
+                  <span className="text-xs text-gray-500">
+                    Конец: {formatDate(endDate)}
+                  </span>
+                )}
+                {timeLeft && (
+                  <span className="font-medium text-red-600">
+                    Осталось: {timeLeft}
+                  </span>
+                )}
+              </div>
+            </div>
+          ) : (
+            <div className="w-[70px]"></div>
+          )}
         </div>
         
         <div className="flex items-center justify-center gap-4 pb-4 overflow-x-auto no-scrollbar">

services/frontend/src/pages/CompetitionSession/index.tsx

@@ -8,6 +8,7 @@ import { getCompetition } from "@/shared/api/competitions";
 import { Loader2 } from "lucide-react";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { TaskType } from "@/shared/types/task";
+import { CompetitionType } from "@/shared/types/task";
 
 const CompetitionSession = () => {
   const { id, taskId } = useParams<{ id: string; taskId?: string }>();
@@ -97,6 +98,9 @@ const CompetitionSession = () => {
         competitionId={competitionId}
         setAnswer={setAnswer}
         setSelectedFile={setSelectedFile}
+        competitionType={competition?.type}
+        startDate={competition?.start_date}
+        endDate={competition?.end_date}
       />
 
       <main className="flex-1 bg-[#F8F8F8] pb-8">
@@ -120,6 +124,7 @@ const CompetitionSession = () => {
                 selectedFile={selectedFile}
                 setSelectedFile={setSelectedFile}
                 onSubmit={handleSubmit}
+                isSubmitting={submitMutation.isPending}
               />
             </div>
           ) : (