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,39 +52,34 @@ export default function OperationStatusPage() {
 				setLoading(false);
 			}
 		};
-	
+
 		fetchOperation();
-		const interval = setInterval(fetchOperation, 5000);
-	
-		return () => clearInterval(interval);
+		if (!intervalRef.current) {
+			intervalRef.current = setInterval(fetchOperation, 1000);
+		}
+
+		return () => {
+			if (intervalRef.current) {
+				clearInterval(intervalRef.current);
+			}
+		};
 	}, [operationId]);
 
-	const getStatusClass = (status: number) => {
-		switch (status) {
-		case 0:
-			return "created";
-		case 1:
-			return "completed";
-		case 2:
-			return "failed";
-		default:
-			return "";
-		}
-	};
-	
 	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">
@@ -96,7 +99,7 @@ export default function OperationStatusPage() {
 						<Typography>Owner: {operation.Owner}</Typography>
 						<Typography>Date: {new Date(operation.Date * 1000).toLocaleString()}</Typography>
 						<Typography>Path: {operation.Path}</Typography>
-			
+
 						{operation.Status === 1 && (
 							<div className="submission-button">
 							<Button
@@ -116,4 +119,4 @@ export default function OperationStatusPage() {
 			</main>
 		</Webpage>
 	);
-}
+}