From ec4f45b984528a4dde896486cf00fb132e16a903 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Otgaar?= <b.r.c.otgaar@students.uu.nl>
Date: Wed, 8 Oct 2025 12:40:01 +0200
Subject: [PATCH] fix: Keep the conencted robots in a global list

ref: N25B-142
---
 src/App.tsx                                   | 23 +++++++++++++++++--
 src/pages/ConnectedRobots/ConnectedRobots.tsx | 13 ++++++++---
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index fe6a9ad..eff9667 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,5 @@
 import { Routes, Route, Link } from 'react-router'
+import { useState, useEffect } from 'react'
 import './App.css'
 import TemplatePage from './pages/TemplatePage/Template.tsx'
 import Home from './pages/Home/Home.tsx'
@@ -8,7 +9,16 @@ import Logging from './pages/Logging/Logging.tsx'
 import VisProg from "./pages/VisProgPage/VisProg.tsx";
 
 function App(){
-  
+
+  // Define what our conencted robot should include
+  type Robot = {
+  id: string;
+  name: string;
+  port: number;
+  }; 
+
+  const [connectedRobots, setConnectedRobots] = useState<Robot[]>([]);
+
   return (
     <div>
       {/* Should not use inline styles like this */}
@@ -19,7 +29,16 @@ function App(){
         <Route path="/ServerComms" element = {<ServerComms />} />
         <Route path="/visprog" element={<VisProg />} />
         <Route path="/logging" element = {<Logging />} />
-        <Route path="/ConnectedRobots" element = {<ConnectedRobots />} />
+        <Route
+          path="/ConnectedRobots"
+          // Pass the useState to the page to update from there
+          element={
+            <ConnectedRobots
+               connectedRobots={connectedRobots}
+               setConnectedRobots={setConnectedRobots}
+             />
+            }
+        />
       </Routes>
     </div>
   )
diff --git a/src/pages/ConnectedRobots/ConnectedRobots.tsx b/src/pages/ConnectedRobots/ConnectedRobots.tsx
index 148cfbe..cd88158 100644
--- a/src/pages/ConnectedRobots/ConnectedRobots.tsx
+++ b/src/pages/ConnectedRobots/ConnectedRobots.tsx
@@ -8,15 +8,22 @@ type Robot = {
   port: number;
 };
 
-export default function ConnectedRobots() {
-  const [connectedRobots, setConnectedRobots] = useState<Robot[]>([]);
+// Define the expected arguments
+type ConnectedRobotsProps = {
+  connectedRobots: Robot[];
+  setConnectedRobots: React.Dispatch<React.SetStateAction<Robot[]>>;
+};
 
+export default function ConnectedRobots({
+  connectedRobots, setConnectedRobots}: ConnectedRobotsProps) {
+  
   useEffect(() => {
     const eventSource = new EventSource("http://localhost:8000/sse");
     eventSource.onmessage = (event) => {
       try {
+        console.log("message received :", event.data)
         const data = JSON.parse(event.data);
-
+        
         // Example: data = { event: "robot_connected", id: "pepper_robot1", name: "Pepper", port: 1234 }
         if (data.event === "robot_connected") {