Refactor code structure for improved readability and maintainability

Author: th33k

server/src/components/display/floor-display.tsx

@@ -86,41 +86,46 @@ export function FloorDisplay({ floor, announcements: initialAnnouncements }: Pro
 
   // WebSocket connection + heartbeat
   useEffect(() => {
-    const socket: Socket = io({ path: "/api/socketio" });
+    const socket: Socket = io({
+      path: "/api/socketio",
+      reconnectionDelay: 1000,
+      reconnectionDelayMax: 5000,
+      reconnectionAttempts: Infinity,
+    });
+
+    const onUpdate = () => {
+      console.log("[display] updating from socket event");
+      refreshData();
+    };
 
     socket.on("connect", () => {
-      console.log(`[display] connected on socket ${socket.id}`);
+      console.log(`[display] socket connected: ${socket.id}`);
       setConnected(true);
       socket.emit("join:floor", { floorId: floor.id });
-      refreshData(); // Catch any updates missed while disconnected
+      // Immediate refresh when reconnecting
+      refreshData();
     });
 
     socket.on("disconnect", () => {
-      console.log("[display] disconnected from server");
+      console.log("[display] socket disconnected");
       setConnected(false);
-    });
-
-    socket.on("announcement:update", () => {
-      console.log("[display] received announcement:update");
-      refreshData();
-    });
-    socket.on("schedule:update", () => {
-      console.log("[display] received schedule:update");
-      refreshData();
-    });
-    socket.on("display:refresh", () => {
-      console.log("[display] received display:refresh");
+      // Try to refresh immediately in case it's a temporary disconnect
       refreshData();
     });
 
+    socket.on("announcement:update", onUpdate);
+    socket.on("schedule:update", onUpdate);
+    socket.on("display:refresh", onUpdate);
+
     socket.on("connect_error", (err) => {
-      console.error("[display] socket connection error:", err);
+      console.warn("[display] socket error:", err.message);
     });
 
-    // Send heartbeat every 30s so server knows this node is alive
+    // Send heartbeat every 30s
     const heartbeat = setInterval(() => {
       if (socket.connected) {
         socket.emit("heartbeat", { floorId: floor.id });
+        console.log("[display] heartbeat sent");
       }
     }, 30_000);
 
@@ -130,15 +135,16 @@ export function FloorDisplay({ floor, announcements: initialAnnouncements }: Pro
     };
   }, [floor.id, refreshData]);
 
-  // Fallback refresh every 30s to ensure display updates even if socket fails
+  // Aggressive fallback: refresh every 10s if no recent update
   useEffect(() => {
     const timer = setInterval(() => {
       const timeSinceLastUpdate = Date.now() - lastUpdate;
-      if (timeSinceLastUpdate > 25_000) {
-        console.log("[display] fallback refresh (no socket event for 25s)");
+      // Refresh if >8 seconds since last successful update
+      if (timeSinceLastUpdate > 8_000) {
+        console.log(`[display] fallback refresh (${Math.round(timeSinceLastUpdate / 1000)}s since last update)`);
         refreshData();
       }
-    }, 10_000); // Check every 10s
+    }, 3_000); // Check every 3s (fast and lightweight)
     return () => clearInterval(timer);
   }, [refreshData, lastUpdate]);