Sidebar split into smaller components

1 files changed, 26 insertions, 208 deletions

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 2e66865..8bd795b 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,116 +1,27 @@
-import {
-    useState,
-    type ChangeEvent,
-    type Dispatch,
-    type SetStateAction,
-} from "react";
-import "../styles/Button.css";
-import "../styles/Sidebar.css";
-import type { ErrorResponse } from "../types/error";
-import type { CreateRobotResponse, Robot } from "../types/robot";
-
-type ExpandedRobotsState = Record<number, boolean>;
+import { useState, type Dispatch, type SetStateAction } from "react";
+import API_URL from "../config";
+import "../styles/button.css";
+import "../styles/sidebar.css";
+import type { Robot } from "../types/robot";
+import AddRobotForm from "./AddRobotForm";
+import RobotList from "./RobotList";
+import SimulationActions from "./SimulationActions";
 
 type Props = {
-    activeSimulation: boolean;
     errorMessage: string;
-    setErrorMessage: Dispatch<SetStateAction<string>>;
-    token: string | null;
     robots: Robot[];
-    onStartAllRobots: () => Promise<void>;
-    onStopAllRobots: () => Promise<void>;
+    token: string | null;
+    setErrorMessage: Dispatch<SetStateAction<string>>;
 };
 
-const API_URL = import.meta.env.VITE_API_URL;
-
-function Sidebar({
-    activeSimulation,
-    errorMessage,
-    setErrorMessage,
-    token,
-    robots,
-    onStartAllRobots,
-    onStopAllRobots,
-}: Props) {
-    const [expandedRobots, setExpandedRobots] = useState<ExpandedRobotsState>(
-        {}
-    );
+function Sidebar({ errorMessage, robots, token, setErrorMessage }: Props) {
     const [isAddingRobot, setIsAddingRobot] = useState(false);
-    const [newRobotName, setNewRobotName] = useState("");
-    const [isSubmitting, setIsSubmitting] = useState(false);
-
-    function toggleRobotHistory(robotId: number) {
-        setExpandedRobots((prev) => ({
-            ...prev,
-            [robotId]: !prev[robotId],
-        }));
-    }
 
     function handleAddClick() {
         setIsAddingRobot(true);
-        setNewRobotName("");
         setErrorMessage("");
     }
 
-    function handleCancel() {
-        setIsAddingRobot(false);
-        setNewRobotName("");
-        setErrorMessage("");
-    }
-
-    async function handleSubmit() {
-        if (!newRobotName.trim()) {
-            setErrorMessage("Please enter a name for the robot.");
-            return;
-        }
-
-        setIsSubmitting(true);
-        setErrorMessage("");
-
-        try {
-            const response = await fetch(`${API_URL}/robots`, {
-                method: "POST",
-                headers: {
-                    Authorization: `Bearer ${token}`,
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify({ name: newRobotName.trim() }),
-            });
-
-            if (!response.ok) {
-                const errorData: ErrorResponse = await response.json();
-                throw new Error(
-                    errorData.message ||
-                        `Error creating the new robot: ${response.status}`
-                );
-            }
-
-            const data: CreateRobotResponse = await response.json();
-            console.log("Robot created successfully: ", data);
-
-            // Reset form and close input field
-            setNewRobotName("");
-            setIsAddingRobot(false);
-        } catch (error) {
-            console.error("Error creating the new robot:", error);
-
-            if (error instanceof Error) {
-                setErrorMessage(error.message);
-            } else {
-                setErrorMessage("Error creating the new robot.");
-            }
-        } finally {
-            setIsSubmitting(false);
-        }
-    }
-
-    function handleInputChange(event: ChangeEvent<HTMLInputElement>) {
-        setNewRobotName(event.target.value);
-        if (errorMessage) {
-            setErrorMessage("");
-        }
-    }
-
     return (
         <div className="sidebar">
             <div className="sidebar-robots-header">
@@ -120,124 +31,31 @@ function Sidebar({
                     onClick={handleAddClick}
                     disabled={isAddingRobot}
                 >
-                    + Neu
+                    + Add
                 </button>
             </div>
 
-            {isAddingRobot && (
-                <div className="add-robot-form">
-                    <input
-                        type="text"
-                        placeholder="Robot name..."
-                        value={newRobotName}
-                        onChange={handleInputChange}
-                        disabled={isSubmitting}
-                        autoFocus
-                    />
-                    <div className="add-robot-actions">
-                        <button
-                            className="btn btn-start"
-                            onClick={handleSubmit}
-                            disabled={isSubmitting}
-                        >
-                            {isSubmitting ? "Creating..." : "Create"}
-                        </button>
-                        <button
-                            className="btn btn-stop"
-                            onClick={handleCancel}
-                            disabled={isSubmitting}
-                        >
-                            Cancel
-                        </button>
-                    </div>
-                </div>
+           {isAddingRobot && (
+                <AddRobotForm
+                    apiUrl={API_URL}
+                    errorMessage={errorMessage}
+                    token={token}
+                    setErrorMessage={setErrorMessage}
+                    setIsAddingRobot={setIsAddingRobot}
+                />
             )}
 
             {errorMessage && (
                 <div className="error-message">{errorMessage}</div>
             )}
 
-            <div className="simulation-actions">
-                <button
-                    className="btn btn-start"
-                    onClick={onStartAllRobots}
-                    disabled={activeSimulation}
-                >
-                    Start simulation
-                </button>
-
-                <button
-                    className="btn btn-stop"
-                    onClick={onStopAllRobots}
-                    disabled={!activeSimulation}
-                >
-                    Stop simulation
-                </button>
-            </div>
-
-            <ul className="sidebar-robot-list">
-                {robots.map((robot) => {
-                    const isExpanded = expandedRobots[robot.id];
-
-                    return (
-                        <li key={robot.id}>
-                            <p className="robot-name">{robot.name}</p>
-
-                            <p>
-                                Status:{" "}
-                                <span
-                                    className={`robot-status-${robot.status}`}
-                                >
-                                    {robot.status}
-                                </span>
-                            </p>
-
-                            <p className="robot-coordinates-label">Position:</p>
-                            <ul className="robot-coordinates">
-                                <li>Lat: {robot.lat}</li>
-                                <li>Lon: {robot.lon}</li>
-                            </ul>
-
-                            <button
-                                className="btn btn-robot-history-toggle"
-                                onClick={() => toggleRobotHistory(robot.id)}
-                                aria-expanded={isExpanded}
-                            >
-                                Position history
-                                <span
-                                    className={`arrow ${
-                                        isExpanded ? "open" : ""
-                                    }`}
-                                >
-                                    ▾
-                                </span>
-                            </button>
+            <SimulationActions
+                apiUrl={API_URL}
+                token={token}
+                setErrorMessage={setErrorMessage}
+            />
 
-                            <div
-                                className={`robot-history ${
-                                    isExpanded ? "expanded" : ""
-                                }`}
-                            >
-                                <ul>
-                                    {robot.robot_positions?.length ? (
-                                        robot.robot_positions.map(
-                                            (pos, index) => (
-                                                <li key={index}>
-                                                    {`Lat: ${pos.lat}, Lon: ${pos.lon}`}
-                                                </li>
-                                            )
-                                        )
-                                    ) : (
-                                        <li className="robot-history-empty">
-                                            No previous positions.
-                                        </li>
-                                    )}
-                                </ul>
-                            </div>
-                        </li>
-                    );
-                })}
-            </ul>
+            <RobotList robots={robots} />
         </div>
     );
 }