add view socket

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}

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);
   });