update curl api

front_end/src/components/edt_coach.tsx

@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { coachService } from "../api";
+
+export default function EdtCoach() {
+  const [name, setName] = useState("");
+  const [error, setError] = useState("");
+  const [statusCode, setStatusCode] = useState<number | null>(null);
+
+  const handleCreate = async () => {
+    try {
+      const response = await coachService.create({ name });
+      console.log("Success:", response.status, response.data);
+      alert(`Coach created! Status: ${response.status}`);
+      setError("");
+      setStatusCode(response.status);
+    } catch (err: any) {
+      if (err.response) {
+        // This is the HTTP response from the server
+        console.error("HTTP status:", err.response.status);
+        console.error("Response data:", err.response.data);
+        setError(`Failed to create coach: ${err.response.data}`);
+        setStatusCode(err.response.status);
+      } else if (err.request) {
+        console.error("No response received", err.request);
+        setError("No response from server!");
+        setStatusCode(null);
+      } else {
+        console.error("Error", err.message);
+        setError(err.message);
+        setStatusCode(null);
+      }
+    }
+  };
+
+  return (
+    <div>
+      <h2>Create Coach</h2>
+      <input
+        type="text"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        placeholder="Coach name"
+      />
+      <button onClick={handleCreate}>Create</button>
+
+      {error && <p style={{ color: "red" }}>{error}</p>}
+      {statusCode && <p>HTTP Status: {statusCode}</p>}
+    </div>
+  );
+}