Saltar a contenido

Products

ModalEditProduct.jsx

Componente modal para editar productos

Función

Permite editar los datos de un producto existente en un modal emergente.

Comportamiento

  • Carga los datos actuales del producto en el formulario.
  • Permite cambiar:
  • Imagen (con previsualización)
  • Nombre
  • Descripción
  • Precio
  • Categoría
  • Unidad de medida
  • Realiza validaciones básicas:
  • Campos obligatorios
  • Categoría válida
  • Unidad de medida válida
  • Al guardar:
  • Si la imagen es nueva → la sube a Cloudinary
  • Envía la actualización mediante updateProduct(product._id, updatedProduct)
  • Muestra mensajes de éxito o error con SweetAlert2

Props

Prop Tipo Descripción
product Object Producto que se va a editar
isOpen boolean Si el modal está abierto
onClose Function Función que cierra el modal

Estado interno

Estado Descripción
form Contiene los campos editables del producto
categories Lista de categorías disponibles
measureUnits Lista de unidades de medida disponibles
previewUrl Imagen en previsualización
isSubmitting Estado del envío del formulario

Servicios utilizados

  • updateProduct() (productService.js)
  • getCategories() (categoryService.js)
  • getMeasureUnits() (categoryService.js)
  • uploadImage() (helper / Cloudinary)

Librerías utilizadas

  • sweetalert2
  • lucide-react (ícono de imagen)
  • React hooks: useState, useEffect

ModalProductDetail.jsx

Componente modal de detalle de producto

Función

Muestra los detalles de un producto en un modal emergente y permite al usuario agregarlo al carrito de compras.

Comportamiento

  • Muestra:
  • Imagen del producto
  • Nombre
  • Descripción
  • Precio
  • Categoría
  • Campo para ingresar cantidad
  • Botón Agregar al carrito
  • Si la imagen falla al cargar → muestra imagen por defecto
  • Maneja éxito y errores con SweetAlert2

Props

Prop Tipo Descripción
product Object Producto que se va a mostrar
isOpen boolean Si el modal está abierto
onClose Function Función que cierra el modal

Estado interno

Estado Descripción
quantity Cantidad seleccionada por el usuario

Servicios utilizados

  • addToCart(product._id, quantity) (CartService.js)

Librerías utilizadas

  • sweetalert2
  • lucide-react (ícono XCircle)
  • React hooks: useState

Validaciones

  • No permite agregar si quantity es vacío o menor a 1.

ProductGrid.jsx

Componente de grilla de productos

Función

Muestra una cuadrícula de productos y permite:

  • Visualizar productos como tarjetas (ProductCard)
  • Al hacer click en un producto:
  • Si el usuario es seller: abre modal de edición (ModalEditProduct)
  • Si el usuario es cliente: abre modal de detalle (ModalProductDetail)

Props

Prop Tipo Descripción
products Array Lista de productos a mostrar
onProductModalClose Function (Opcional) Función que se ejecuta al cerrar un modal

Estado interno

Estado Descripción
selectedProduct Producto actualmente seleccionado
modalOpen Estado de apertura del modal

Lógica de rol

  • Obtiene el rol del usuario desde localStorage['role']
  • Si es seller, muestra ModalEditProduct
  • Si es cliente, muestra ModalProductDetail

Composición

Componente Función
ProductCard Renderiza cada tarjeta de producto
ModalEditProduct Modal para editar producto (seller)
ModalProductDetail Modal para agregar producto al carrito (cliente)

Librerías utilizadas

  • React hooks: useState, useMemo

ProductCreateModal.jsx

Componente modal para crear nuevo producto

Función

Permite a un usuario con rol seller crear un nuevo producto, con formulario completo.

Props

Prop Tipo Descripción
onClose Function Función que cierra el modal

Comportamiento

  • Carga lista de categorías y unidades de medida
  • Sube imagen a Cloudinary
  • Valida:
  • Todos los campos son obligatorios
  • Cantidad, stock y precio deben ser mayores a 0
  • Imagen obligatoria
  • Categoría y unidad válidas
  • Llama a createProductService()
  • Muestra alertas con SweetAlert2

Estado interno

Estado Descripción
form Objeto con todos los campos del producto
categories Lista de categorías obtenidas del servicio
measureUnits Lista de unidades de medida
previewUrl Imagen en previsualización
isSubmitting Estado del envío

Servicios utilizados

  • createProductService() (productService.js)
  • getCategories() (categoryService.js)
  • getMeasureUnits() (categoryService.js)
  • uploadImage() (helpers/cloudinary.js)

Librerías utilizadas

  • sweetalert2
  • lucide-react (ícono de imagen)
  • React hooks: useState, useEffect

TopControls.jsx

Controles superiores para filtrado y ordenamiento de productos

Función

Barra superior con controles para:

  • Filtrar productos por categoría
  • Ordenar productos por:
  • Nombre A-Z
  • Nombre Z-A
  • Precio ascendente
  • Precio descendente
  • Si el usuario es seller → botón para abrir ProductCreateModal

Props

Prop Tipo Descripción
selectedCategory string Categoría actualmente seleccionada
setSelectedCategory Function Cambia categoría seleccionada
sortValue string Valor actual de ordenamiento
setSortValue Function Cambia el tipo de ordenamiento
categories Array Lista de categorías disponibles
setShowModal Function (seller) abre modal de nuevo producto

Lógica de rol

  • Lee localStorage.role
  • Si el usuario es seller, muestra botón Crear nuevo Producto