Product Management

The product management system provides full CRUD operations through the AdminContext and modal-based forms. All operations interact with a MockAPI backend.

API Configuration

The admin panel connects to MockAPI for product data:

const apiUrl = "https://681cdce3f74de1d219ae0bdb.mockapi.io/tiendatobe/productos"

Reference: /workspace/source/src/context/AdminContext.jsx:12

Product Data Structure

Products contain the following fields:

string

required

Auto-generated product identifier

nombre

string

required

Product name

precio

number

required

Product price (must be greater than 0)

descripcion

string

required

Product description (minimum 10 characters)

stock

number

Available stock quantity

imagen

string

URL to product image

categoria

string

Product category

Adding Products

Opening the Add Form

Click the “Abrir panel agregar producto” button to open the FormularioProducto modal:

<button className="btn-inicio" onClick={() => setOpen(true)}>
  Abrir panel agregar producto
</button>

Reference: /workspace/source/src/layout/Admin.jsx:61

Form Validation

The add form includes validation rules:

const validarFormulario = () => {
  const nuevosErrores = {};
  if (!producto.nombre.trim()) 
    nuevosErrores.nombre = 'El nombre es obligatorio.';
  if (!producto.precio || producto.precio <= 0) 
    nuevosErrores.precio = 'El precio debe ser mayor a 0.';
  if (!producto.descripcion.trim() || producto.descripcion.length < 10)
    nuevosErrores.descripcion = 'La descripción debe tener al menos 10 caracteres.';
  setErrores(nuevosErrores);
  return Object.keys(nuevosErrores).length === 0;
};

Reference: /workspace/source/src/components/FormularioProducto.jsx:17-25

API Call: POST Request

When the form is submitted, the agregarProducto function sends a POST request:

const agregarProducto = async (producto) => {
  try {
    const respuesta = await fetch(apiUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(producto)
    })
    if (!respuesta.ok) {
      throw new Error('Error al agregar producto')
    }
    const data = await respuesta.json()
    Swal.fire({
      title: "Realizado!",
      text: "Producto agregado correctamente!",
      icon: "success"
    });
    cargarProductos()
  } catch (error) {
    console.log(error.message);
  }
}

Reference: /workspace/source/src/context/AdminContext.jsx:30-54

After adding a product, cargarProductos() is called to refresh the product list.

Editing Products

Opening the Edit Form

Click the “Editar” button on any product card:

<button className="editButton" onClick={() => {
  setOpenEditor(true)
  setSeleccionado(product)
}}>
  Editar
</button>

Reference: /workspace/source/src/layout/Admin.jsx:50-53 This opens the FormularioEdicion modal with the selected product data pre-filled.

Edit Form Fields

The edit form (FormularioEdicion) includes all product fields:

ID (read-only)
Nombre (text input)
Precio (number input, min: 0)
Stock (number input)
Imagen (text input for URL)
Categoría (text input)
Descripción (textarea)

Reference: /workspace/source/src/components/FormularioEdicion.jsx:35-124

API Call: PUT Request

The actualizarProducto function sends a PUT request:

const actualizarProducto = async (producto) => {
  try {
    const respuesta = await fetch(`${apiUrl}/${producto.id}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(producto),
    });

    if (!respuesta.ok) throw Error('Error al actualizar el producto');

    const data = await respuesta.json();
    Swal.fire({
      title: "Realizado!",
      text: "Producto actualizado correctamente!",
      icon: "success"
    });
    setOpenEditor(false);
    setSeleccionado(null);
    cargarProductos();
  } catch (error) {
    console.log(error.message);
  }
};

Reference: /workspace/source/src/context/AdminContext.jsx:101-126

Deleting Products

Triggering Delete

Click the “Eliminar” button on any product card:

<button className="deleteButton" onClick={() => eliminarProducto(product.id)}>
  Eliminar
</button>

Reference: /workspace/source/src/layout/Admin.jsx:54

Confirmation Dialog

Before deleting, a SweetAlert2 confirmation dialog appears:

const result = await Swal.fire({
  title: '¿Estás seguro de eliminar el producto?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Sí, eliminar',
  cancelButtonText: 'Cancelar',
});

Reference: /workspace/source/src/context/AdminContext.jsx:70-76

API Call: DELETE Request

If confirmed, a DELETE request is sent:

if (result.isConfirmed) {
  try {
    const respuesta = await fetch(
      `https://681cdce3f74de1d219ae0bdb.mockapi.io/tiendatobe/productos/${id}`,
      {
        method: 'DELETE',
      }
    );
    if (!respuesta.ok) throw new Error('Error al eliminar');

    Swal.fire({
      title: "Realizado!",
      text: "Producto eliminado correctamente!",
      icon: "success",
    });

    cargarProductos();
  } catch (error) {
    Swal.fire({
      title: "Error!",
      text: "Hubo un problema al eliminar el producto!",
      icon: "error"
    });
  }
}

Reference: /workspace/source/src/context/AdminContext.jsx:78-99

Loading Products

Products are loaded automatically when the AdminContext mounts:

useEffect(() => {
  fetch(apiUrl)
    .then((response) => response.json())
    .then((data) => {
      setTimeout(() => {
        setProductos(data);
        setLoading(false);
      }, 2000);
    })
    .catch((error) => {
      console.error("Error fetching data:", error);
      setError(true);
      setLoading(false);
    });
}, []);

Reference: /workspace/source/src/context/AdminContext.jsx:14-28

A 2-second delay is added to simulate loading time and show the loading state.

Reload Function

After any CRUD operation, products are reloaded:

const cargarProductos = async () => {
  try {
    const res = await fetch(apiUrl)
    const data = await res.json()
    setProductos(data)
  } catch (error) {
    console.log('Error al cargar productos ', error)
  }
}

Reference: /workspace/source/src/context/AdminContext.jsx:56-64

User Feedback

All operations use SweetAlert2 for user feedback:

Success

Shown after successful add, edit, or delete

Error

Shown when operations fail

Warning

Shown before delete confirmation

Administration

API Configuration

Product Data Structure

Adding Products

Opening the Add Form

Form Validation

API Call: POST Request

Editing Products

Opening the Edit Form

Edit Form Fields

API Call: PUT Request

Deleting Products

Triggering Delete

Confirmation Dialog

API Call: DELETE Request

Loading Products

Reload Function

User Feedback

Success

Error

Warning

Build docs developers (and LLMs) love

Administration

​API Configuration

​Product Data Structure

​Adding Products

​Opening the Add Form

​Form Validation

​API Call: POST Request

​Editing Products

​Opening the Edit Form

​Edit Form Fields

​API Call: PUT Request

​Deleting Products

​Triggering Delete

​Confirmation Dialog

​API Call: DELETE Request

​Loading Products

​Reload Function

​User Feedback

Success

Error

Warning

Build docs developers (and LLMs) love

API Configuration

Product Data Structure

Adding Products

Opening the Add Form

Form Validation

API Call: POST Request

Editing Products

Opening the Edit Form

Edit Form Fields

API Call: PUT Request

Deleting Products

Triggering Delete

Confirmation Dialog

API Call: DELETE Request

Loading Products

Reload Function

User Feedback