refactor: move all ZMQ to API

also removed a lot of logs to the console to avoid cluttering

ref: N25B-400

src/pages/MonitoringPage/Components.tsx

@@ -1,22 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import styles from './MonitoringPage.module.css';
-
+import { sendUserInterrupt } from './MonitoringPageAPI';
-/**
- * HELPER: Unified sender function
- */
-const sendUserInterrupt = async (type: string, context: string) => {
-  try {
-    const response = await fetch("http://localhost:8000/button_pressed", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({type, context}),
-    });
-    if (!response.ok) throw new Error("Backend response error");
-    console.log(`Interrupt Sent - Type: ${type}, Context: ${context}`);
-  } catch (err) {
-    console.error(`Failed to send interrupt:`, err);
-  }
-};
 
 // --- GESTURE COMPONENT ---
 export const GestureControls: React.FC = () => {
@@ -202,7 +186,8 @@ export const RobotConnected = () => {
       eventSource.onmessage = (event) => {
       
         // Expecting messages in JSON format: `true` or `false`
-        console.log("received message:", event.data);
+        //commented out this log as it clutters console logs, but might be useful to debug
+        //console.log("received message:", event.data);
         try {
           const data = JSON.parse(event.data);
   

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -109,12 +109,12 @@ const MonitoringPage: React.FC = () => {
       // payload.norms is typed on the union, so safe to use directly
       payload.norms.forEach((normUpdate) => {
         nextState[normUpdate.id] = normUpdate.active;
-        console.log(`Conditional norm ${normUpdate.id} set to active: ${normUpdate.active}`);
       });
 
       return nextState;
     });
-    console.log("Updated conditional norms state:", payload.norms);
+    //commented out to avoid cluttering
+    //console.log("Updated conditional norms state:", payload.norms);
   }
 }, [getPhaseIds, getGoalsInPhase, phaseIds, phaseIndex]);
 

src/pages/MonitoringPage/MonitoringPageAPI.ts

@@ -1,6 +1,24 @@
 import { useEffect } from 'react';
-const API_BASE_BP = "http://localhost:8000/button_pressed"; // Change depending on Pims interup agent/ correct endpoint
+
 const API_BASE = "http://localhost:8000";
+const API_BASE_BP = API_BASE + "/button_pressed"; //UserInterruptAgent endpoint
+
+/**
+ * HELPER: Unified sender function
+ */
+export const sendUserInterrupt = async (type: string, context: string) => {
+  try {
+    const response = await fetch(API_BASE_BP, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({type, context}),
+    });
+    if (!response.ok) throw new Error("Backend response error");
+    console.log(`Interrupt Sent - Type: ${type}, Context: ${context}`);
+  } catch (err) {
+    console.error(`Failed to send interrupt:`, err);
+  }
+};
 
 
 /**
@@ -76,8 +94,8 @@ export type CondNormsStateUpdate = { type: 'cond_norms_state_update'; norms: { i
 export type ExperimentStreamData = PhaseUpdate | GoalUpdate | TriggerUpdate | CondNormsStateUpdate | Record<string, unknown>;
 
 /**
- * A hook that listens to the experiment stream and logs data to the console.
+ * A hook that listens to the experiment stream that updates current state of the program
- * It does not render anything.
+ * via updates sent from the backend
  */
 export function useExperimentLogger(onUpdate?: (data: ExperimentStreamData) => void) {
   useEffect(() => {
@@ -87,19 +105,16 @@ export function useExperimentLogger(onUpdate?: (data: ExperimentStreamData) => v
       try {
         const parsedData = JSON.parse(event.data) as ExperimentStreamData;
         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();
     };