src/pages/ConnectedRobots/ConnectedRobots.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react'
+import Logging from '../Logging/Logging';
 
 // Define the robot type
 type Robot = {
@@ -14,7 +15,7 @@ type ConnectedRobotsProps = {
 };
 
 export default function ConnectedRobots({
-  connectedRobots, setConnectedRobots}: ConnectedRobotsProps) {
+  connectedRobots, setConnectedRobots }: ConnectedRobotsProps) {
 
   useEffect(() => {
     const eventSource = new EventSource("http://localhost:8000/sse");
@@ -27,7 +28,8 @@ export default function ConnectedRobots({
 
           // Safeguard id in request.
           if (data.id === null || data.id === undefined) {
-            console.log("Missing robot id in connection request.")
+            console.log(`Missing robot id in connection request.
+               Use format: 'data: {event = 'robot_connected', id = <id>, (optional) name = <name>, (optional) port = <port>}'.`)
             return () => eventSource.close();
           }
 
@@ -46,13 +48,23 @@ export default function ConnectedRobots({
         if (data.event === "robot_disconnected") {
           // Safeguard id in request.
           if (data.id === null || data.id === undefined) {
-            console.log("Missing robot id in connection request.")
+            console.log("Missing robot id in connection request. Use format: 'data: {event = 'robot_disconnected', id = <id>}'.");
             return () => eventSource.close();
           }
 
           // Filter out same ids (should only be one)
           setConnectedRobots(robots => robots.filter(robot => robot.id !== data.id));
         }
+        if (data.event === "robot_list") {
+          if (data.list === null || data.list === undefined) {
+            console.log("Missing list in robot_list request. Use format: 'data: {event = 'robot_list', list = <list>}'.");
+            return () => eventSource.close();
+          }
+
+          // Set the robot list to the one found in CB
+          setConnectedRobots(data.list);
+        }
+
       } catch {
         console.log("Unparsable SSE message:", event.data);
       }
@@ -77,8 +89,52 @@ export default function ConnectedRobots({
       <div className={"flex-col gap-lg"}>
         <div className={"flex-row gap-md justify-center"}>
           <button onClick={() => {
-            // Reload from CB database (other ticket)
+            // Let's test the reload function. 
-          }}>Reload from CB</button>
+            const example_list = [{ id: "pepper_robot1", name: "Pepper1", port: 1234 },
+            { id: "pepper_robot2", name: "Pepper2", port: 1235 },
+            { id: "pepper_robot3", name: "Pepper3", port: 1236 },
+            { id: "pepper_robot4", name: "Pepper4", port: 1237 }]
+
+            const example_event = `{
+                "event": "robot_list", "list":
+                [{      "id": "pepper_robot1",
+                        "name": "Pepper1",
+                        "port": 1234 },{
+                        
+                        "id": "pepper_robot2",
+                        "name": "Pepper2",
+                        "port": 1235 },{
+
+                        "id": "pepper_robot3",
+                        "name": "Pepper3",
+                        "port": 1236 }, {
+
+                        "id": "pepper_robot4",
+                        "name": "Pepper4",
+                        "port": 1237  }]}`
+
+            // Now let's put it through the same steps as the event would do. :)
+            try {
+              const data = JSON.parse(example_event);
+              if (data.event === "robot_list") {
+                if (data.list === null || data.list === undefined) {
+                  console.log("Missing list in robot_list request. Use format: 'data: {event = 'robot_list', list = <list>}'.");
+                  return;
+                }
+                // Check if it is as expected.
+                if (JSON.stringify(data.list) !== JSON.stringify(example_list)) {
+                  console.log("Dummy reload failed: list don't match.")
+                }
+                else {
+                  console.log("Dummy reload succes!!")
+                }
+              } else {
+                console.log("Dummy reload failed, didn't parse to 'data.event === 'robot_list'.'")
+              }
+            } catch {
+              console.log("Dummy reload failed: didnt parse correctly.")
+            }
+          }}>Dummy Reload from CB</button>
           <button onClick={() => {
             // Example dummy robots
             const connection_dummies: Robot[] = [
@@ -86,8 +142,8 @@ export default function ConnectedRobots({
               { id: "pepper_robot2", name: "Pepper Two", port: 8002 },
               { id: "naoqi_robot1", name: "Naoqi One", port: 9001 },
               { id: "naoqi_robot2", name: "Naoqi Two", port: 9002 },
-              { id: "noport1", name: "I dont have a port in my request >:)", port: -1},
+              { id: "noport1", name: "I dont have a port in my request >:)", port: -1 },
-              { id: "noname1", name: "no given name", port: 2001}
+              { id: "noname1", name: "no given name", port: 2001 }
             ];
             const randomIndex = Math.floor(Math.random() * connection_dummies.length);
             const randomConnectionDummy = connection_dummies[randomIndex];
@@ -105,8 +161,8 @@ export default function ConnectedRobots({
               { id: "pepper_robot2" },
               { id: "naoqi_robot1" },
               { id: "naoqi_robot2" },
-              { id: "noport1", name: "I dont have a port in my request >:)", port: -1},
+              { id: "noport1", name: "I dont have a port in my request >:)", port: -1 },
-              { id: "noname1", name: "no given name", port: 2001}
+              { id: "noname1", name: "no given name", port: 2001 }
             ];
             const randomIndex = Math.floor(Math.random() * disconnection_dummies.length);
             const randomDisconnectionDummy = disconnection_dummies[randomIndex];