src/App.tsx

@@ -1,5 +1,5 @@
 import { Routes, Route, Link } from 'react-router'
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import './App.css'
 import TemplatePage from './pages/TemplatePage/Template.tsx'
 import Home from './pages/Home/Home.tsx'
@@ -17,6 +17,7 @@ function App(){
   port: number;
   }; 
 
+  // (Acces to) the array of connected robots
   const [connectedRobots, setConnectedRobots] = useState<Robot[]>([]);
 
   return (

src/pages/ConnectedRobots/ConnectedRobots.tsx

@@ -1,5 +1,4 @@
-import { mergeAriaLabelConfig } from '@xyflow/system';
+import { useEffect } from 'react'
-import { useState, useEffect } from 'react'
 
 // Define the robot type
 type Robot = {
@@ -21,7 +20,6 @@ export default function ConnectedRobots({
     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 }
@@ -69,6 +67,7 @@ export default function ConnectedRobots({
         <h2>Connected Robots</h2>
         <ul>
           {connectedRobots.map(robot =>
+            // Map all the robots in an unordered list
             <li key={robot.id}>
               <strong>{robot.name}</strong> (ID: {robot.id}, Port: {robot.port === -1 ? "No given port" : robot.port})
             </li>
@@ -100,6 +99,7 @@ export default function ConnectedRobots({
               setConnectedRobots(robots => [...robots, randomConnectionDummy]);
           }}>'Sent connected event'</button>
           <button onClick={() => {
+            // Example disconnection bots
             const disconnection_dummies = [
               { id: "pepper_robot1" },
               { id: "pepper_robot2" },