Merge branch 'feat/monitoringpage-pim' into feat/monitoringpage

src/pages/MonitoringPage/MonitoringPageAPI.ts

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 const API_BASE = "http://localhost:8000/button_pressed"; // Change depending on Pims interup agent/ correct endpoint
 
 
@@ -62,3 +63,35 @@ export async function playExperiment(): Promise<void> {
   const context = "false"
   sendAPICall(type, context)
 }
+
+
+/**
+ * A hook that listens to the experiment stream and logs data to the console.
+ * It does not render anything.
+ */
+export function useExperimentLogger(onUpdate?: (data: any) => void) {
+  useEffect(() => {
+    const eventSource = new EventSource(`${API_BASE}`);
+
+    eventSource.onmessage = (event) => {
+      try {
+        const parsedData = JSON.parse(event.data);
+        if (onUpdate) {
+          console.log(event.data);
+          onUpdate(parsedData);
+        }
+      } catch (err) {
+        console.warn("Stream parse error:", err);
+      }
+    };
+
+    eventSource.onerror = (err) => {
+      console.error("SSE Connection Error:", err);
+      eventSource.close();
+    };
+
+    return () => {
+      eventSource.close();
+    };
+  }, [onUpdate]);
+}