resolved #26: added toast

ssahibsingh · Sep 12, 2024 · 18d9f97 · 18d9f97
1 parent 16eae8c
commit 18d9f97
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 46 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.3.5",
+    "react-hot-toast": "^2.4.1",
     "react-loading-skeleton": "^3.1.0",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.4.0",

diff --git a/src/components/Products.jsx b/src/components/Products.jsx
@@ -6,6 +6,7 @@ import Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 
 import { Link } from "react-router-dom";
+import toast from "react-hot-toast";
 
 const Products = () => {
   const [data, setData] = useState([]);
@@ -16,8 +17,8 @@ const Products = () => {
   const dispatch = useDispatch();
 
   const addProduct = (product) => {
-    dispatch(addCart(product))
-  }
+    dispatch(addCart(product));
+  };
 
   useEffect(() => {
     const getProducts = async () => {
@@ -68,23 +69,51 @@ const Products = () => {
   const filterProduct = (cat) => {
     const updatedList = data.filter((item) => item.category === cat);
     setFilter(updatedList);
-  }
+  };
+
   const ShowProducts = () => {
     return (
       <>
         <div className="buttons text-center py-5">
-          <button className="btn btn-outline-dark btn-sm m-2" onClick={() => setFilter(data)}>All</button>
-          <button className="btn btn-outline-dark btn-sm m-2" onClick={() => filterProduct("men's clothing")}>Men's Clothing</button>
-          <button className="btn btn-outline-dark btn-sm m-2" onClick={() => filterProduct("women's clothing")}>
+          <button
+            className="btn btn-outline-dark btn-sm m-2"
+            onClick={() => setFilter(data)}
+          >
+            All
+          </button>
+          <button
+            className="btn btn-outline-dark btn-sm m-2"
+            onClick={() => filterProduct("men's clothing")}
+          >
+            Men's Clothing
+          </button>
+          <button
+            className="btn btn-outline-dark btn-sm m-2"
+            onClick={() => filterProduct("women's clothing")}
+          >
             Women's Clothing
           </button>
-          <button className="btn btn-outline-dark btn-sm m-2" onClick={() => filterProduct("jewelery")}>Jewelery</button>
-          <button className="btn btn-outline-dark btn-sm m-2" onClick={() => filterProduct("electronics")}>Electronics</button>
+          <button
+            className="btn btn-outline-dark btn-sm m-2"
+            onClick={() => filterProduct("jewelery")}
+          >
+            Jewelery
+          </button>
+          <button
+            className="btn btn-outline-dark btn-sm m-2"
+            onClick={() => filterProduct("electronics")}
+          >
+            Electronics
+          </button>
         </div>
 
         {filter.map((product) => {
           return (
-            <div id={product.id} key={product.id} className="col-md-4 col-sm-6 col-xs-8 col-12 mb-4">
+            <div
+              id={product.id}
+              key={product.id}
+              className="col-md-4 col-sm-6 col-xs-8 col-12 mb-4"
+            >
               <div className="card text-center h-100" key={product.id}>
                 <img
                   className="card-img-top p-3"
@@ -106,16 +135,24 @@ const Products = () => {
                     <li className="list-group-item">Vestibulum at eros</li> */}
                 </ul>
                 <div className="card-body">
-                  <Link to={"/product/" + product.id} className="btn btn-dark m-1">
+                  <Link
+                    to={"/product/" + product.id}
+                    className="btn btn-dark m-1"
+                  >
                     Buy Now
                   </Link>
-                  <button className="btn btn-dark m-1" onClick={() => addProduct(product)}>
+                  <button
+                    className="btn btn-dark m-1"
+                    onClick={() => {
+                      toast.success("Added to cart");
+                      addProduct(product);
+                    }}
+                  >
                     Add to Cart
                   </button>
                 </div>
               </div>
             </div>
-
           );
         })}
       </>

diff --git a/src/index.js b/src/index.js
@@ -19,6 +19,7 @@ import {
   PageNotFound,
 } from "./pages";
 import ScrollToTop from "./components/ScrollToTop";
+import { Toaster } from "react-hot-toast";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
@@ -40,5 +41,6 @@ root.render(
         </Routes>
       </Provider>
     </ScrollToTop>
+    <Toaster />
   </BrowserRouter>
 );
diff --git a/src/redux/reducer/handleCart.js b/src/redux/reducer/handleCart.js
@@ -1,37 +1,3 @@
-// const cart = []
-
-// const handleCart = (state=cart, action) =>{
-//     const product = action.payload
-//     switch(action.type){
-//         case "ADDITEM":
-//             // Check if product already in cart
-//             const exist = state.find((x) => x.id === product.id)
-//             if(exist){
-//                 // Increase the quantity
-//                 return state.map((x)=>x.id ===product.id?{...x, qty: x.qty+1}:x)
-//             }
-//             else{
-//                 return [...state, {...product, qty:1}]
-//             }
-//             break;
-//         case "DELITEM":
-//             const exist2 = state.find((x) => x.id === product.id)
-//             if(exist2.qty === 1){
-//                 return state.filter((x)=>x.id!==exist2.id)
-//             }
-//             else{
-//                 return state.map((x)=> x.id===product.id?{...x, qty:x.qty-1}:x)
-//             }
-//             break;
-
-//         default:
-//             return state
-//             break;
-//     }
-// }
-
-// export default handleCart
-
 // Retrieve initial state from localStorage if available
 const getInitialCart = () => {
   const storedCart = localStorage.getItem("cart");