Allow to Add to Cart item from Home Page > Featured Products

Allow to Add to Cart item from Products Page > Product listing
Fix: All item quantity updated when add existing product in cart.

Author: WebDeveloperGuide

web_panel/src/components/Product.js

@@ -1,19 +1,27 @@
 import React from 'react';
 import {Link} from 'react-router-dom';
+import {useDispatch} from 'react-redux';
+import {addToCart} from '../redux/actions/cartActions';
 
 const Products = (props) => {
 
 	const {id,thumbnail,price,title} = props.detail;
+	const dispatch = useDispatch();
+
+	const addToCartHandle = (product) => {
+		dispatch(addToCart(product,1));
+	}
+
 	return(
 			<>
 			    <article className="product">
 			        <div className="product-container">
 			          <img src={thumbnail} className="product-img img" alt={title} />
 			          <div className="product-icons">
-			            <Link to={`/product/${id}`} className="product-icon">
+			            <Link to={`/product/${id}`} className="product-icon" title="View">
 			              <i className="fas fa-search" />
 			            </Link>
-			            <button className="product-cart-btn product-icon" data-id={id}>
+			            <button className="product-cart-btn product-icon" title="Add to Cart" data-id={id} onClick={()=>addToCartHandle(props.detail)}>
 			              <i className="fas fa-shopping-cart" />
 			            </button>
 			          </div>

web_panel/src/redux/reducers/cartReducer.js

@@ -21,10 +21,10 @@ export const cartReducer = (state = initialState,{type,payload}) => {
 		case ActionTypes.ADD_ITEM_TO_CART:
 	      const newItem = payload;
 	      const existItem = state.cartItems.find((x) => x.id === newItem.id);
-	      
+
 	      if (existItem) {
-	      	const tempNewCart = state.cartItems.map((item) => {
-	      	  if (newItem.id === existItem.id) {
+	      	const tempNewCart = state.cartItems.map((item) => {	      		
+	      	  if (item.id === existItem.id) {
 		          let newQty = parseInt(newItem.qty) + parseInt(existItem.qty)
 		          return { ...item, qty: newQty }		        		        
 		      }