Acciones de Formulario - Conecta funciones async a formularios con pending y error state integrados

"use client";
 
import { useActionState } from "react";
import { useFormStatus } from "react-dom";
 
async function subscribe(_prev: string, formData: FormData): Promise<string> {
  const email = formData.get("email") as string;
  const res = await fetch("/api/subscribe", {
    method: "POST",
    body: JSON.stringify({ email }),
  });
  if (!res.ok) return "Algo salió mal.";
  return "¡Suscrito!";
}
 
function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Suscribiendo..." : "Suscribirse"}
    </button>
  );
}
 
export default function NewsletterForm() {
  const [message, formAction, isPending] = useActionState(subscribe, "");
 
  return (
    <form action={formAction}>
      <input name="email" type="email" required placeholder="you@example.com" />
      <SubmitButton />
      {message && <p>{message}</p>}
    </form>
  );
}

// Un formulario de contacto con validación, visualización de errores y mejora progresiva
"use client";
 
import { useActionState } from "react";
import { useFormStatus } from "react-dom";
 
type FormState = {
  success: boolean;
  errors: Record<string, string>;
  message: string;
};
 
const initialState: FormState = {
  success: false,
  errors: {},
  message: "",
};
 
async function submitContact(_prev: FormState, formData: FormData): Promise<FormState> {
  const name = formData.get("name") as string;
  const email = formData.get("email") as string;
  const body = formData.get("body") as string;
 
  // Validación del lado del cliente
  const errors: Record<string, string> = {};
  if (!name || name.length < 2) errors.name = "El nombre debe tener al menos 2 caracteres.";
  if (!email || !email.includes("@")) errors.email = "Por favor ingresa un email válido.";
  if (!body || body.length < 10) errors.body = "El mensaje debe tener al menos 10 caracteres.";
 
  if (Object.keys(errors).length > 0) {
    return { success: false, errors, message: "Por favor corrige los errores abajo." };
  }
 
  try {
    const res = await fetch("/api/contact", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name, email, body }),
    });
 
    if (!res.ok) throw new Error("Error del servidor");
 
    return { success: true, errors: {}, message: "¡Mensaje enviado! Nos pondremos en contacto." };
  } catch {
    return { success: false, errors: {}, message: "Falló el envío. Por favor intenta de nuevo." };
  }
}
 
function FieldError({ error }: { error?: string }) {
  if (!error) return null;
  return <p className="text-red-500 text-sm mt-1">{error}</p>;
}
 
function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button
      type="submit"
      disabled={pending}
      className="bg-blue-600 text-white px-4 py-2 rounded disabled:opacity-50"
    >
      {pending ? "Enviando..." : "Enviar Mensaje"}
    </button>
  );
}
 
export default function ContactForm() {
  const [state, formAction, isPending] = useActionState(submitContact, initialState);
 
  return (
    <form action={formAction} className="space-y-4 max-w-md">
      <div>
        <label htmlFor="name">Nombre</label>
        <input id="name" name="name" className="border w-full p-2 rounded" />
        <FieldError error={state.errors.name} />
      </div>
 
      <div>
        <label htmlFor="email">Email</label>
        <input id="email" name="email" type="email" className="border w-full p-2 rounded" />
        <FieldError error={state.errors.email} />
      </div>
 
      <div>
        <label htmlFor="body">Mensaje</label>
        <textarea id="body" name="body" rows={4} className="border w-full p-2 rounded" />
        <FieldError error={state.errors.body} />
      </div>
 
      <SubmitButton />
 
      {state.message && (
        <p className={state.success ? "text-green-600" : "text-red-600"}>
          {state.message}
        </p>
      )}
    </form>
  );
}

"use client";
 
import { useActionState } from "react";
 
export default function ItemForm() {
  const [saveResult, saveAction] = useActionState(saveItem, null);
  const [deleteResult, deleteAction] = useActionState(deleteItem, null);
 
  return (
    <form>
      <input name="name" />
      <button formAction={saveAction}>Guardar</button>
      <button formAction={deleteAction}>Eliminar</button>
    </form>
  );
}

"use client";
 
import { useFormStatus } from "react-dom";
 
export function FormProgress() {
  const { pending, data } = useFormStatus();
 
  if (!pending) return null;
 
  return (
    <div className="fixed top-0 left-0 w-full h-1 bg-blue-500 animate-pulse" />
  );
}
 
// Usa dentro de cualquier formulario
<form action={myAction}>
  <FormProgress />
  {/* ... fields ... */}
</form>

"use client";
 
import { useActionState, useRef, useEffect } from "react";
 
export default function ResetableForm() {
  const [state, formAction, isPending] = useActionState(submitData, { success: false });
  const formRef = useRef<HTMLFormElement>(null);
 
  useEffect(() => {
    if (state.success) {
      formRef.current?.reset();
    }
  }, [state]);
 
  return (
    <form ref={formRef} action={formAction}>
      <input name="item" required />
      <button type="submit" disabled={isPending}>Agregar</button>
    </form>
  );
}