init

hooks/use-heatmap-data.ts

@@ -0,0 +1,44 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+
+export interface HeatmapPoint {
+  lat: number;
+  lng: number;
+  weight: number;
+  lobsterCount: number;
+  city: string;
+  country: string;
+}
+
+interface HeatmapData {
+  points: HeatmapPoint[];
+  lastUpdated: string;
+}
+
+export function useHeatmapData(refreshInterval = 30000) {
+  const [data, setData] = useState<HeatmapData>({ points: [], lastUpdated: "" });
+  const [isLoading, setIsLoading] = useState(true);
+
+  const fetchData = useCallback(async () => {
+    try {
+      const res = await fetch("/api/v1/heatmap");
+      if (res.ok) {
+        const json = await res.json();
+        setData(json);
+      }
+    } catch {
+      // silently fail, will retry on next interval
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+    const interval = setInterval(fetchData, refreshInterval);
+    return () => clearInterval(interval);
+  }, [fetchData, refreshInterval]);
+
+  return { ...data, isLoading, refresh: fetchData };
+}

hooks/use-sse.ts

@@ -0,0 +1,68 @@
+"use client";
+
+import { useEffect, useRef, useCallback, useState } from "react";
+
+export interface SSEEvent {
+  type: string;
+  data: Record<string, unknown>;
+}
+
+interface UseSSEOptions {
+  url: string;
+  onEvent?: (event: SSEEvent) => void;
+  enabled?: boolean;
+}
+
+export function useSSE({ url, onEvent, enabled = true }: UseSSEOptions) {
+  const [isConnected, setIsConnected] = useState(false);
+  const [lastEvent, setLastEvent] = useState<SSEEvent | null>(null);
+  const eventSourceRef = useRef<EventSource | null>(null);
+  const onEventRef = useRef(onEvent);
+
+  // Keep callback ref updated
+  onEventRef.current = onEvent;
+
+  const connect = useCallback(() => {
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+    }
+
+    const es = new EventSource(url);
+    eventSourceRef.current = es;
+
+    es.onopen = () => setIsConnected(true);
+    es.onerror = () => {
+      setIsConnected(false);
+      // Auto-reconnect is built into EventSource
+    };
+
+    // Listen for all event types
+    const eventTypes = ["heartbeat", "task", "stats", "online", "offline", "connected"];
+    eventTypes.forEach((type) => {
+      es.addEventListener(type, (e: MessageEvent) => {
+        try {
+          const data = JSON.parse(e.data);
+          const event: SSEEvent = { type, data };
+          setLastEvent(event);
+          onEventRef.current?.(event);
+        } catch {
+          // skip malformed events
+        }
+      });
+    });
+
+    return es;
+  }, [url]);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const es = connect();
+    return () => {
+      es.close();
+      setIsConnected(false);
+    };
+  }, [connect, enabled]);
+
+  return { isConnected, lastEvent };
+}