Merge pull request #2743 from devtron-labs/fix/announcement-banner

chore: fix multiple polling from useOnline

Author: AbhishekA1509

src/components/common/Banner/Banner.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import {
     AnimatePresence,
@@ -83,36 +83,21 @@ export const Banner = () => {
     const [showAnnouncementBanner, setShowAnnouncementBanner] = useState(
         ANNOUNCEMENT_CONFIG.message ? shouldShowAnnouncementBanner() : false,
     )
-    const hasShownOnlineBanner = useRef(false)
     const onlineTimer = useRef<ReturnType<typeof setTimeout>>(null)
 
-    const onOnline = useCallback(() => {
-        // Only show the online banner if we haven't shown it since the last offline state
-        if (!hasShownOnlineBanner.current) {
-            setShowOnlineBanner(true)
-            hasShownOnlineBanner.current = true
-
-            // Clear any existing timer before setting a new one
-            if (onlineTimer.current) {
-                clearTimeout(onlineTimer.current)
-            }
-
-            onlineTimer.current = setTimeout(() => setShowOnlineBanner(false), ONLINE_BANNER_TIMEOUT)
-        }
-    }, [])
-
-    const onOffline = () => {
-        hasShownOnlineBanner.current = false
+    const onOnline = () => {
+        clearTimeout(onlineTimer.current)
+        setShowOnlineBanner(true)
+        onlineTimer.current = setTimeout(() => setShowOnlineBanner(false), ONLINE_BANNER_TIMEOUT)
     }
 
-    const isOnline = useOnline({ onOnline, onOffline })
+    const isOnline = useOnline({ onOnline })
 
     useEffect(
         () => () => {
             if (onlineTimer.current) {
                 clearTimeout(onlineTimer.current)
             }
-            hasShownOnlineBanner.current = false
         },
         [],
     )

src/components/common/hooks/useOnline/useOnline.ts

@@ -1,55 +1,62 @@
 import { useEffect, useRef, useState } from 'react'
 
-import { noop, useMainContext } from '@devtron-labs/devtron-fe-common-lib'
+import { getIsRequestAborted, noop, useMainContext } from '@devtron-labs/devtron-fe-common-lib'
 
 import { getInternetConnectivity } from '@Services/service'
 
 import { INTERNET_CONNECTIVITY_INTERVAL } from '../constants'
 
-export const useOnline = ({ onOnline = noop, onOffline = noop }: { onOnline?: () => void; onOffline?: () => void }) => {
+export const useOnline = ({ onOnline = noop }: { onOnline?: () => void }) => {
     const [online, setOnline] = useState(structuredClone(navigator.onLine))
     const abortControllerRef = useRef<AbortController>(new AbortController())
     const timeoutRef = useRef<NodeJS.Timeout>(null)
     const { isAirgapped } = useMainContext()
 
+    const handleClearTimeout = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current)
+        }
+        abortControllerRef.current.abort()
+    }
+
     const checkConnectivity = async () => {
         if (isAirgapped) return
-        // Cancel any pending request
-        if (abortControllerRef.current) {
-            abortControllerRef.current.abort()
-        }
 
+        handleClearTimeout()
         const controller = new AbortController()
         abortControllerRef.current = controller
 
         try {
             await getInternetConnectivity(abortControllerRef.current)
-            setOnline(true)
-            if (online) {
-                onOnline()
-            }
-        } catch {
-            setOnline(false)
-        } finally {
+            setOnline((prev) => {
+                if (!prev) {
+                    onOnline()
+                }
+                return true
+            })
             timeoutRef.current = setTimeout(checkConnectivity, INTERNET_CONNECTIVITY_INTERVAL)
+        } catch (error) {
+            setOnline(false)
+            if (!getIsRequestAborted(error)) {
+                timeoutRef.current = setTimeout(checkConnectivity, INTERNET_CONNECTIVITY_INTERVAL)
+            }
         }
     }
     const handleOffline = () => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current)
-        }
-        abortControllerRef.current.abort()
+        handleClearTimeout()
         setOnline(false)
-        if (onOffline) {
-            onOffline()
-        }
     }
 
     const handleOnline = async () => {
         // Verify connectivity when browser reports online
         await checkConnectivity()
     }
 
+    useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        handleOnline()
+    }, [])
+
     useEffect(() => {
         if (isAirgapped) return null
         window.addEventListener('online', handleOnline)

src/services/service.ts

@@ -559,7 +559,15 @@ export const getTemplateOptions = (appId: number, envId: number): Promise<Respon
     get(getUrlWithSearchParams(Routes.DEPLOYMENT_OPTIONS, { appId, envId }))
 
 export const getInternetConnectivity = (controller: AbortController): Promise<any> => {
+    const timeoutId = setTimeout(() => {
+        controller.abort()
+    }, 10000)
+
     return fetch(`${window._env_?.CENTRAL_API_ENDPOINT ?? 'https://api.devtron.ai'}/${Routes.HEALTH}`, {
         signal: controller.signal,
-    }).then((res) => res.json())
+    })
+        .then((res) => res.json())
+        .finally(() => {
+            clearTimeout(timeoutId)
+        })
 }