diff --git a/packages/frontend/src/components/projects/create/Deploy.tsx b/packages/frontend/src/components/projects/create/Deploy.tsx index e943dfed..9e3bfd8d 100644 --- a/packages/frontend/src/components/projects/create/Deploy.tsx +++ b/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([]); + 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 (