solution status update

services/frontend/src/pages/CompetitionSession/modules/TaskSolution/components/SolutionHistorySheet/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
 import { Button } from "@/components/ui/button";
-import { X } from "lucide-react";
+import { X, Check } from "lucide-react";
 import SolutionStatus from '../SolutionStatus';
-import { Solution, TaskType } from '@/shared/types/task';
+import { Solution } from '@/shared/types/task';
 
 interface SolutionHistorySheetProps {
   isOpen: boolean;
@@ -11,6 +11,7 @@ interface SolutionHistorySheetProps {
   solutions: Solution[];
   maxPoints: number;
   onSolutionSelect: (solution: Solution) => void;
+  currentSolutionId?: string;
 }
 
 const SolutionHistorySheet: React.FC<SolutionHistorySheetProps> = ({
@@ -18,7 +19,8 @@ const SolutionHistorySheet: React.FC<SolutionHistorySheetProps> = ({
   onOpenChange,
   solutions,
   maxPoints,
-  onSolutionSelect
+  onSolutionSelect,
+  currentSolutionId
 }) => {
   return (
     <Sheet open={isOpen} onOpenChange={onOpenChange}>
@@ -39,12 +41,18 @@ const SolutionHistorySheet: React.FC<SolutionHistorySheetProps> = ({
             solutions.map((solution, index) => (
               <div 
                 key={solution.id || index} 
-                className="w-full cursor-pointer transition-transform hover:scale-[1.01]" 
+                className={`w-full cursor-pointer transition-transform hover:scale-[1.01] relative 
+                  ${solution.id === currentSolutionId ? 'ring-2 ring-blue-500 rounded-lg' : ''}`}
                 onClick={() => {
                   onSolutionSelect(solution);
                   onOpenChange(false);
                 }}
               >
+                {solution.id === currentSolutionId && (
+                  <div className="absolute top-2 right-2 z-10 bg-blue-500 text-white rounded-full p-1">
+                    <Check size={14} />
+                  </div>
+                )}
                 <SolutionStatus solution={solution} maxPoints={maxPoints} />
               </div>
             ))

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { Task, TaskType, Solution } from '@/shared/types/task';
 import { useQuery } from '@tanstack/react-query';
@@ -30,7 +30,9 @@ const TaskSolution: React.FC<TaskSolutionProps> = ({
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [isHistoryOpen, setIsHistoryOpen] = useState(false);
   const [selectedSolutionUrl, setSelectedSolutionUrl] = useState<string | null>(null);
+  const [displayedSolution, setDisplayedSolution] = useState<Solution | null>(null);
   const { id: competitionId } = useParams<{ id: string }>();
+  const prevTaskIdRef = useRef<string | null>(null);
 
   const solutionsQuery = useQuery({
     queryKey: ['solutionHistory', competitionId, task.id],
@@ -40,44 +42,85 @@ const TaskSolution: React.FC<TaskSolutionProps> = ({
 
   const solutionHistory = solutionsQuery.data || [];
 
+  // Set initial solution to the last one (most recent) when solutions are loaded
+  useEffect(() => {
+    if (solutionHistory.length > 0 && !displayedSolution) {
+      const latestSolution = solutionHistory[solutionHistory.length - 1];
+      setDisplayedSolution(latestSolution);
+    }
+  }, [solutionHistory, displayedSolution]);
+
+  // When task changes, reset everything and load the latest solution for the new task
+  useEffect(() => {
+    if (prevTaskIdRef.current !== task.id) {
+      // Reset states for new task
+      setDisplayedSolution(null);
+      setSelectedSolutionUrl(null);
+      
+      // If solutions are already loaded for the new task, set the latest one
+      if (solutionHistory.length > 0) {
+        const latestSolution = solutionHistory[solutionHistory.length - 1];
+        setDisplayedSolution(latestSolution);
+      }
+      
+      prevTaskIdRef.current = task.id;
+    }
+  }, [task.id, solutionHistory]);
+
+  // Check if a new solution was submitted (latest solution ID changed)
+  useEffect(() => {
+    if (solutionHistory.length > 0 && displayedSolution) {
+      const latestSolution = solutionHistory[solutionHistory.length - 1];
+      
+      // If the latest solution ID is different from the displayed one,
+      // a new solution was submitted - update to show the latest
+      if (latestSolution.id !== displayedSolution.id) {
+        setDisplayedSolution(latestSolution);
+      }
+    }
+  }, [solutionHistory, displayedSolution]);
+
+  // Load solution content when the displayed solution changes
+  useEffect(() => {
+    const loadSolutionContent = async () => {
+      if (!displayedSolution || !displayedSolution.content) return;
+      
+      try {
+        if (task.type === TaskType.FILE) {
+          setSelectedFile(null);
+          setSelectedSolutionUrl(displayedSolution.content);
+        } else {
+          const response = await fetch(displayedSolution.content);
+          if (!response.ok) {
+            throw new Error(`Failed to fetch solution content: ${response.status}`);
+          }
+          const text = await response.text();
+          setAnswer(text);
+        }
+      } catch (error) {
+        console.error('Error loading solution content:', error);
+      }
+    };
+
+    loadSolutionContent();
+  }, [displayedSolution, task.type, setAnswer, setSelectedFile]);
+
   const handleOpenHistory = () => {
     setIsHistoryOpen(true);
   };
 
-  const latestSolution = solutionHistory && solutionHistory.length > 0 ? solutionHistory[0] : null;
+  const handleSolutionSelect = (solution: Solution) => {
-
+    setDisplayedSolution(solution);
-  const handleSolutionSelect = async (solution: Solution) => {
-    if (!solution.content) return;
-    
-    try {
-      if (task.type === TaskType.FILE) {
-        // For file tasks, just store the URL
-        setSelectedFile(null); // Clear any selected file first
-        setSelectedSolutionUrl(solution.content);
-      } else {
-        // For INPUT and CODE tasks, fetch the content and set as answer
-        const response = await fetch(solution.content);
-        if (!response.ok) {
-          throw new Error(`Failed to fetch solution content: ${response.status}`);
-        }
-        const text = await response.text();
-        setAnswer(text);
-      }
-    } catch (error) {
-      console.error('Error loading solution content:', error);
-    } 
   };
 
-  // Function to clear the existing file URL
   const handleClearExistingFile = () => {
     setSelectedSolutionUrl(null);
   };
 
-
   return (
     <div className="md:w-[500px] flex flex-col gap-4">
-      {latestSolution ? (
+      {displayedSolution ? (
-        <SolutionStatus solution={latestSolution} maxPoints={task.points}/>
+        <SolutionStatus solution={displayedSolution} maxPoints={task.points}/>
       ) : (
         <div className="bg-gray-100 rounded-lg p-4 text-gray-600 font-hse-sans">
           Решение еще не отправлено
@@ -85,7 +128,10 @@ const TaskSolution: React.FC<TaskSolutionProps> = ({
       )}
       
       {task.type === TaskType.INPUT && (
-        <InputSolution answer={answer} setAnswer={setAnswer} />
+        <InputSolution 
+          answer={answer} 
+          setAnswer={setAnswer} 
+        />
       )}
       
       {task.type === TaskType.FILE && (
@@ -99,7 +145,10 @@ const TaskSolution: React.FC<TaskSolutionProps> = ({
       )}
       
       {task.type === TaskType.CODE && (
-        <CodeSolution answer={answer} setAnswer={setAnswer} />
+        <CodeSolution 
+          answer={answer} 
+          setAnswer={setAnswer}
+        />
       )}
       
       <ActionButtons