stop polling on completeion/fail

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,37 +54,32 @@ export default function OperationStatusPage() {
 		};
 
 		fetchOperation();
-		const interval = setInterval(fetchOperation, 5000);
-	
-		return () => clearInterval(interval);
-	}, [operationId]);
-
-	const getStatusClass = (status: number) => {
-		switch (status) {
-		case 0:
-			return "created";
-		case 1:
-			return "completed";
-		case 2:
-			return "failed";
-		default:
-			return "";
+		if (!intervalRef.current) {
+			intervalRef.current = setInterval(fetchOperation, 5000);
 		}
-	};
+
+		return () => {
+			if (intervalRef.current) {
+				clearInterval(intervalRef.current);
+			}
+		};
+	}, [operationId]);
 
 	const getStatusText = (status: number) => {
 		switch (status) {
-		case 0:
-			return "Created";
-		case 1:
-			return "Completed";
-		case 2:
-			return "Failed";
-		default:
-			return "Unknown";
+			case 0:
+				return "Created";
+			case 1:
+				return "Completed";
+			case 2:
+				return "Failed";
+			default:
+				return "Unknown";
 		}
 	};
 	
+	const getStatusClass = (status: number) => getStatusText(status).toLowerCase();	
+	
 	return (
 		<Webpage>
 			<main className="operation-status">