Modal confirmation of adding and removing item to/from cart resp.

package.json

@@ -17,7 +17,8 @@
     "react-currency-format": "^1.0.0",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "sweetalert": "^2.1.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/CheckoutProduct.js

@@ -1,11 +1,20 @@
 import React from 'react';
 import './CheckoutProduct.css'
 import { useStateValue } from "./StateProvider";
+import swal from 'sweetalert';
+
 
 function CheckoutProduct({ id, image, title, price, rating, hideButton }) {
     const [{ basket }, dispatch] = useStateValue();
 
     const removeFromBasket = () => {
+
+        swal({
+            title: "Product has been removed from the cart.",
+            icon: "success",
+            dangerMode: true,
+          })
+
         // remove the item from the basket
         dispatch({
             type: 'REMOVE_FROM_BASKET',

src/Orders.js

@@ -29,13 +29,22 @@ function Orders() {
 
     return (
         <div className='orders'>
+        {orders ? (
+            <div>
             <h1>Your Orders</h1>
 
             <div className='orders__order'>
                 {orders?.map(order => (
                     <Order order={order} />
                 ))}
             </div>
+            </div>
+
+        ) : (
+            <h2>No orders</h2>
+        )
+    }
+
         </div>
     )
 }

src/Product.js

@@ -1,11 +1,21 @@
 import React from "react";
 import "./Product.css";
 import { useStateValue } from "./StateProvider";
+import swal from 'sweetalert';
+
 
 function Product({ id, title, image, price, rating }) {
   const [{ basket }, dispatch] = useStateValue();
 
   const addToBasket = () => {
+
+    swal({
+      title: "Product Added to cart.",
+      icon: "success",
+      dangerMode: false,
+    })
+
+
     // dispatch the item into the data layer
     dispatch({
       type: "ADD_TO_BASKET",