From 82f6b4eebe74bd836bc07f42463698acfbd91a1b Mon Sep 17 00:00:00 2001
From: Tomas Mirchev <contact@tomastm.com>
Date: Tue, 1 Jul 2025 14:00:45 +0000
Subject: [PATCH] add view socket

---
 reader/src/ViewPage.jsx     | 14 +++++++++++++-
 resource-provider/server.js |  8 ++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/reader/src/ViewPage.jsx b/reader/src/ViewPage.jsx
index 61b9880..0867b2d 100644
--- a/reader/src/ViewPage.jsx
+++ b/reader/src/ViewPage.jsx
@@ -58,9 +58,18 @@ export function ViewPage() {
       setSelectedOptionId(null);
       setSelectedIdx(0);
     });
+    socket.on("selectedOptionChanged", (newId) => {
+      setSelectedOptionId(newId);
+    });
+    socket.on("lookingAtIdxChanged", (newIdx) => {
+      setSelectedIdx(newIdx);
+    });
 
     return () => {
       socket.off("connect");
+      socket.off("dataChanged");
+      socket.off("selectedOptionChanged");
+      socket.off("lookingAtIdxChanged");
       socket.off("disconnect");
     };
   }, []);
@@ -159,7 +168,10 @@ export function ViewPage() {
         {options.map((option, optionIdx) => (
           <button
             key={option.id}
-            onClick={() => setSelectedIdx(optionIdx)}
+            onClick={() => {
+              setSelectedIdx(optionIdx);
+              socket.emit("setLookingAtIdx", optionIdx);
+            }}
             className={`flex-1 border-r border-gray-200 text-sm px-4 py-2 hover:bg-blue-200 cursor-pointer flex align-center justify-center ${optionIdx === selectedIdx ? "bg-gray-300" : ""}`}
           >
             {option.title}
diff --git a/resource-provider/server.js b/resource-provider/server.js
index f80fab5..ef710a9 100644
--- a/resource-provider/server.js
+++ b/resource-provider/server.js
@@ -60,6 +60,7 @@ app.use(morgan("tiny"));
 // Global
 let data = null;
 let selectedOptionId = null;
+let lookingAtIdx = 0;
 
 // Socket connection handling
 io.on("connection", (socket) => {
@@ -67,6 +68,7 @@ io.on("connection", (socket) => {
 
   socket.emit("dataChanged", data);
   socket.emit("selectedOptionChanged", selectedOptionId);
+  socket.emit("lookingAtIdxChanged", lookingAtIdx);
 
   // Handle array updates from client
   socket.on("setData", (newData) => {
@@ -81,6 +83,12 @@ io.on("connection", (socket) => {
     io.emit("selectedOptionChanged", newId);
   });
 
+  socket.on("setLookingAtIdx", (newIdx) => {
+    lookingAtIdx = 0;
+    console.log("Looking at id changed to ", newIdx);
+    io.emit("lookingAtIdxChanged", newIdx);
+  });
+
   socket.on("disconnect", () => {
     console.log("Client disconnected:", socket.id);
   });