Navigate to success page after deployment status is ready

packages/frontend/src/components/projects/create/Deploy.tsx

@@ -1,5 +1,6 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { Deployment, DeploymentStatus } from 'gql-client';
 
 import { DeployStep, DeployStatus } from './DeployStep';
 import { Stopwatch, setStopWatchOffset } from '../../StopWatch';
@@ -7,13 +8,19 @@ import { Heading } from '../../shared/Heading';
 import { Button } from '../../shared/Button';
 import { ClockOutlineIcon, WarningIcon } from '../../shared/CustomIcon';
 import { CancelDeploymentDialog } from '../../projects/Dialog/CancelDeploymentDialog';
+import { useGQLClient } from 'context/GQLClientContext';
+
+const FETCH_DEPLOYMENTS_INTERVAL = 5000;
 
-const TIMEOUT_DURATION = 5000;
 const Deploy = () => {
+  const client = useGQLClient();
+
   const [searchParams] = useSearchParams();
   const projectId = searchParams.get('projectId');
 
   const [open, setOpen] = React.useState(false);
+  const [deployments, setDeployments] = useState<Deployment[]>([]);
+
   const handleOpen = () => setOpen(!open);
 
   const navigate = useNavigate();
@@ -23,13 +30,35 @@ const Deploy = () => {
     navigate(`/${orgSlug}/projects/create`);
   }, []);
 
-  useEffect(() => {
-    const timerID = setTimeout(() => {
-      navigate(`/${orgSlug}/projects/create/success/${projectId}`);
-    }, TIMEOUT_DURATION);
+  const fetchDeployments = useCallback(async () => {
+    if (!projectId) {
+      return;
+    }
 
-    return () => clearInterval(timerID);
-  }, []);
+    const { deployments } = await client.getDeployments(projectId);
+    setDeployments(deployments);
+  }, [client, projectId]);
+
+  useEffect(() => {
+    fetchDeployments();
+
+    const interval = setInterval(() => {
+      fetchDeployments();
+    }, FETCH_DEPLOYMENTS_INTERVAL);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [fetchDeployments]);
+
+  useEffect(() => {
+    if (
+      deployments.length > 0 &&
+      deployments[0].status === DeploymentStatus.Ready
+    ) {
+      navigate(`/${orgSlug}/projects/create/success/${projectId}`);
+    }
+  }, [deployments]);
 
   return (
     <div className="space-y-7">