add to cart functionality

package.json

@@ -18,6 +18,7 @@
     "redux-logger": "^3.0.6",
     "redux-saga": "^1.1.3",
     "redux-thunk": "^2.3.0",
+    "reselect": "^4.0.0",
     "web-vitals": "^1.1.0"
   },
   "scripts": {

src/components/Header/index.js

@@ -2,12 +2,14 @@ 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 Header = () => {
   const dispatch = useDispatch();
   const currentUser = useSelector((state) => state.user.currentUser);
+  const totalNumCartItems = useSelector((state) => selectCartItemsCount(state));
   const signOut = () => {
     dispatch(signOutUserStart());
   };
@@ -30,26 +32,27 @@ const Header = () => {
           </ul>
         </nav>
         <div className="callToActions">
-          {currentUser && (
-            <ul>
+          <ul>
+            <li>
+              <Link to="/">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>
+              </li>,
+            ]}
+            {!currentUser && [
               <li>
                 <Link to="/registration">Register</Link>
-              </li>
+              </li>,
               <li>
                 <Link to="/login">Login</Link>
-              </li>
-            </ul>
-          )}
+              </li>,
+            ]}
+          </ul>
         </div>
       </div>
     </header>

src/components/ProductCard/index.js

@@ -5,6 +5,7 @@ import {
   fetchProductStart,
   setProduct,
 } from "./../../redux/Product/products.action";
+import { addProduct } from "./../../redux/Cart/cart.actions";
 import Button from "./../forms/Button";
 import "./styles.scss";
 
@@ -31,6 +32,11 @@ const ProductCard = ({}) => {
     type: "button",
   };
 
+  const handleAddToCart = (product) => {
+    if (!product) return;
+    dispatch(addProduct(product));
+  };
+
   return (
     <div className="productCard">
       <div className="hero">
@@ -46,7 +52,12 @@ const ProductCard = ({}) => {
           </li>
           <li>
             <div className="addToCart">
-              <Button {...configAddToCartBtn}>Add to cart</Button>
+              <Button
+                {...configAddToCartBtn}
+                onClick={() => handleAddToCart(product)}
+              >
+                Add to cart
+              </Button>
             </div>
           </li>
           <li>

src/components/ProductsResults/Product/index.js

@@ -1,13 +1,12 @@
 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 = ({
-  productThumbnail,
-  productName,
-  productPrice,
-  documentID,
-}) => {
+const Product = (product) => {
+  const dispatch = useDispatch();
+  const { productThumbnail, productName, productPrice, documentID } = product;
   if (
     !documentID ||
     !productThumbnail ||
@@ -18,6 +17,10 @@ const Product = ({
   const configAddToCartBtn = {
     type: "button",
   };
+  const handleAddToCart = (product) => {
+    if (!product) return;
+    dispatch(addProduct(product));
+  };
   return (
     <div className="product">
       <div className="thumb">
@@ -37,7 +40,12 @@ const Product = ({
           </li>
           <li>
             <div className="addToCart">
-              <Button {...configAddToCartBtn}>Add To Cart</Button>
+              <Button
+                {...configAddToCartBtn}
+                onClick={() => handleAddToCart(product)}
+              >
+                Add To Cart
+              </Button>
             </div>
           </li>
         </ul>

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.reducers.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,14 @@
+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,19 @@
+export const existingCartItem = ({ prevCartItems, nextCartItem }) => {
+  return prevCartItems.find(
+    (cartItem) => cartItem.documentID === nextCartItem.documentID
+  );
+};
+
+export const handleAddToCart = ({ prevCartItems, nextCartItem }) => {
+  const quantityIncrement = 1;
+  const cartItemExist = existingCartItem({ prevCartItems, nextCartItem });
+
+  if (cartItemExist) {
+    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 productsReducer from "./Product/products.reducers";
 import userReducer from "./User/user.reducer";
+import cartReducer from "./Cart/cart.reducers";
 
 export default combineReducers({
   user: userReducer,
-  productsData: productsReducer
+  productsData: productsReducer,
+  cartData: cartReducer,
 });