[AFP-15] Start work on Delete product functionality

src/actions/apiRequests.js

@@ -5,4 +5,11 @@ export const getAllProducts = async data => {
     const res = await axios.get(`${Config.inventoryUrl}`);
     // console.log(res.data);
     return res.data;
+}
+
+export const deleteProduct = async (sku) => {
+    await axios.delete(`${Config.inventoryUrl}/${sku}`)
+        .then(() => {
+            return await axios.get(`${Config.inventoryUrl}`);
+        });
 }
\ No newline at end of file

src/component/Product.jsx

 import React, { useState } from "react";
 import "./../styles/Product.css";
 import { Modal, Button, Alert } from "react-bootstrap";
+import { deleteProduct } from "../actions/apiRequests";
 
 export default function Product({ product }) {
   const [show, setShow] = useState(false);
@@ -10,6 +11,16 @@ export default function Product({ product }) {
     setShow(false);
     handleCloseConfirm();
   };
+
+  const handleDelete = (sku) => {
+    deleteProduct(sku)
+      .then(res => {
+        const products = res.data;
+        this.setState({products});
+      });
+  }
+
+
   const handleShow = () => setShow(true);
   const handleShowConfirm = () => setShowConfirm(true);
   const handleCloseConfirm = () => setShowConfirm(false);
@@ -66,7 +77,7 @@ export default function Product({ product }) {
               Cancel
             </Button>
             &nbsp;&nbsp;
-            <Button variant="danger">Yes, delete</Button>
+            <Button variant="danger" onClick={handleDelete(product.sku)}>Yes, delete</Button>
           </Alert>
         </Modal.Footer>
       </Modal>