fix: Keep the conencted robots in a global list

ref: N25B-142

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>
   )