[AFP-15] Finish work on delete product functionality

src/actions/apiRequests.js

@@ -10,6 +10,6 @@ export const getAllProducts = async data => {
 export const deleteProduct = async (sku) => {
      await axios.delete(`${Config.inventoryUrl}/${sku}`)
         .then(() => {
-            return await axios.get(`${Config.inventoryUrl}`);
+             getAllProducts();
         });
 }
\ 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 }) {
+export default function Product({ product, handleDelete }) {
   const [show, setShow] = useState(false);
   const [showConfirm, setShowConfirm] = useState(false);
 
@@ -12,12 +11,9 @@ export default function Product({ product }) {
     handleCloseConfirm();
   };
 
-  const handleDelete = (sku) => {
-    deleteProduct(sku)
-      .then(res => {
-        const products = res.data;
-        this.setState({products});
-      });
+  const handleCloseDelete = (sku) => {
+    handleDelete(sku)
+    handleClose();
   }
 
 
@@ -77,7 +73,7 @@ export default function Product({ product }) {
               Cancel
             </Button>
             &nbsp;&nbsp;
-            <Button variant="danger" onClick={handleDelete(product.sku)}>Yes, delete</Button>
+            <Button variant="danger" onClick={() => handleCloseDelete(product.sku)}>Yes, delete</Button>
           </Alert>
         </Modal.Footer>
       </Modal>

src/component/ProductGrid.jsx

@@ -4,6 +4,7 @@ import { Col, Container, Row } from "react-bootstrap";
 import "./../styles/ProductGrid.css";
 import Config from "../config.js";
 import { Link } from "react-router-dom";
+import { deleteProduct } from "../actions/apiRequests";
 
 export default function ProductGrid({ productData }) {
   const [products, setProducts] = useState([]);
@@ -16,10 +17,17 @@ export default function ProductGrid({ productData }) {
     }
   };
 
+  const handleDelete = (sku) => {
+    deleteProduct(sku)
+    .then(() => {
+      fetchProducts();
+    });
+  }
+
   useEffect(() => fetchProducts(), []);
 
   return (
-    <div class="container flex-column d-flex justify-content-center">
+    <div className="container flex-column d-flex justify-content-center">
       <div className="container mt-3 d-flex justify-content-between align-items-center">
         <h1 id="title" className="text-center">
           Inventory
@@ -33,7 +41,7 @@ export default function ProductGrid({ productData }) {
           {products.map((product) => {
             return (
               <Col key={product.sku}>
-                <Product product={product} />
+                <Product product={product} handleDelete={() => handleDelete(product.sku)} />
               </Col>
             );
           })}