Added features for add to cart,

Increament/Decrement Item qty,
Remove Item from cart,
Cart Icon item count,
Cart Total Amount added,
Show cart items from localstorage to stay items when reload page.

Author: WebDeveloperGuide

web_panel/src/components/CartProduct.js

@@ -1,23 +1,40 @@
 import React from 'react';
+import {useDispatch} from 'react-redux';
+import {removeFromCart, increaseProductQty, decreaseProductQty} from '../redux/actions/cartActions';
+
+const CartProduct = ({detail}) => {	
+	const {id,image, name, price, qty} = detail;
+	const dispatch = useDispatch();
+	const removeItemFromCart = (id) =>{
+		dispatch(removeFromCart(id));
+	}
+
+	const cartIncreaseItem = (id) => {
+		dispatch(increaseProductQty(id));
+	}
+
+	const cartDecreaseItem = (id) => {
+		dispatch(decreaseProductQty(id));
+	}
+
 
-const CartProduct = ({detail}) => {
-	
-	const {image, name, price} = detail;
 	return(
 			<>
 				<article className="cart-item">
 	              <img src={image} className="cart-item-img" alt="product" />
 	              <div className="cart-item-info">
 	                <h5 className="cart-item-name">{name}</h5>
 	                <span className="cart-item-price">${price}</span>
-	                <button className="cart-item-remove-btn">remove</button>
+	                <button className="cart-item-remove-btn" title="Remove" onClick={()=>{removeItemFromCart(id)}}>
+		               	<i className="fa fa-trash" aria-hidden="true"></i>
+		            </button>
 	              </div>
 	              <div>
-	                <button className="cart-item-increase-btn">
+	                <button className="cart-item-increase-btn" onClick={()=>cartIncreaseItem(id)}>
 	                  <i className="fas fa-chevron-up" />
 	                </button>
-	                <span className="cart-item-amount">1</span>
-	                <button className="cart-item-decrease-btn">
+	                <span className="cart-item-amount">{qty}</span>
+	                <button className={'cart-item-decrease-btn' + ((qty ===1) ? ' disabled' : '' )} onClick={()=>cartDecreaseItem(id)}>
 	                  <i className="fas fa-chevron-down" />
 	                </button>
 	              </div>

web_panel/src/components/Navbar.js

@@ -8,7 +8,11 @@ import {showCart} from '../redux/actions/cartActions';
 const NavBar = () => {
 	const dispatch = useDispatch();
 	const showCartStatus = useSelector((state)=> state.cart.showCart);
-	const cartItemsCount = useSelector((state)=> state.cart.cartItems).length;
+	const cartItems = useSelector((state)=> state.cart.cartItems);
+	let cartItemsCount = cartItems.reduce((total, item)=>{
+		return total + item.qty
+	}, 0);
+
 
 	const toggleCart = () => {
 		dispatch(showCart(!showCartStatus))

web_panel/src/index.css

@@ -909,4 +909,17 @@ Cart
 .empty-cart{
   margin:150px 0;
   text-align: center;
+}
+
+.cart-item-remove-btn i{
+  color: red;
+  font-size: 17px;
+}
+
+.hide{
+  display: none;
+}
+
+.disabled { 
+  cursor: not-allowed; 
 }

web_panel/src/redux/actions/cartActions.js

@@ -37,7 +37,7 @@ export const addToCart = (product,qty) => (dispatch,getState) => {
 
 		  localStorage.setItem("cartItems", JSON.stringify(getState().cart.cartItems));
 
-		  toast.error("Added to Cart", ToastObjects);
+		  toast.success("Added to Cart", ToastObjects);
 
 	}catch (error){
 		const message =
@@ -47,4 +47,34 @@ export const addToCart = (product,qty) => (dispatch,getState) => {
 
         toast.error(message, ToastObjects);
 	}
-}
+}
+
+// Remove item from cart
+export const removeFromCart = (id) => (dispatch, getState) => {
+  dispatch({
+    type: ActionTypes.CART_REMOVE_ITEM,
+    payload: id,
+  });
+	toast.success("Item Removed From Cart", ToastObjects);
+  localStorage.setItem("cartItems", JSON.stringify(getState().cart.cartItems));
+};
+
+// Remove item from cart
+export const increaseProductQty = (id) => (dispatch, getState) => {
+  dispatch({
+    type: ActionTypes.INCREASE_ITEM,
+    payload: id,
+  });
+	
+  localStorage.setItem("cartItems", JSON.stringify(getState().cart.cartItems));
+};
+
+// Remove item from cart
+export const decreaseProductQty = (id) => (dispatch, getState) => {
+  dispatch({
+    type: ActionTypes.DECREASE_ITEM,
+    payload: id,
+  });
+	
+  localStorage.setItem("cartItems", JSON.stringify(getState().cart.cartItems));
+};

web_panel/src/redux/constants/index.js

@@ -4,4 +4,7 @@ export const ActionTypes = {
 	RESET_PRODUCT_DETAIL:"RESET_PRODUCT_DETAIL",
 	CART_STATUS:"CART_STATUS",
 	ADD_ITEM_TO_CART:"ADD_ITEM_TO_CART",
+	CART_REMOVE_ITEM:"CART_REMOVE_ITEM",
+	INCREASE_ITEM:"INCREASE_ITEM",
+	DECREASE_ITEM:"DECREASE_ITEM"
 }

web_panel/src/redux/reducers/cartReducer.js

@@ -1,7 +1,16 @@
 import { ActionTypes } from '../constants';
 
+const getLocalCartItems = () => {
+  let cartItems = localStorage.getItem('cartItems')
+  if (cartItems) {
+    return JSON.parse(localStorage.getItem('cartItems'))
+  } else {
+    return []
+  }
+}
+
 const initialState = {
-	cartItems: [],
+	cartItems: getLocalCartItems(),
 	showCart:false
 }
 
@@ -10,22 +19,51 @@ export const cartReducer = (state = initialState,{type,payload}) => {
 		case ActionTypes.CART_STATUS:
 			return {...state,showCart:payload};
 		case ActionTypes.ADD_ITEM_TO_CART:
-	      const item = payload;
-	      const existItem = state.cartItems.find((x) => x.product === item.product);
+	      const newItem = payload;
+	      const existItem = state.cartItems.find((x) => x.id === newItem.id);
 
 	      if (existItem) {
-	        return {
-	          ...state,
-	          cartItems: state.cartItems.map((x) =>
-	            x.id === existItem.id ? item : x
-	          ),
-	        };
+	      	const tempNewCart = state.cartItems.map((item) => {
+	      	  if (newItem.id === existItem.id) {
+		          let newQty = parseInt(newItem.qty) + parseInt(existItem.qty)
+		          return { ...item, qty: newQty }		        		        
+		      }
+		      return item
+		    });
+	     	return { ...state, cartItems: tempNewCart }
+	        
 	      } else {
 	        return {
 	          ...state,
-	          cartItems: [...state.cartItems, item],
+	          cartItems: [...state.cartItems, newItem],
 	        };
 	      }
+	    case ActionTypes.INCREASE_ITEM:
+	      	const tempIncCart = state.cartItems.map((item) => {
+		      if (item.id === payload) {		        
+		          let newQty = item.qty + 1		          
+		          return { ...item, qty: newQty }		        		        
+		      }
+		      return item
+		    });
+	     	return { ...state, cartItems: tempIncCart }
+	    case ActionTypes.DECREASE_ITEM:
+	      const tempDescCart = state.cartItems.map((item) => {
+		      if (item.id === payload) {		        
+		          let newQty = item.qty - 1
+		          if(newQty === 0){
+		      		return item    	
+		          }
+		          return { ...item, qty: newQty }		        		        
+		      }
+		      return item
+		    });
+	      	return { ...state, cartItems: tempDescCart }
+	    case ActionTypes.CART_REMOVE_ITEM:
+			return {
+		        ...state,
+		        cartItems: state.cartItems.filter((x) => x.id !== payload),
+		      };
 		default:
 			return state;
 	}