done!

src/components/tasks/task-form/task-form.jsx

@@ -1,3 +1,5 @@
+import { useState } from "react";
+import { addTask } from "../../../services/tasks-service";
 // TODO: tu trabajo empieza aqui.
 //
 // Necesitaras:
@@ -11,14 +13,79 @@
 //
 // Lee el README para mas detalle. Borra este placeholder cuando empieces.
 
-function TaskForm() {
+function TaskForm({ reloadTasks }) {
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [priority, setPriority] = useState("");
+  const [deadline, setDeadline] = useState("");
+  const [category, setCategory] = useState("");
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+
+    await addTask({ title, description, priority, deadline, category });
+
+    setTitle("");
+    setDescription("");
+    setPriority("");
+    setDeadline("");
+    setCategory("");
+
+    reloadTasks();
+  }
+
   return (
     <div className="card mb-3">
       <div className="card-body">
         <h5 className="card-title">New task</h5>
-        <p className="text-muted">
-          Maqueta aqui el formulario para crear una nueva tarea.
-        </p>
+        <p className="text-muted">  </p>
+          <form onSubmit={handleSubmit}>
+            <input
+              type="text"
+              value={title}
+              onChange={(event) => setTitle(event.target.value)}
+            ></input>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Description..."
+            ></textarea>
+            <select
+              value={priority}
+              onChange={(e) => setPriority(e.target.value)}
+            >
+              <option value="low" className="value">
+                Low
+              </option>
+              <option value="medium" className="value">
+                Medium
+              </option>
+              <option value="high" className="value">
+                High
+              </option>
+            </select>
+            <input
+              type="date"
+              value={deadline}
+              onChange={(e) => setDeadline(e.target.value)}
+            ></input>
+            <select
+              value={category}
+              onChange={(e) => setCategory(e.target.value)}
+            >
+              <option value="personal" className="value">
+                Personal
+              </option>
+              <option value="work" className="value">
+                Work
+              </option>
+              <option value="study" className="value">
+                Study
+              </option>
+            </select>
+            <button type="submit">SUBMIT</button>
+          </form>
+
       </div>
     </div>
   );