src/pages/MonitoringPage/MonitoringPage.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styles from './MonitoringPage.module.css';
 import useProgramStore from "../../utils/programStore.ts";
+import { nextPhase } from ".//MonitoringPageAPI.ts"
 
 type Goal = { id?: string | number; description?: string; achieved?: boolean };
 type Trigger = { id?: string | number; label?: string ; achieved?: boolean };
@@ -13,6 +14,9 @@ const MonitoringPage: React.FC = () => {
   const getGoalsInPhase = useProgramStore((s) => s.getGoalsInPhase);
   const getTriggersInPhase = useProgramStore((s) => s.getTriggersInPhase);
 
+  // Can be used to block actions until feedback from CB.
+  const [loading, setLoading] = React.useState(false);
+
   const phaseIds = getPhaseIds();
   const [phaseIndex, setPhaseIndex] = React.useState(0);
 
@@ -26,6 +30,18 @@ const MonitoringPage: React.FC = () => {
   const triggers = getTriggersInPhase(phaseId) as Trigger[];
   const norms = getNormsInPhase(phaseId) as Norm[];
 
+  // Handle logic of 'next' button.
+  const handleNext = async () => {
+    try {
+      setLoading(true);
+      await nextPhase();
+    } catch (err) {
+      console.log("Monitoring Page could not advance to the next phase:")
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
   
   return (
     <div className={styles.dashboardContainer}>
@@ -47,7 +63,13 @@ const MonitoringPage: React.FC = () => {
           <h3>Experiment Controls</h3>
           <div className={styles.controlsButtons}>
             <button className={styles.pause}>▶</button>
-            <button className={styles.next}>⏭</button>
+            <button
+              className={styles.next}
+              onClick={handleNext}
+              disabled={loading}
+            >
+              ⏭
+            </button>
             <button className={styles.restartPhase}>↩</button>
             <button className={styles.restartExperiment}>⟲</button>
           </div>

src/pages/MonitoringPage/MonitoringPageAPI.ts

@@ -0,0 +1,19 @@
+const API_BASE = "http://localhost:8000/"; // Change depending on Pims interup agent/ correct endpoint
+
+
+/**
+ * Sends an API call to the CB for going to the next phase. 
+ * In case we can't go to the next phase, the function will throw an error.
+ */
+export async function nextPhase(): Promise<void> {
+  const res = await fetch(`${API_BASE}/experiment/next`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (!res.ok) {
+    throw new Error("Failed to advance to next phase");
+  }
+}