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,23 +17,31 @@ 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;
-	
+
 		const fetchOperation = async () => {
 			try {
 				const response = await fetch(`/api/operations/${operationId}`);
-		
+
 				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);
@@ -44,38 +52,33 @@ export default function OperationStatusPage() {
 				setLoading(false);
 			}
 		};
-	
+
 		fetchOperation();
-		const interval = setInterval(fetchOperation, 5000);
-	
-		return () => clearInterval(interval);
+		if (!intervalRef.current) {
+			intervalRef.current = setInterval(fetchOperation, 5000);
+		}
+
+		return () => {
+			if (intervalRef.current) {
+				clearInterval(intervalRef.current);
+			}
+		};
 	}, [operationId]);
 
-	const getStatusClass = (status: number) => {
+	const getStatusText = (status: number) => {
 		switch (status) {
-		case 0:
-			return "created";
-		case 1:
-			return "completed";
-		case 2:
-			return "failed";
-		default:
-			return "";
+			case 0:
+				return "Created";
+			case 1:
+				return "Completed";
+			case 2:
+				return "Failed";
+			default:
+				return "Unknown";
 		}
 	};
 	
-	const getStatusText = (status: number) => {
-		switch (status) {
-		case 0:
-			return "Created";
-		case 1:
-			return "Completed";
-		case 2:
-			return "Failed";
-		default:
-			return "Unknown";
-		}
-	};
+	const getStatusClass = (status: number) => getStatusText(status).toLowerCase();	
 	
 	return (
 		<Webpage>