docs: create-and-check-documentation

src/pages/ConnectedRobots/ConnectedRobots.tsx

@@ -1,20 +1,35 @@
 import { useEffect, useState } from 'react'
 
+/**
+ * Displays the current connection status of a robot in real time.
+ *
+ * Opens an SSE connection to the backend (`/robot/ping_stream`) that emits
+ * simple boolean JSON messages (`true` or `false`). Updates automatically when
+ * the robot connects or disconnects.
+ *
+ * @returns A React element showing the current robot connection status.
+ */
 export default function ConnectedRobots() {
   
+  /**
+   * The current connection state:
+   * - `true`: Robot is connected.
+   * - `false`: Robot is not connected.
+   * - `null`: Connection status is unknown (initial check in progress).
+   */
   const [connected, setConnected] = useState<boolean | null>(null);
 
   useEffect(() => {
-    // We're excepting a stream of data like that looks like this: `data = False` or `data = True`
+    // Open a Server-Sent Events (SSE) connection to receive live ping updates.
+    // We're expecting a stream of data like that looks like this: `data = False` or `data = True`
     const eventSource = new EventSource("http://localhost:8000/robot/ping_stream");
     eventSource.onmessage = (event) => {
     
-      // Receive message and parse
+      // Expecting messages in JSON format: `true` or `false`
       console.log("received message:", event.data);
       try {
         const data = JSON.parse(event.data);
 
-        // Set connected to value.
         try {
           setConnected(data)
         }
@@ -26,6 +41,8 @@ export default function ConnectedRobots() {
         console.log("Ping message not in correct format:", event.data);
       }
     };
+
+    // Clean up the SSE connection when the component unmounts.
     return () => eventSource.close();
   }, []);