add index queue changes lost on merge

dashboard/src/components/IndexQueue.tsx

@@ -9,6 +9,7 @@ import {
 } from '@mui/material'
 import styles from './Dashboard/index.module.css'
 import { useAdminContext } from '@/context/AdminProvider'
+import Alert from '@mui/material/Alert'
 
 interface QueueItem {
   txId: string
@@ -19,36 +20,49 @@ interface QueueItem {
 export default function IndexQueue() {
   const [queue, setQueue] = useState<QueueItem[]>([])
   const { networks } = useAdminContext()
+  const [avoidAskQueue, setAvoidAskQueue] = useState<boolean>(false)
 
+  let intervalId: any = null
   useEffect(() => {
     const fetchQueue = () => {
       fetch('/api/services/indexQueue')
-        .then((response) => response.json())
-        .then((data) => {
-          const transformedQueue = data.queue.map((item: any) => {
-            const network = networks.find((net) => net.chainId === item.chainId)
-            return {
-              txId: item.txId,
-              chainId: item.chainId,
-              chain: network ? network.network : 'Unknown Network'
+        .then((response) => {
+          if (response.status === 400) {
+            console.warn('Cannot fetch queue: Node is not running Indexer')
+            setAvoidAskQueue(true)
+            if (intervalId) {
+              clearInterval(intervalId) // Stop doing this, there is no point, since we don't have Indexer
             }
-          })
-          setQueue(transformedQueue)
+          } else {
+            response.json().then((data) => {
+              const transformedQueue = data.queue.map((item: any) => {
+                const network = networks.find((net) => net.chainId === item.chainId)
+                return {
+                  txId: item.txId,
+                  chainId: item.chainId,
+                  chain: network ? network.network : 'Unknown Network'
+                }
+              })
+              setQueue(transformedQueue)
+            })
+          }
         })
         .catch((error) => {
           console.error('Error fetching queue:', error)
         })
     }
 
     fetchQueue() // Initial fetch
-    let pollingInterval = 2000 // Default polling interval
+    let pollingInterval = 10000 // Default polling interval (10 seconds)
     if (process.env.INDEXER_INTERVAL) {
       pollingInterval = Number(process.env.INDEXER_INTERVAL)
     }
-    const intervalId = setInterval(fetchQueue, pollingInterval)
+    intervalId = setInterval(fetchQueue, pollingInterval)
 
     return () => {
-      clearInterval(intervalId) // Clear interval on component unmount
+      if (intervalId) {
+        clearInterval(intervalId) // Clear interval on component unmount
+      }
     }
   }, [])
 
@@ -88,6 +102,17 @@ export default function IndexQueue() {
       ) : (
         <p>Indexing queue is empty.</p>
       )}
+      {avoidAskQueue && (
+        <Alert
+          style={{ width: 640 }}
+          severity="warning"
+          onClose={() => {
+            setAvoidAskQueue(false)
+          }}
+        >
+          Node is not running Indexer. No need to get queue at this point!
+        </Alert>
+      )}
     </div>
   )
 }