adding cart items remove, clear and add from checkout and cart component

src/components/checkout-item/checkout-item.component.jsx

@@ -1,17 +1,34 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import { clearItem, addItem, removeItem } from '../../redux/cart/cart.actions';
 
 import './checkout-item.styles.scss';
 
-const CheckoutItem = ({cartItem:{name, imageUrl, price, quantity}}) => (
+const CheckoutItem = ({cartItem, removeItemFromCart, addItem, removeItem}) => {
+    const {name, imageUrl, price, quantity} = cartItem;
+    return (
     <div className='checkout-item'>
         <div className='image-container'>
             <img src={imageUrl} alt='item' />
         </div>
         <span className='name'>{name}</span>
-        <span className='quantity'>{quantity}</span>
+
+        <span className='quantity'>
+            <div className='arrow' onClick={() => removeItem(cartItem)} >&#10094;</div>
+            <span className='value'>{quantity}</span>
+            <div className='arrow' onClick={()=> addItem(cartItem)}>&#10095;</div>
+        </span>
         <span className='price'>{price}</span>
-        <div className='remove-button'>&#10005;</div>
+        <div className='remove-button' onClick={() => removeItemFromCart(cartItem)}>&#10005;</div>
     </div>
-)
+    )
+}
 
-export default CheckoutItem;
+const mapDispatchToProps = dispatch => ({
+    removeItemFromCart:item => dispatch(clearItem(item)),
+    addItem: item => dispatch(addItem(item)),
+    removeItem: item => dispatch(removeItem(item))
+})
+
+
+export default connect(null, mapDispatchToProps)(CheckoutItem);

src/components/checkout-item/checkout-item.styles.scss

@@ -23,7 +23,13 @@
   }
 
   .quantity {
-    padding-left: 20px;
+    display: flex;
+    .arrow{
+      cursor: pointer;
+    }
+    .value{
+      margin: 0 10px;
+    }
   }
 
   .remove-button {

src/redux/cart/cart.actions.js

@@ -8,4 +8,15 @@ export const addItem = item => ({
     type: CartActionTypes.ADD_ITEM,
     payload: item
 })
+
+export const removeItem = item => ({
+    type:CartActionTypes.REMOVE_ITEM,
+    payload:item
+})
+
+export const clearItem = item => ({
+    type: CartActionTypes.CLEAR_ITEM_FROM_CART,
+    payload: item
+})
+
 export default addItem;

src/redux/cart/cart.reducer.js

@@ -1,5 +1,5 @@
 import CartActionTypes from './cart.types';
-import addItemToCart from './cart.utils'
+import { addItemToCart, clearCartItemFromCart, removeCartItem} from './cart.utils'
 
 const INITIAL_STATE = {
     hidden: true,
@@ -19,6 +19,16 @@ export const cartReducer = (state = INITIAL_STATE, action) => {
                 ...state,
                 cartItems: addItemToCart(state.cartItems, action.payload)
             }
+        case CartActionTypes.REMOVE_ITEM:
+            return {
+                ...state,
+                cartItems: removeCartItem(state.cartItems, action.payload)
+            }
+        case CartActionTypes.CLEAR_ITEM_FROM_CART:
+            return {
+                ...state,
+                cartItems: clearCartItemFromCart(state.cartItems, action.payload)
+            }
         default:
             return state;
     }

src/redux/cart/cart.types.js

@@ -1,6 +1,8 @@
 const CartActionTypes = {
     TOGGLE_CART_HIDDEN:  'TOGGLE_CART_HIDDEN',
-    ADD_ITEM: 'ADD_ITEM'
+    ADD_ITEM: 'ADD_ITEM',
+    REMOVE_ITEM: 'REMOVE_ITEM',
+    CLEAR_ITEM_FROM_CART: 'CLEAR_ITEM_FROM_CART'
 }
 
 export default CartActionTypes;

src/redux/cart/cart.utils.js

@@ -14,4 +14,28 @@ export const addItemToCart = (cartItems, cartItemToAdd) => {
 
 	return [...cartItems, {...cartItemToAdd, quantity: 1}];
 };
+
+export const removeCartItem = (cartItems, cartItemToRemove) => {
+    const existingCartItem = cartItems.find(
+        cartItem => cartItem.id === cartItemToRemove.id
+    )
+
+    if(existingCartItem.quantity===1){
+        return cartItems.filter(ci=>ci.id!==cartItemToRemove.id);
+    }
+    return cartItems.map(
+        cartItem=>
+        cartItem.id===cartItemToRemove.id?
+        {...cartItem, quantity:cartItem.quantity-1}
+        : cartItem
+    )
+}
+
+export const clearCartItemFromCart = (cartItems, cartItemToRemove) => {
+    const cartItemsCleared = cartItems.filter(
+        cartItem=> cartItem.id!==cartItemToRemove.id
+    )
+    return cartItemsCleared;
+}
+
 export default addItemToCart;