Video-39-Delete-Product (#39)

Author: basir

backend/routers/productRouter.js

@@ -67,4 +67,19 @@ productRouter.put(
     }
   })
 );
+productRouter.delete(
+  '/:id',
+  isAuth,
+  isAdmin,
+  expressAysncHandler(async (req, res) => {
+    const product = await Product.findById(req.params.id);
+    if (product) {
+      const deletedProduct = await product.remove();
+      res.send({ message: 'Product Deleted', product: deletedProduct });
+    } else {
+      res.status(404).send({ message: 'Product Not Found' });
+    }
+  })
+);
+
 export default productRouter;

frontend/src/api.js

@@ -58,6 +58,25 @@ export const createProduct = async () => {
     return { error: err.response.data.message || err.message };
   }
 };
+export const deleteProduct = async (productId) => {
+  try {
+    const { token } = getUserInfo();
+    const response = await axios({
+      url: `${apiUrl}/api/products/${productId}`,
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    if (response.statusText !== 'OK') {
+      throw new Error(response.data.message);
+    }
+    return response.data;
+  } catch (err) {
+    return { error: err.response.data.message || err.message };
+  }
+};
 
 export const updateProduct = async (product) => {
   try {

frontend/src/srceens/ProductListScreen.js

@@ -1,5 +1,6 @@
 import DashboardMenu from '../components/DashboardMenu';
-import { getProducts, createProduct } from '../api';
+import { getProducts, createProduct, deleteProduct } from '../api';
+import { showLoading, hideLoading, rerender, showMessage } from '../utils';
 
 const ProductListScreen = {
   after_render: () => {
@@ -15,6 +16,21 @@ const ProductListScreen = {
         document.location.hash = `/product/${editButton.id}/edit`;
       });
     });
+    const deleteButtons = document.getElementsByClassName('delete-button');
+    Array.from(deleteButtons).forEach((deleteButton) => {
+      deleteButton.addEventListener('click', async () => {
+        if (confirm('Are you sure to delete this product?')) {
+          showLoading();
+          const data = await deleteProduct(deleteButton.id);
+          if (data.error) {
+            showMessage(data.error);
+          } else {
+            rerender(ProductListScreen);
+          }
+          hideLoading();
+        }
+      });
+    });
   },
   render: async () => {
     const products = await getProducts();