update - clean

reader/src/App.jsx

@@ -19,6 +19,93 @@ import {
   VRuleIcon,
 } from "./icons/Icons";
 import ResourcePage from "./ResourcePage.jsx";
+import io from "socket.io-client";
+
+const socket = io("http://localhost:3000");
+
+const DIVIDER_AT = 16;
+
+function SocketTest() {
+  const [booleanArray, setBooleanArray] = useState(new Array(10).fill(false));
+  const [isConnected, setIsConnected] = useState(false);
+
+  useEffect(() => {
+    // Connection status
+    socket.on("connect", () => {
+      setIsConnected(true);
+      console.log("Connected to server");
+    });
+
+    socket.on("disconnect", () => {
+      setIsConnected(false);
+      console.log("Disconnected from server");
+    });
+
+    // Listen for array updates
+    socket.on("arrayChanged", (newArray) => {
+      setBooleanArray(newArray);
+    });
+
+    // Cleanup on unmount
+    return () => {
+      socket.off("connect");
+      socket.off("disconnect");
+      socket.off("arrayChanged");
+    };
+  }, []);
+
+  const toggleValue = (index) => {
+    const newValue = !booleanArray[index];
+
+    // Emit update to server
+    socket.emit("setArrayValue", { index, value: newValue });
+  };
+
+  const refreshArray = () => {
+    socket.emit("getArray");
+  };
+
+  return (
+    <div style={{ padding: "20px" }}>
+      <h1>Socket.IO Boolean Array</h1>
+
+      <div style={{ marginBottom: "20px" }}>
+        Status:{" "}
+        <span style={{ color: isConnected ? "green" : "red" }}>
+          {isConnected ? "Connected" : "Disconnected"}
+        </span>
+      </div>
+
+      <button onClick={refreshArray} style={{ marginBottom: "20px" }}>
+        Refresh Array
+      </button>
+
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 100px)", gap: "10px" }}>
+        {booleanArray.map((value, index) => (
+          <button
+            key={index}
+            onClick={() => toggleValue(index)}
+            style={{
+              padding: "20px",
+              backgroundColor: value ? "#4CAF50" : "#f44336",
+              color: "white",
+              border: "none",
+              borderRadius: "4px",
+              cursor: "pointer",
+            }}
+          >
+            {index}: {value.toString()}
+          </button>
+        ))}
+      </div>
+
+      <div style={{ marginTop: "20px" }}>
+        <h3>Current Array:</h3>
+        <pre>{JSON.stringify(booleanArray)}</pre>
+      </div>
+    </div>
+  );
+}
 
 export function App() {
   return (
@@ -36,6 +123,7 @@ export function App() {
           <Route path=":topicId" element={<FileReader />} />
         </Route>
         <Route path="/edit" element={<ResourcePage />} />
+        <Route path="/socket" element={<SocketTest />} />
       </Routes>
     </BrowserRouter>
   );
@@ -100,26 +188,31 @@ export function TopicListView() {
         className={`flex-1 overflow-y-scroll ${selectedTopic === null ? "pb-[92px]" : "pb-[156px]"}`}
       >
         {selectedSubject.topics.map((topic, topicIdx) => (
-          <Link
-            key={topic.id}
-            ref={(node) => {
-              itemRefs.current[topicIdx] = node;
-            }}
-            to={`/${topic.id}`}
-            onClick={() => selectTopic(topicIdx)}
-            className={`flex px-2 py-1 rounded-md cursor-pointer border-l-4 ${topic.id === selectedTopic?.id ? "bg-blue-100 border-blue-500" : "border-transparent hover:bg-gray-100"}`}
-          >
-            <div
-              className={`w-6 flex-shrink-0 flex font-medium justify-end ${topic.id === selectedTopic?.id ? "text-blue-600" : "text-blue-800"}`}
+          <>
+            {topicIdx === DIVIDER_AT && (
+              <hr className="my-4 border-t border-dotted border-gray-400" />
+            )}
+            <Link
+              key={topic.id}
+              ref={(node) => {
+                itemRefs.current[topicIdx] = node;
+              }}
+              to={`/${topic.id}`}
+              onClick={() => selectTopic(topicIdx)}
+              className={`flex px-2 py-1 rounded-md cursor-pointer border-l-4 ${topic.id === selectedTopic?.id ? "bg-blue-100 border-blue-500" : "border-transparent hover:bg-gray-100"}`}
             >
-              {topic.sequence}
-            </div>
-            <span
-              className={`ml-2 leading-5 ${topic.id === selectedTopic?.id ? "font-medium" : "font-normal"} ${config.wrapTopicTitles ? "truncate" : ""}`}
-            >
-              {topic.title}
-            </span>
-          </Link>
+              <div
+                className={`w-6 flex-shrink-0 flex font-medium justify-end ${topic.id === selectedTopic?.id ? "text-blue-600" : "text-blue-800"}`}
+              >
+                {topic.sequence}
+              </div>
+              <span
+                className={`ml-2 leading-5 ${topic.id === selectedTopic?.id ? "font-medium" : "font-normal"} ${config.wrapTopicTitles ? "truncate" : ""}`}
+              >
+                {topic.title}
+              </span>
+            </Link>
+          </>
         ))}
       </div>
       <div className="absolute bottom-0 sm:p-4 px-2 py-0 w-full flex flex-col">