Improved polling

frontend/src/components/v2/UpgradeProjectAlert/UpgradeProjectAlert.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import { useRouter } from "next/router";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
@@ -21,11 +21,33 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
   const upgradeProject = useUpgradeProject();
   const [currentStatus, setCurrentStatus] = useState<string | null>(null);
   const [isUpgrading, setIsUpgrading] = useState(false);
+
   const {
     data: projectStatus,
-    refetch: getLatestProjectStatus,
+    isLoading: statusIsLoading,
-    isLoading: statusIsLoading
+    refetch: manualProjectStatusRefetch
-  } = useGetUpgradeProjectStatus(project.id);
+  } = useGetUpgradeProjectStatus({
+    projectId: project.id,
+    enabled: membership.role === "admin",
+    refetchInterval: 5_000,
+    onSuccess: (data) => {
+      if (membership.role !== "admin") {
+        return;
+      }
+
+      if (data && data?.status !== null) {
+        if (data.status === "IN_PROGRESS") {
+          setCurrentStatus("Your upgrade is being processed.");
+        } else if (data.status === "FAILED") {
+          setCurrentStatus("Upgrade failed, please try again.");
+        }
+      }
+
+      if (currentStatus !== null && data?.status === null) {
+        router.reload();
+      }
+    }
+  });
 
   const onUpgradeProject = useCallback(async () => {
     if (upgradeProject.isLoading) {
@@ -47,51 +69,17 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
       privateKey: PRIVATE_KEY
     });
 
-    await getLatestProjectStatus();
+    manualProjectStatusRefetch();
 
     setTimeout(() => setIsUpgrading(false), 5_000);
   }, []);
 
-  useEffect(() => {
-    let interval: NodeJS.Timeout | null = null;
-
-    if (membership.role === "admin") {
-      if (project.version === ProjectVersion.V1) {
-        getLatestProjectStatus();
-      }
-
-      if (projectStatus && projectStatus?.status !== null) {
-        if (projectStatus.status === "IN_PROGRESS") {
-          setCurrentStatus("Your upgrade is being processed.");
-        } else if (projectStatus.status === "FAILED") {
-          setCurrentStatus("Upgrade failed, please try again.");
-        }
-      }
-
-      if (currentStatus !== null && projectStatus?.status === null) {
-        router.reload();
-      }
-
-      interval = setInterval(() => {
-        if (project.version === ProjectVersion.V1) {
-          getLatestProjectStatus();
-        }
-      }, 5_000);
-    }
-
-    return () => {
-      if (interval) {
-        clearInterval(interval);
-      }
-    };
-  }, [projectStatus]);
-
   const isLoading =
-    (isUpgrading ||
+    isUpgrading ||
-      upgradeProject.isLoading ||
+    ((upgradeProject.isLoading ||
       currentStatus !== null ||
       (currentStatus === null && statusIsLoading)) &&
-    projectStatus?.status !== "FAILED";
+      projectStatus?.status !== "FAILED");
 
   if (project.version !== ProjectVersion.V1) return null;
   if (membership.role !== "admin") return null;

frontend/src/hooks/api/workspace/queries.tsx

@@ -14,6 +14,7 @@ import {
   DeleteWorkspaceDTO,
   NameWorkspaceSecretsDTO,
   RenameWorkspaceDTO,
+  TGetUpgradeProjectStatusDTO,
   ToggleAutoCapitalizationDTO,
   UpdateEnvironmentDTO,
   Workspace
@@ -85,11 +86,18 @@ export const useUpgradeProject = () => {
   });
 };
 
-export const useGetUpgradeProjectStatus = (projectId: string) => {
+export const useGetUpgradeProjectStatus = ({
+  projectId,
+  onSuccess,
+  enabled,
+  refetchInterval
+}: TGetUpgradeProjectStatusDTO) => {
   return useQuery({
     queryKey: workspaceKeys.getProjectUpgradeStatus(projectId),
     queryFn: () => fetchProjectUpgradeStatus(projectId),
-    enabled: true
+    enabled,
+    onSuccess,
+    refetchInterval
   });
 };
 

frontend/src/hooks/api/workspace/types.ts

@@ -31,6 +31,13 @@ export type NameWorkspaceSecretsDTO = {
   }[];
 };
 
+export type TGetUpgradeProjectStatusDTO = {
+  projectId: string;
+  onSuccess?: (data?: { status: string }) => void;
+  enabled?: boolean;
+  refetchInterval?: number;
+};
+
 // mutation dto
 export type CreateWorkspaceDTO = {
   projectName: string;