web/src/app/operations/[operationId]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { useParams, useRouter } from "next/navigation";
 import { CircularProgress, Typography, Card, CardContent, Button } from "@mui/material";
 import Webpage from "@/app/_components/webpage";
@@ -17,11 +17,14 @@ interface Operation {
   }
 
 export default function OperationStatusPage() {
-	const { operationId } = useParams();
 	const router = useRouter();
-	const [operation, setOperation] = useState<Operation | null>(null);
+	const { operationId } = useParams();
+
 	const [loading, setLoading] = useState(true);
 	const [error, setError] = useState<string | null>(null);
+	const [operation, setOperation] = useState<Operation | null>(null);
+
+	const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
 	useEffect(() => {
 		if (!operationId) return;
@@ -32,8 +35,13 @@ export default function OperationStatusPage() {
 
 				if (!response.ok) throw new Error("Failed to fetch operation");
 
-				const data = await response.json();
+				const data: Operation = await response.json();
 				setOperation(data);
+
+				if (data.Status !== 0 && intervalRef.current) {
+					clearInterval(intervalRef.current);
+					intervalRef.current = null;
+				}
 			} catch (err: unknown) {
 				if (err instanceof Error) {
 					setError(err.message);
@@ -46,23 +54,16 @@ export default function OperationStatusPage() {
 		};
 
 		fetchOperation();
-		const interval = setInterval(fetchOperation, 5000);
+		if (!intervalRef.current) {
+			intervalRef.current = setInterval(fetchOperation, 1000);
+		}
 
-		return () => clearInterval(interval);
+		return () => {
-	}, [operationId]);
+			if (intervalRef.current) {
-
+				clearInterval(intervalRef.current);
-	const getStatusClass = (status: number) => {
-		switch (status) {
-		case 0:
-			return "created";
-		case 1:
-			return "completed";
-		case 2:
-			return "failed";
-		default:
-			return "";
 			}
 		};
+	}, [operationId]);
 
 	const getStatusText = (status: number) => {
 		switch (status) {
@@ -77,6 +78,8 @@ export default function OperationStatusPage() {
 		}
 	};
 
+	const getStatusClass = (status: number) => getStatusText(status).toLowerCase();
+
 	return (
 		<Webpage>
 			<main className="operation-status">