Updae AppImage

AppImage/components/network-traffic-chart.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useEffect, useCallback, memo } from "react"
+import { useState, useEffect } from "react"
 import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts"
 import { Loader2 } from "lucide-react"
 
@@ -15,7 +15,6 @@ interface NetworkTrafficChartProps {
   timeframe: string
   interfaceName?: string
   onTotalsCalculated?: (totals: { received: number; sent: number }) => void
-  refreshInterval?: number // En milisegundos, por defecto 30000 (30 segundos)
 }
 
 const CustomNetworkTooltip = ({ active, payload, label }: any) => {
@@ -38,12 +37,7 @@ const CustomNetworkTooltip = ({ active, payload, label }: any) => {
   return null
 }
 
-const NetworkTrafficChartComponent = ({
+export const NetworkTrafficChart = ({ timeframe, interfaceName, onTotalsCalculated }: NetworkTrafficChartProps) => {
-  timeframe,
-  interfaceName,
-  onTotalsCalculated,
-  refreshInterval = 30000,
-}: NetworkTrafficChartProps) => {
   const [data, setData] = useState<NetworkMetricsData[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -53,9 +47,8 @@ const NetworkTrafficChartComponent = ({
     netOut: true,
   })
 
-  console.log("[v0] NetworkTrafficChart refreshInterval:", refreshInterval, "interfaceName:", interfaceName)
+  useEffect(() => {
-
+    const fetchMetrics = async () => {
-  const fetchMetrics = useCallback(async () => {
       if (isInitialLoad) {
         setLoading(true)
       }
@@ -69,8 +62,6 @@ const NetworkTrafficChartComponent = ({
           ? `${baseUrl}/api/network/${interfaceName}/metrics?timeframe=${timeframe}`
           : `${baseUrl}/api/node/metrics?timeframe=${timeframe}`
 
-      console.log("[v0] Fetching network metrics from:", apiUrl)
-
         const response = await fetch(apiUrl)
 
         if (!response.ok) {
@@ -154,35 +145,20 @@ const NetworkTrafficChartComponent = ({
           setIsInitialLoad(false)
         }
       } catch (err: any) {
-      console.error("[v0] Error fetching network metrics:", err)
+        console.error("Error fetching network metrics:", err)
         setError(err.message || "Error loading metrics")
       } finally {
         setLoading(false)
       }
+    }
+
+    fetchMetrics()
+
+    const interval = setInterval(fetchMetrics, 60000)
+
+    return () => clearInterval(interval)
   }, [timeframe, interfaceName, isInitialLoad, onTotalsCalculated])
 
-  useEffect(() => {
-    console.log("[v0] Initial fetch - timeframe:", timeframe, "interfaceName:", interfaceName)
-    setIsInitialLoad(true)
-    fetchMetrics()
-  }, [timeframe, interfaceName, fetchMetrics])
-
-  useEffect(() => {
-    if (refreshInterval > 0) {
-      console.log("[v0] Setting up refresh interval:", refreshInterval, "ms for", interfaceName || "node")
-
-      const interval = setInterval(() => {
-        console.log("[v0] Auto-refresh triggered for:", interfaceName || "node")
-        fetchMetrics()
-      }, refreshInterval)
-
-      return () => {
-        console.log("[v0] Clearing refresh interval for:", interfaceName || "node")
-        clearInterval(interval)
-      }
-    }
-  }, [refreshInterval, fetchMetrics, interfaceName])
-
   const tickInterval = Math.ceil(data.length / 8)
 
   const handleLegendClick = (dataKey: string) => {
@@ -292,12 +268,3 @@ const NetworkTrafficChartComponent = ({
     </ResponsiveContainer>
   )
 }
-
-// Only re-render when timeframe, interfaceName, or refreshInterval change
-export const NetworkTrafficChart = memo(NetworkTrafficChartComponent, (prevProps, nextProps) => {
-  return (
-    prevProps.timeframe === nextProps.timeframe &&
-    prevProps.interfaceName === nextProps.interfaceName &&
-    prevProps.refreshInterval === nextProps.refreshInterval
-  )
-})