Jusqu'à maintenant quand on cliquait sur delete pour un produit on envoyait la requête au serveur puis on rafraichit la page avec les nouvelles données. Cela peut se montrer un peu lent

Donc on va modifier tout ca pour pouvoir supprimer notre produit sans recharger la page :

// view/products.ejs
<div class="card__actions">
    <a href="/admin/edit-product/<%= product._id %>?edit=true" class="btn">Edit</a>
    <input type="hidden" value="<%= product._id %>" name="productId">
    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
    <button class="btn" type="button" onclick="deleteProduct(this)">Delete</button>
</div>

// public/js/admin.js
const deleteProduct = (btn) => {
    console.log('clicked')
    const prodId = btn.parentNode.querySelector("[name=productId]").value;
    const csrfToken = btn.parentNode.querySelector("[name=_csrf]").value;
    const productElement = btn.closest('article');

    fetch('/admin/product/' + prodId, {
        method: 'DELETE',
        headers: {
            'csrf-token': csrfToken
        }
    }).then(res => {
        return res.json()
    })
        .then(data => {
            console.log(data)
            // == ==> " {message: "Success!"} "
            productElement.remove();
        })
        .catch(err => {
            console.log(err)
        })
};

// routes/admins.js
router.delete('/product/:productId', isAuth, adminController.deleteProduct);

// controller/admin.js
exports.deleteProduct = (req, res, next) => {
  const prodId = req.params.productId;
  Product.findById(prodId)
    .then(product => {
      if (!product) {
        return next(new Error('product not found'))
      }
      fileHelper.deleteFile(product.imageUrl);
      return Product.deleteOne({ _id: prodId, userId: req.user._id })
    })
    .then(result => {
      res.status(200).json({message: 'Success!'});
    })
    .catch(err => {
      res.status(500).json({message: 'Deleting product failed'})
    });
};