Sidebar split into smaller components

1 files changed, 121 insertions, 0 deletions

diff --git a/frontend/src/components/AddRobotForm.tsx b/frontend/src/components/AddRobotForm.tsx
new file mode 100644
index 0000000..c178657
--- /dev/null
+++ b/frontend/src/components/AddRobotForm.tsx
@@ -0,0 +1,121 @@
+import {
+    useState,
+    type ChangeEvent,
+    type Dispatch,
+    type SetStateAction,
+} from "react";
+import type { ErrorResponse } from "../types/error";
+import type { CreateRobotResponse } from "../types/robot";
+
+type Props = {
+    apiUrl: string;
+    errorMessage: string;
+    token: string | null;
+    setErrorMessage: Dispatch<SetStateAction<string>>;
+    setIsAddingRobot: Dispatch<SetStateAction<boolean>>;
+};
+
+function AddRobotForm({
+    apiUrl,
+    errorMessage,
+    token,
+    setErrorMessage,
+    setIsAddingRobot,
+}: Props) {
+    const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+    const [newRobotName, setNewRobotName] = useState<string>("");
+
+    // Cancel robot creation
+    function handleCancel() {
+        setIsAddingRobot(false);
+        setNewRobotName("");
+        setErrorMessage("");
+    }
+
+    function handleInputChange(event: ChangeEvent<HTMLInputElement>) {
+        if (errorMessage) {
+            setErrorMessage("");
+        }
+
+        setNewRobotName(event.target.value);
+    }
+
+    // Create new robot
+    async function handleSubmit() {
+        if (!newRobotName.trim()) {
+            setErrorMessage("Please enter a name for the robot.");
+            return;
+        }
+
+        setIsSubmitting(true);
+        setErrorMessage("");
+
+        try {
+            const response = await fetch(`${apiUrl}/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);
+        }
+    }
+
+    return (
+        <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>
+    );
+}
+
+export default AddRobotForm;
+