From c6ebe5a360f65fe0af9e93725514881abf85510a Mon Sep 17 00:00:00 2001
From: ic3w0lf <bob@ic3.space>
Date: Thu, 3 Apr 2025 15:45:59 -0600
Subject: [PATCH] stop polling on completeion/fail
---
web/src/app/operations/[operationId]/page.tsx | 67 ++++++++++---------
1 file changed, 35 insertions(+), 32 deletions(-)
diff --git a/web/src/app/operations/[operationId]/page.tsx b/web/src/app/operations/[operationId]/page.tsx
index 6f0763c..d712cdd 100644
--- a/web/src/app/operations/[operationId]/page.tsx
+++ b/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>