diff --git a/frontend/src/components/v2/UpgradeProjectAlert/UpgradeProjectAlert.tsx b/frontend/src/components/v2/UpgradeProjectAlert/UpgradeProjectAlert.tsx index 7fce14418..894798a2e 100644 --- a/frontend/src/components/v2/UpgradeProjectAlert/UpgradeProjectAlert.tsx +++ b/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(null); const [isUpgrading, setIsUpgrading] = useState(false); + const { data: projectStatus, - refetch: getLatestProjectStatus, - isLoading: statusIsLoading - } = useGetUpgradeProjectStatus(project.id); + isLoading: statusIsLoading, + refetch: manualProjectStatusRefetch + } = 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 || - upgradeProject.isLoading || + isUpgrading || + ((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; diff --git a/frontend/src/hooks/api/workspace/queries.tsx b/frontend/src/hooks/api/workspace/queries.tsx index 68231d594..bcee978d3 100644 --- a/frontend/src/hooks/api/workspace/queries.tsx +++ b/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 }); }; diff --git a/frontend/src/hooks/api/workspace/types.ts b/frontend/src/hooks/api/workspace/types.ts index fc7c217dc..c4aada862 100644 --- a/frontend/src/hooks/api/workspace/types.ts +++ b/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;