updated shop data with new data, updated cart utils to group similar items

Author: AdityaKumawat97

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

@@ -1,7 +1,10 @@
 import React from 'react'
+import { connect } from 'react-redux'
+import { addItem } from '../../redux/cart/cart.actions'
 import CustomButton from '../custom-button/custom-button.component'
 import './collection-item.styles.scss'
-export default function CollectionItem({ id, name, price, imageUrl }) {
+function CollectionItem({ item, addItem }) {
+    const { name, price, imageUrl } = item
     return (
         <div className="collection-item">
             <div className="image"
@@ -13,7 +16,13 @@ export default function CollectionItem({ id, name, price, imageUrl }) {
                 <span className="name">{name}</span>
                 <span className="price">{price}</span>
             </div>
-            <CustomButton inverted> Add to Cart </CustomButton>
+            <CustomButton onClick={() => addItem(item)} inverted> Add to Cart </CustomButton>
         </div>
     )
 }
+
+const mapDispatchToProps = dispatch => ({
+    addItem: item => dispatch(addItem(item))
+})
+
+export default connect(null, mapDispatchToProps)(CollectionItem)

src/components/collection-preview/Collection-preview.component.jsx

@@ -9,8 +9,8 @@ export default function CollectionPreview({ title, items }) {
                 {
                     items
                         .filter((item, idx) => idx < 4)
-                        .map(({ id, ...otherItemProps }) => (
-                            <CollectionItem key={id} {...otherItemProps} />
+                        .map( item => (
+                            <CollectionItem key={item.id} item={item} />
                         ))
                 }
             </div>

src/redux/cart/cart.actions.js

@@ -2,4 +2,8 @@ import CartActionTypes from './cart.types'
 
 export const toggleCartHidden = () => ({
     type: CartActionTypes.TOGGLE_CART_HIDDEN
-})
+})
+export const addItem = (item) => ({
+    type: CartActionTypes.ADD_ITEM,
+    payload: item
+})

src/redux/cart/cart.reducer.js

@@ -1,8 +1,9 @@
 import CartActionTypes from './cart.types'
-
+import { addItemToCart } from './cart.utils'
 
 const INITIAL_STATE = {
-    hidden: true
+    hidden: true,
+    cartItems: []
 }
 
 
@@ -14,8 +15,13 @@ const cartReducer = (state = INITIAL_STATE, action) => {
                 ...state,
                 hidden: !state.hidden
             }
-            default:
-                return state
+        case CartActionTypes.ADD_ITEM:
+            return {
+                ...state,
+                cartItems: addItemToCart(state.cartItems, action.payload)
+            }
+        default:
+            return state
     }
 }
 

src/redux/cart/cart.types.js

@@ -1,5 +1,6 @@
 const CartActionTypes = {
-    TOGGLE_CART_HIDDEN: 'TOGGLE_CART_HIDDEN'
+    TOGGLE_CART_HIDDEN: 'TOGGLE_CART_HIDDEN',
+    ADD_ITEM: 'ADD_ITEM'
 }
 
 export default CartActionTypes

src/redux/cart/cart.utils.js

@@ -0,0 +1,10 @@
+export const addItemToCart = (cartItems, cartItemToAdd) => {
+    const existingCartItem = cartItems.find(cartItem => cartItem.id === cartItemToAdd.id)
+
+    if (existingCartItem) {
+        return cartItems.map(cartItem => cartItem.id === cartItemToAdd.id ?
+            { ...cartItem, quantity: cartItem.quantity + 1 } : cartItem)
+    }
+
+    return [...cartItems, { ...cartItemToAdd, quantity: 1 }]
+}