feat: refactor CursosManual component to use react-hook-form for form handling and add competencia management

diplomas/src/pages/cursosManual.jsx

@@ -1,88 +1,209 @@
 import React, { useState } from "react";
-import { supabaseClient } from "@/utils/supabase";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { cursosSchema } from "@/schemas/CursosSchema";
 import Layout from "@/components/layout/Layout";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
-import {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-} from "@/components/ui/select";
+import { supabaseClient } from "@/utils/supabase"; // Importar el cliente de Supabase
 
 export default function CursosManual() {
-  const [nombre, setNombre] = useState("");
-  const [descripcion, setDescripcion] = useState("");
-  const [horas, setHoras] = useState("");
-  const [competencia, setCompetencia] = useState("");
+  const [addCompetencia, setAddCompetencia] = useState(false);
+  const [competenciasGuardadas, setCompetenciasGuardadas] = useState([]);
   const [loading, setLoading] = useState(false);
 
-  const manejarGuardar = async () => {
-    setLoading(true);
-    const { error } = await supabaseClient.from("curso").insert([
-      {
-        nombre,
-        descripcion,
-        horas,
-        competencias: [competencia], // si es una sola, usa string. Si son varias, un array.
-      },
-    ]);
-    setLoading(false);
+  const form = useForm({
+    resolver: zodResolver(cursosSchema),
+    defaultValues: {
+      nombre: "",
+      descripcion: "",
+      horas: 0,
+      nuevaCompetencia: "",
+    },
+  });
 
-    if (error) {
-      alert("Error al guardar: " + error.message);
-    } else {
-      alert("Curso guardado correctamente");
-      setNombre("");
-      setDescripcion("");
-      setHoras("");
-      setCompetencia("");
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    getValues,
+    formState: { errors },
+  } = form;
+
+  const handleAddCompetencia = () => {
+    setAddCompetencia(true);
+  };
+
+  const handleCancel = () => {
+    setAddCompetencia(false);
+    setValue("nuevaCompetencia", "");
+  };
+
+  const handleSaveCompetencia = (e) => {
+    e.preventDefault();
+    const nuevaCompetencia = getValues("nuevaCompetencia");
+    if (nuevaCompetencia.trim() !== "") {
+      setCompetenciasGuardadas([
+        ...competenciasGuardadas,
+        nuevaCompetencia.trim(),
+      ]);
+      handleCancel();
+    }
+  };
+
+  const handleDeleteCompetencia = (index) => {
+    setCompetenciasGuardadas(
+      competenciasGuardadas.filter((_, i) => i !== index)
+    );
+  };
+
+  const onSubmit = async (data) => {
+    const { nombre, descripcion } = data;
+    const horas = parseInt(data.horas, 10); // Convertir horas a número
+    const competencias = competenciasGuardadas;
+
+    setLoading(true); // Mostrar estado de carga
+
+    try {
+      const { error } = await supabaseClient.from("curso").insert([
+        {
+          nombre,
+          descripcion,
+          horas,
+          competencias, // Guardar competencias como array
+        },
+      ]);
+
+      if (error) {
+        console.error("Error al guardar en Supabase:", error.message);
+        alert("Error al guardar el curso: " + error.message);
+      } else {
+        alert("Curso guardado exitosamente");
+        form.reset(); // Reiniciar el formulario
+        setCompetenciasGuardadas([]); // Limpiar competencias guardadas
+      }
+    } catch (err) {
+      console.error("Error inesperado:", err);
+      alert("Ocurrió un error inesperado");
+    } finally {
+      setLoading(false); // Ocultar estado de carga
     }
   };
 
   return (
     <Layout>
       <div className="w-[60vw] pt-10 flex flex-col items-end justify-center">
-        <div className="bg-white p-8 font-sans text-center w-[70%]">
+        <div className="bg-white p-8 font-sans text-center w-[70%] flex flex-col items-center">
           <h1 className="text-xl font-semibold mb-4 text-black">Nuevo curso</h1>
-          <Input
-            type="text"
-            placeholder="Nombre del curso"
-            value={nombre}
-            onChange={(e) => setNombre(e.target.value)}
-            className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
-          />
-          <Textarea
-            placeholder="Descripción"
-            value={descripcion}
-            onChange={(e) => setDescripcion(e.target.value)}
-            className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 h-24 text-black"
-          />
-          <Input
-            type="number"
-            placeholder="Horas del curso"
-            value={horas}
-            onChange={(e) => setHoras(e.target.value)}
-            className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
-          />
-          <Select onValueChange={(value) => setCompetencia(value)}>
-            <SelectTrigger className="w-full px-3 py-2 border border-gray-300 rounded-md mb-4 text-black">
-              <SelectValue placeholder="Competencia" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="competencia1">Competencia 1</SelectItem>
-              <SelectItem value="competencia2">Competencia 2</SelectItem>
-            </SelectContent>
-          </Select>
-          <Button
-            onClick={manejarGuardar}
-            className="bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-md text-black"
-            disabled={loading}
-          >
-            {loading ? "Guardando..." : "Guardar"}
-          </Button>
+          <form onSubmit={handleSubmit(onSubmit)} className="w-full">
+            <Input
+              type="text"
+              placeholder="Nombre del curso"
+              {...register("nombre")}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
+            />
+            {errors.nombre && (
+              <p className="text-red-500 text-sm">{errors.nombre.message}</p>
+            )}
+
+            <Textarea
+              placeholder="Descripción"
+              {...register("descripcion")}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 h-24 text-black"
+            />
+            {errors.descripcion && (
+              <p className="text-red-500 text-sm">
+                {errors.descripcion.message}
+              </p>
+            )}
+
+            <Input
+              type="number"
+              placeholder="Horas del curso"
+              {...register("horas", { valueAsNumber: true })}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
+            />
+            {errors.horas && (
+              <p className="text-red-500 text-sm">{errors.horas.message}</p>
+            )}
+
+            <h2 className="text-lg font-semibold mb-3 text-black">
+              Competencias
+            </h2>
+
+            {competenciasGuardadas.length > 0 && (
+              <div className="mt-5 w-full flex-wrap">
+                {competenciasGuardadas.map((competencia, index) => (
+                  <div
+                    key={index}
+                    className="w-full flex justify-between items-center px-2 mb-2"
+                  >
+                    <span className="text-black">{competencia}</span>
+                    <Button
+                      type="button"
+                      onClick={() => handleDeleteCompetencia(index)}
+                      className="bg-red-400 hover:bg-red-500 text-white font-bold py-1 px-3 rounded-md"
+                    >
+                      X
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {addCompetencia && (
+              <div className="w-full flex flex-col md:flex-row mt-5">
+                <div className="flex flex-col">
+                  <Input
+                    type="text"
+                    placeholder="Nueva competencia"
+                    {...register("nuevaCompetencia")}
+                    className="w-80 px-3 py-2 border border-gray-300 rounded-md mb-3 text-black"
+                  />
+                  {errors.nuevaCompetencia && (
+                    <p className="text-red-500 text-sm">
+                      {errors.nuevaCompetencia.message}
+                    </p>
+                  )}
+                </div>
+                <div className="flex flex-row">
+                  <Button
+                    type="button"
+                    onClick={handleSaveCompetencia}
+                    className="bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-md mr-2"
+                  >
+                    Guardar
+                  </Button>
+                  <Button
+                    type="button"
+                    onClick={handleCancel}
+                    className="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-md"
+                  >
+                    Cancelar
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            <Button
+              type="button"
+              onClick={handleAddCompetencia}
+              className="w-full bg-blue-400 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded-md mt-5"
+            >
+              Agregar competencia
+            </Button>
+
+            <div className="flex justify-center w-full mt-5">
+              <Button
+                type="submit"
+                className="bg-green-400 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-md"
+                disabled={loading}
+              >
+                {loading ? "Guardando..." : "Guardar curso"}
+              </Button>
+            </div>
+          </form>
         </div>
       </div>
     </Layout>

diplomas/src/schemas/CursosSchema.js

@@ -6,8 +6,8 @@ export const cursosSchema = z.object({
     .nonempty("Escribe el nombre del curso")
     .regex(/^[\p{L}\s]+$/u, "Solo se permiten letras en el nombre"),
   descripcion: z.string().nonempty("Escribe una descripción"),
-  horas: z.number().positive("Las horas deben ser un número positivo"),
-  competencias: z
+  horas: z.number().positive("Las horas deben ser un número positivo").int(),
+  nuevaCompetencia: z
     .string()
     .nonempty("Escribe las competencias")
     .regex(/^[\p{L}\s]+$/u, "Solo se permiten letras en las competencias"),