Componente: PostForm

Formulario reutilizable para crear o editar publicaciones. Usa React Hook Form y NextUI para manejar validación, renderizado y control de errores.

Props

Prop Tipo Descripción
title string Título del formulario. Por defecto: "Create New Post"
description string Descripción precargada (modo edición). Opcional.
image string URL de imagen precargada (modo edición). Opcional.
action function Función a ejecutar al enviar el formulario. Debe ser async.

Validaciones

Image URL

  • Requerida.
  • Debe tener formato válido (http, https o ftp).

Description

  • Requerida.
  • Mínimo 8 caracteres.

Estado interno

Estado Tipo Uso
isLoading boolean Indica si el formulario está enviando datos.
prevImage string Guarda la URL anterior para saber si se debe limpiar error.
prevDesc string Guarda la descripción anterior por la misma razón.

Detalles clave

  • Usa react-hook-form + Controller para control estricto de campos.
  • El componente recibe la función action y le pasa los datos del formulario junto con el setError de React Hook Form, para errores personalizados desde el servidor.
  • Validaciones de errores se eliminan automáticamente cuando el usuario modifica los valores.

Vista renderizada

  • Un Card con:

  • Input para URL de imagen.

  • Textarea para descripción.
  • Vista previa de imagen (<ImagePreview />).
  • Botón Submit con estado de carga.

Dependencias

  • react-hook-form
  • @nextui-org/react
  • ImagePreview (componente auxiliar para mostrar la imagen cargada)