Refactor ServerProvider to use useRef for hasInitialData state and improve error handling logic

src/contexts/ServerContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, useEffect } from 'react'
+import { createContext, useContext, useState, useEffect, useRef } from 'react'
 import type { ReactNode } from 'react'
 
 interface ServerInfo {
@@ -56,11 +56,10 @@ export function ServerProvider({ children }: { children: ReactNode }) {
   const [servers, setServers] = useState<ServerData[]>([])
   const [loading, setLoading] = useState(true)
   const [lastUpdated, setLastUpdated] = useState(Date.now())
-  const [hasInitialData, setHasInitialData] = useState(false)
+  const hasInitialDataRef = useRef(false)
 
   const fetchServerData = async () => {
     try {
-      // Batch query all servers in a single API call
       const response = await fetch('/api/server/statistics/a2s-query', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -73,89 +72,65 @@ export function ServerProvider({ children }: { children: ReactNode }) {
         })
       })
 
-      if (!response.ok) {
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
-        throw new Error(`HTTP ${response.status}`)
-      }
 
       const data = await response.json()
-      
+
-      // Update servers state with new data
       setServers(prevServers => {
-        const results: ServerData[] = serverList.map((server, index) => {
+        return serverList.map((server, index) => {
           const a2sData = data.results?.[index]
-          
           if (a2sData) {
-            return {
+            return { ...server, a2sData, status: 'online' }
-              ...server,
-              a2sData,
-              status: 'online' as const
-            }
-          } else {
-            // If no data for this server but we have previous data, keep the previous data
-            const prevServer = prevServers.find(s => s.ip === server.ip && s.port === server.port)
-            if (prevServer?.a2sData) {
-              return prevServer // Keep previous successful data
-            }
-            return {
-              ...server,
-              status: 'offline' as const,
-              error: 'No response from server'
-            }
           }
+
+          const prev = prevServers.find(
+            s => s.ip === server.ip && s.port === server.port && s.a2sData
+          )
+          return prev
+            ? prev
+            : { ...server, status: 'offline', error: 'No response from server' }
         })
-        return results
       })
 
       setLoading(false)
       setLastUpdated(Date.now())
-      setHasInitialData(true)
+      hasInitialDataRef.current = true // ✅ works immediately
+
     } catch (error) {
       console.error('Failed to fetch server data:', error)
-      
+
-      // If we already have data from a previous successful fetch, keep using it
-      // Only show error state if this is the very first fetch attempt
       setServers(prevServers => {
-        if (prevServers.length > 0 && hasInitialData) {
+        if (prevServers.length > 0 && hasInitialDataRef.current) {
-          // Keep previous data on polling errors
+          // ✅ now this works correctly
           return prevServers
-        } else {
-          // First fetch failed, show offline state
-          const offlineServers: ServerData[] = serverList.map(server => ({
-            ...server,
-            status: 'offline' as const,
-            error: error instanceof Error ? error.message : 'Unknown error'
-          }))
-          return offlineServers
         }
+        return serverList.map(server => ({
+          ...server,
+          status: 'offline',
+          error: error instanceof Error ? error.message : 'Unknown error'
+        }))
       })
-      
+
       setLoading(false)
-      // Don't update lastUpdated on error to keep showing previous successful fetch time
     }
   }
 
-  // Initial fetch and polling every 2 seconds
   useEffect(() => {
     fetchServerData()
-
+    const interval = setInterval(fetchServerData, 2000)
-    const interval = setInterval(() => {
-      fetchServerData()
-    }, 2000) // Poll every 2 seconds
-
     return () => clearInterval(interval)
-  }, []) // Empty dependency array is intentional - we want this to run once
+  }, [])
 
   return (
-    <ServerContext.Provider value={{ servers, loading, lastUpdated, hasInitialData }}>
+    <ServerContext.Provider
+      value={{
+        servers,
+        loading,
+        lastUpdated,
+        hasInitialData: hasInitialDataRef.current,
+      }}
+    >
       {children}
     </ServerContext.Provider>
   )
-}
+}
-
-export function useServers() {
-  const context = useContext(ServerContext)
-  if (context === undefined) {
-    throw new Error('useServers must be used within a ServerProvider')
-  }
-  return context
-}