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'
@@ -9,6 +10,15 @@ 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>
   )

src/pages/ConnectedRobots/ConnectedRobots.tsx

@@ -8,13 +8,20 @@ type Robot = {
   port: number;
 };
 
-export default function ConnectedRobots() {
+// Define the expected arguments
-  const [connectedRobots, setConnectedRobots] = useState<Robot[]>([]);
+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 }