In order to implement the delete product functionality, we can implement a DeleteProduct component similar to the DeleteShop component, and add it to the MyProducts component for each product in the list. It can take the product object, shopID, and an onRemove method as a prop from MyProducts, as discussed in the MyProducts component for shop owners section.

The component will function the same as DeleteShop, opening a dialog for confirmation on button-click and then, when the delete intent is confirmed by the user, calling the fetch method for delete, which makes the DELETE request to the server at /api/product/:shopId/:productId. This backend API for deleting a product from the database will be declared as follows with the other product routes:

mern-marketplace/server/routes/product.routes.js:

router.route('/api/product/:shopId/:productId')
      .delete(authCtrl.requireSignin, shopCtrl.isOwner, productCtrl.remove)

The remove controller method will be invoked if an authorized user makes the DELETE request to this API, and it will delete the specified product from the database, like the remove controller method for shops.

We started the implementation of the product-related features for the marketplace in this section by first defining a schema for storing product details and then discussing the full-stack slices for creating, listing, reading, updating, and deleting products in the application. In the next section, we will look into how to allow users in the marketplace to search for products in varied ways, so they can easily find the products they are looking for.