Add to Cart

package.json

@@ -17,7 +17,8 @@
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
     "redux-saga": "^1.1.3",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "reselect": "^4.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Header/index.js

@@ -2,17 +2,19 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 import { signOutUserStart } from './../../redux/User/user.actions';
+import { selectCartItemsCount } from './../../redux/Cart/cart.selectors';
 import './styles.scss';
 
 import Logo from './../../assets/logo.png';
 
-const mapState = ({ user }) => ({
-  currentUser: user.currentUser
+const mapState = (state) => ({
+  currentUser: state.user.currentUser,
+  totalNumCartItems: selectCartItemsCount(state)
 });
 
 const Header = props => {
   const dispatch = useDispatch();
-  const { currentUser } = useSelector(mapState);
+  const { currentUser, totalNumCartItems } = useSelector(mapState);
 
   const signOut = () => {
     dispatch(signOutUserStart());
@@ -44,35 +46,45 @@ const Header = props => {
 
         <div className="callToActions">
 
-          {currentUser && (
-            <ul>
+          <ul>
+
+            <li>
+              <Link>
+                Your Cart ({totalNumCartItems})
+              </Link>
+            </li>
+
+            {currentUser && [
               <li>
                 <Link to="/dashboard">
                   My Account
                 </Link>
-              </li>
+              </li>,
               <li>
                 <span onClick={() => signOut()}>
                   LogOut
                 </span>
               </li>
-            </ul>
-          )}
+            ]}
 
-          {!currentUser && (
-            <ul>
+            {!currentUser && [
               <li>
                 <Link to="/registration">
                   Register
-              </Link>
-              </li>
+                </Link>
+              </li>,
               <li>
                 <Link to="/login">
                   Login
-              </Link>
+                </Link>
               </li>
-            </ul>
-          )}
+            ]}
+
+          </ul>
+
+
+
+
 
         </div>
       </div>

src/components/ProductCard/index.js

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { fetchProductStart, setProduct } from './../../redux/Products/products.actions';
+import { addProduct } from './../../redux/Cart/cart.actions';
 import Button from './../forms/Button';
 import './styles.scss';
 
@@ -34,6 +35,13 @@ const ProductCard = ({}) => {
 
   }, []);
 
+  const handleAddToCart = (product) => {
+    if (!product) return;
+    dispatch(
+      addProduct(product)
+    )
+  }
+
   const configAddToCartBtn = {
     type: 'button'
   }
@@ -57,7 +65,7 @@ const ProductCard = ({}) => {
           </li>
           <li>
             <div className="addToCart">
-              <Button {...configAddToCartBtn}>
+              <Button {...configAddToCartBtn} onClick={() => handleAddToCart(product)}>
                 Add to cart
               </Button>
             </div>

src/components/ProductResults/Product/index.js

@@ -1,20 +1,31 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import Button from './../../forms/Button';
+import { useDispatch } from 'react-redux';
+import { addProduct } from './../../../redux/Cart/cart.actions';
 
-const Product = ({
-  documentID,
-  productThumbnail,
-  productName,
-  productPrice
-}) => {
+const Product = (product) => {
+  const dispatch = useDispatch();
+  const {
+    documentID,
+    productThumbnail,
+    productName,
+    productPrice
+  } = product;
   if (!documentID || !productThumbnail || !productName ||
     typeof productPrice === 'undefined') return null;
 
   const configAddToCartBtn = {
     type: 'button'
   };
 
+  const handleAddToCart = (product) => {
+    if (!product) return;
+    dispatch(
+      addProduct(product)
+    )
+  };
+
   return (
     <div className="product">
       <div className="thumb">
@@ -39,7 +50,7 @@ const Product = ({
           </li>
           <li>
             <div className="addToCart">
-              <Button {...configAddToCartBtn}>
+              <Button {...configAddToCartBtn} onClick={() => handleAddToCart(product)}>
                 Add to cart
               </Button>
             </div>

src/redux/Cart/cart.actions.js

@@ -0,0 +1,6 @@
+import cartTypes from './cart.types';
+
+export const addProduct = (nextCartItem) => ({
+  type: cartTypes.ADD_TO_CART,
+  payload: nextCartItem
+});

src/redux/Cart/cart.reducer.js

@@ -0,0 +1,23 @@
+import cartTypes from './cart.types';
+import { handleAddToCart } from './cart.utils';
+
+const INITIAL_STATE = {
+  cartItems: []
+};
+
+const cartReducer = (state = INITIAL_STATE, action) => {
+  switch (action.type) {
+    case cartTypes.ADD_TO_CART:
+      return {
+        ...state,
+        cartItems: handleAddToCart({
+          prevCartItems: state.cartItems,
+          nextCartItem: action.payload
+        })
+      };
+    default:
+      return state;
+  }
+};
+
+export default cartReducer;

src/redux/Cart/cart.selectors.js

@@ -0,0 +1,17 @@
+import { createSelector } from 'reselect';
+
+export const selectCartData = state => state.cartData;
+
+export const selectCartItems = createSelector(
+  [selectCartData],
+  cartData => cartData.cartItems
+);
+
+export const selectCartItemsCount = createSelector(
+  [selectCartItems],
+  cartItems =>
+    cartItems.reduce(
+      (quantity, cartItem) =>
+        quantity + cartItem.quantity
+      , 0)
+);

src/redux/Cart/cart.types.js

@@ -0,0 +1,5 @@
+const cartTypes = {
+  ADD_TO_CART: 'ADD_TO_CART'
+};
+
+export default cartTypes;

src/redux/Cart/cart.utils.js

@@ -0,0 +1,34 @@
+export const existingCartItem = ({
+  prevCartItems,
+  nextCartItem
+}) => {
+  return prevCartItems.find(
+    cartItem => cartItem.documentID === nextCartItem.documentID
+  );
+};
+
+export const handleAddToCart = ({
+  prevCartItems,
+  nextCartItem
+}) => {
+  const quantityIncrement = 1;
+  const cartItemExists = existingCartItem({ prevCartItems, nextCartItem });
+
+  if (cartItemExists) {
+    return prevCartItems.map(cartItem =>
+      cartItem.documentID == nextCartItem.documentID
+        ? {
+          ...cartItem,
+          quantity: cartItem.quantity + quantityIncrement
+        } : cartItem
+    );
+  }
+
+  return [
+    ...prevCartItems,
+    {
+      ...nextCartItem,
+      quantity: quantityIncrement
+    }
+  ];
+};

src/redux/rootReducer.js

@@ -2,8 +2,10 @@ import { combineReducers } from 'redux';
 
 import userReducer from './User/user.reducer';
 import productsReducer from './Products/products.reducer';
+import cartReducer from './Cart/cart.reducer';
 
 export default combineReducers({
   user: userReducer,
-  productsData: productsReducer
+  productsData: productsReducer,
+  cartData: cartReducer
 });