Implementación del método delete en repositorio de productos

Implementa una eliminación confiable y clara con el API de Fake Store de Platzi: usa el verbo delete, identifica el producto por ID y controla la UI con un booleano a partir de response.ok. La lógica es directa: no hay body, solo éxito o fallo, y se integra en la vista de detalle con el template existente.

¿Cómo implementar delete en el repositorio con el API de Fake Store?

Para eliminar un producto en el repositorio se usa el verbo delete y se pasa únicamente el ID del producto. No se agregan query params ni body. El endpoint queda identificado con el recurso del producto a eliminar. La respuesta útil es response.ok, que retorna un booleano para decidir si la operación fue exitosa.

• Usa el verbo delete y el ID del producto.
• No envíes body: con la URL del recurso es suficiente.
• Retorna response.ok para manejar un booleano de éxito o fallo.

Ejemplo de repositorio:

// Repositorio de productos
async function deleteProduct(productId) {
  // URL del recurso del producto con su ID.
  const urlDelProducto = /* URL del producto a eliminar */;
  const response = await fetch(urlDelProducto, { method: 'DELETE' });
  return response.ok; // true si se eliminó, false si falló.
}

¿Qué responde el endpoint y cómo manejar el booleano?

El API puede responder con true/false o con un response.ok que ya es booleano. No hay estados intermedios ni body que procesar: la lógica se reduce a fue eliminado o no fue eliminado. Esto simplifica los flujos y evita manipular datos adicionales.

• Éxito: true o response.ok === true.
• Falla: false o response.ok === false.
• No se procesa body: no hay contenido que leer.

¿Cómo integrar la eliminación en la vista de detalle y el template?

En la vista de detalle existe un botón “eliminar producto” que abre un modal con dos opciones: eliminar o cancelar. Al confirmar, se dispara la función deleteProduct de la vista, que ahora debe llamar al repositorio y manejar el booleano de retorno, reutilizando la lógica ya existente.

• Mantén el spinner de carga mientras se elimina.
• Usa window.productRepository.deleteProduct(productId).
• Trabaja con el booleano wasDeleted para decidir la UI.
• Elimina la simulación por timeout y reemplázala por la llamada real al endpoint.

Ejemplo de integración en la vista de detalle:

// En la vista de detalle
function onDeleteProduct(productId) {
  // Mostrar spinner y deshabilitar botón.
  window.productRepository.deleteProduct(productId)
    .then((wasDeleted) => {
      // Ocultar modal de eliminación.
      if (wasDeleted) {
        // Mostrar mensaje de éxito y redirigir a home.
      } else {
        // Mostrar mensaje de error y restaurar botón.
      }
    });
}

¿Qué flujo de UI se conserva y qué cambia?

Se conserva el comportamiento que ya funcionaba con la simulación, pero ahora conectado al API real. La experiencia del usuario no cambia; solo cambia la fuente de la verdad: el booleano del endpoint.

• Se mantiene el modal con eliminar o cancelar.
• Se mantiene el spinner mientras corre la operación.
• Si fue eliminado: ocultar modal, mostrar éxito y redirigir a home.
• Si falló: mostrar error y restaurar el botón.
• Se quita el timeout: la decisión depende de wasDeleted de la promesa.

¿Cómo validar y depurar la eliminación con herramientas del navegador?

Es útil colocar un breakpoint en el método del repositorio y verificar la llamada en el panel Network. Al hacer clic en “eliminar” y confirmar en el modal, se invoca el método y el navegador muestra la solicitud delete. Puede verse una respuesta vacía, pero con ok: true en el objeto de respuesta, lo que confirma el éxito.

• Agrega un breakpoint en el repositorio antes de return response.ok.
• Haz clic en eliminar y confirma en el modal.
• Revisa Network: la solicitud DELETE al producto por ID puede responder sin body, pero con ok en response.
• Verifica la UI: se oculta el modal, se muestra el mensaje y se navega a home en caso de éxito.

Habilidades y conceptos aplicados: verbo delete, endpoint identificado por ID, ausencia de body, manejo de promesas con then, uso de response.ok como booleano, control de UI con modal y spinner, revisión en Network, y depuración con breakpoints en la vista de detalle y el repositorio.

¿Tuviste algún problema integrando el delete en el repositorio o en el template? Cuéntalo en comentarios y comparte tu solución.