feat: added polling functions for status updates (#11534)

Author: bashleigh

packages/developer-portal/src/components/apps/pipeline/dns/dns-step-three.tsx

@@ -14,7 +14,7 @@ import {
   Title,
 } from '@reapit/elements'
 import { GetActionNames, getActions, useReapitGet } from '@reapit/use-reapit-data'
-import React, { FC } from 'react'
+import React, { FC, useEffect, useRef } from 'react'
 import { reapitConnectBrowserSession } from '../../../../core/connect-session'
 import { cx } from '@linaria/core'
 import { DnsContainerElement, DnsContainerRow, DnsInputElement, DnsValue } from './__styles__'
@@ -36,6 +36,7 @@ export const PipelineDnsStepThree: FC<{
 }> = ({ pipelineId }) => {
   const { connectSession } = useReapitConnect(reapitConnectBrowserSession)
   const { appPipelineState } = useAppState()
+  const pollingRef = useRef<NodeJS.Timeout>()
 
   const [certificate, loading, , fetchCertificate, refetching] = useReapitGet<{
     DomainValidationOptions: {
@@ -56,6 +57,24 @@ export const PipelineDnsStepThree: FC<{
     fetchWhenTrue: [connectSession],
   })
 
+  const pollFetchCertificate = async () => {
+    await fetchCertificate()
+  }
+
+  useEffect(() => {
+    pollingRef.current = setInterval(pollFetchCertificate, 10000)
+
+    return () => {
+      clearInterval(pollingRef.current)
+    }
+  }, [])
+
+  const clearPollAndCall = async () => {
+    clearInterval(pollingRef.current)
+    await fetchCertificate()
+    pollingRef.current = setInterval(pollFetchCertificate, 10000)
+  }
+
   if (certificate?.Status === 'ISSUED') {
     appPipelineState.appPipelineRefresh()
   }
@@ -122,7 +141,7 @@ export const PipelineDnsStepThree: FC<{
             ))}
           </DnsContainerElement>
           <ButtonGroup>
-            <Button intent="primary" onClick={() => fetchCertificate()} loading={refetching} disabled={refetching}>
+            <Button intent="primary" onClick={() => clearPollAndCall()} loading={refetching} disabled={refetching}>
               Refresh
             </Button>
           </ButtonGroup>

packages/developer-portal/src/components/apps/pipeline/dns/dns-step-two.tsx

@@ -12,7 +12,7 @@ import {
   useSnack,
 } from '@reapit/elements'
 import { UpdateActionNames, updateActions, UpdateReturnTypeEnum, useReapitUpdate } from '@reapit/use-reapit-data'
-import React, { FC } from 'react'
+import React, { FC, useEffect, useRef } from 'react'
 import { reapitConnectBrowserSession } from '../../../../core/connect-session'
 import { PipelineDnsStepModal } from './setup-model'
 import { useAppState } from '../../state/use-app-state'
@@ -41,6 +41,7 @@ export const PipelineDnsStepTwo: FC<{
   })
   const { error, success } = useSnack()
   const { appPipelineState } = useAppState()
+  const pollingRef = useRef<NodeJS.Timeout>()
 
   const verifyTxtRecord = async () => {
     const result = await sendVerifyRequest(undefined)
@@ -60,6 +61,24 @@ export const PipelineDnsStepTwo: FC<{
     }
   }
 
+  const pollVerifyTxtRecord = async () => {
+    await verifyTxtRecord()
+  }
+
+  useEffect(() => {
+    pollingRef.current = setInterval(pollVerifyTxtRecord, 10000)
+
+    return () => {
+      clearInterval(pollingRef.current)
+    }
+  }, [])
+
+  const clearPollAndCall = async () => {
+    clearInterval(pollingRef.current)
+    await verifyTxtRecord()
+    pollingRef.current = setInterval(pollVerifyTxtRecord, 10000)
+  }
+
   return (
     <>
       <FlexContainer>
@@ -96,7 +115,7 @@ export const PipelineDnsStepTwo: FC<{
           loading={sendingVerify}
           disabled={sendingVerify}
           onClick={() => {
-            verifyTxtRecord()
+            clearPollAndCall()
           }}
           intent="primary"
         >