docker implementation

frontend/src/hooks/useLiveBlogStream.ts

@@ -16,6 +16,13 @@ export function useLiveBlogStream(
   liveBlogId: string,
   options: LiveBlogStreamOptions = {}
 ) {
+  const defaultOptions: LiveBlogStreamOptions = {
+    autoReconnect: true,
+    reconnectInterval: 3000,
+    maxReconnectAttempts: 10,
+  };
+  
+  const mergedOptions = { ...defaultOptions, ...options };
   const [isConnected, setIsConnected] = useState(false);
   const [lastEvent, setLastEvent] = useState<LiveBlogStreamEvent | null>(null);
   const [connectionError, setConnectionError] = useState<string | null>(null);
@@ -24,13 +31,13 @@ export function useLiveBlogStream(
   const eventSourceRef = useRef<EventSource | null>(null);
   const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const lastEventIdRef = useRef<string | null>(null);
-  const optionsRef = useRef(options);
+  const optionsRef = useRef(mergedOptions);
   const reconnectAttemptsRef = useRef(reconnectAttempts);
 
   // Update refs when props change
   useEffect(() => {
-    optionsRef.current = options;
-  }, [options]);
+    optionsRef.current = mergedOptions;
+  }, [mergedOptions]);
 
   useEffect(() => {
     reconnectAttemptsRef.current = reconnectAttempts;
@@ -59,7 +66,7 @@ export function useLiveBlogStream(
         eventSourceRef.current.close();
       }
 
-      const url = new URL(`${import.meta.env.VITE_API_URL}/api/v1/live-blogs/${liveBlogId}/stream`, window.location.origin);
+      const url = new URL(`${import.meta.env.VITE_API_URL}/live-blogs/${liveBlogId}/stream`, window.location.origin);
       
       if (lastEventIdRef.current) {
         url.searchParams.set('last-event-id', lastEventIdRef.current);
@@ -117,14 +124,14 @@ export function useLiveBlogStream(
           setConnectionError('Connection to live blog lost');
 
           // Attempt reconnection if enabled and within limits
-          if (optionsRef.current.autoReconnect && reconnectAttemptsRef.current < (optionsRef.current.maxReconnectAttempts || 5)) {
+          if (optionsRef.current.autoReconnect && reconnectAttemptsRef.current < optionsRef.current.maxReconnectAttempts) {
             const nextAttempt = reconnectAttemptsRef.current + 1;
             setReconnectAttempts(nextAttempt);
             reconnectTimeoutRef.current = setTimeout(() => {
-              console.log(`Attempting reconnection (${nextAttempt}/${optionsRef.current.maxReconnectAttempts || 5})`);
+              console.log(`Attempting reconnection (${nextAttempt}/${optionsRef.current.maxReconnectAttempts})`);
               createConnection();
-            }, optionsRef.current.reconnectInterval || 3000);
-          } else if (reconnectAttemptsRef.current >= (optionsRef.current.maxReconnectAttempts || 5)) {
+            }, optionsRef.current.reconnectInterval);
+          } else if (reconnectAttemptsRef.current >= optionsRef.current.maxReconnectAttempts) {
             setConnectionError('Failed to reconnect after multiple attempts');
           }
         };

frontend/src/queries/live-blogs.ts

@@ -32,6 +32,7 @@ export function useLiveBlogUpdates(liveBlogId: string, page = 1, limit = 50) {
     queryKey: ['liveBlogUpdates', liveBlogId, page, limit],
     queryFn: () => api.fetchLiveBlogUpdates(liveBlogId, page, limit),
     enabled: !!liveBlogId,
+    refetchInterval: 10000, // Poll every 10 seconds as fallback
   });
 }