Refactor code structure for improved readability and maintainability

Author: th33k

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

@@ -47,6 +47,7 @@ export function FloorDisplay({ floor, announcements: initialAnnouncements }: Pro
   const [rooms, setRooms] = useState(floor.rooms);
   const [announcements, setAnnouncements] = useState(initialAnnouncements);
   const [connected, setConnected] = useState(false);
+  const [lastUpdate, setLastUpdate] = useState(Date.now());
 
   // Live clock
   useEffect(() => {
@@ -77,8 +78,9 @@ export function FloorDisplay({ floor, announcements: initialAnnouncements }: Pro
           }))
         );
       }
-    } catch {
-      // Silent fail — next event will retry
+      setLastUpdate(Date.now());
+    } catch (e) {
+      console.warn("[display] refresh failed:", e);
     }
   }, [floor.id]);
 
@@ -87,16 +89,33 @@ export function FloorDisplay({ floor, announcements: initialAnnouncements }: Pro
     const socket: Socket = io({ path: "/api/socketio" });
 
     socket.on("connect", () => {
+      console.log(`[display] connected on socket ${socket.id}`);
       setConnected(true);
       socket.emit("join:floor", { floorId: floor.id });
       refreshData(); // Catch any updates missed while disconnected
     });
 
-    socket.on("disconnect", () => setConnected(false));
+    socket.on("disconnect", () => {
+      console.log("[display] disconnected from server");
+      setConnected(false);
+    });
 
-    socket.on("announcement:update", refreshData);
-    socket.on("schedule:update", refreshData);
-    socket.on("display:refresh", refreshData);
+    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");
+      refreshData();
+    });
+
+    socket.on("connect_error", (err) => {
+      console.error("[display] socket connection error:", err);
+    });
 
     // Send heartbeat every 30s so server knows this node is alive
     const heartbeat = setInterval(() => {
@@ -111,11 +130,17 @@ export function FloorDisplay({ floor, announcements: initialAnnouncements }: Pro
     };
   }, [floor.id, refreshData]);
 
-  // Auto-refresh every 5 minutes as fallback
+  // Fallback refresh every 30s to ensure display updates even if socket fails
   useEffect(() => {
-    const timer = setInterval(refreshData, 5 * 60 * 1000);
+    const timer = setInterval(() => {
+      const timeSinceLastUpdate = Date.now() - lastUpdate;
+      if (timeSinceLastUpdate > 25_000) {
+        console.log("[display] fallback refresh (no socket event for 25s)");
+        refreshData();
+      }
+    }, 10_000); // Check every 10s
     return () => clearInterval(timer);
-  }, [refreshData]);
+  }, [refreshData, lastUpdate]);
 
   const now = time.getTime();