From 575217c6821a1484658d20ca30c4eddd75682393 Mon Sep 17 00:00:00 2001
From: thatblindgeye <thatblindgeye@gmail.com>
Date: Sat, 17 Jul 2021 06:50:51 -0400
Subject: [PATCH] Add functions to sum cart items and costs

---
 src/components/Navbar/HeaderNavbar.js |  4 +-
 src/components/Pages/Cart.js          |  9 ++++-
 src/components/Pages/Item.js          | 56 +++++++++++++++++++++++++++
 src/components/Pages/ItemDetails.js   | 54 --------------------------
 src/components/Router/Router.js       |  4 +-
 src/context/CartDataContext.js        |  4 +-
 src/reducers/cartReducer.js           | 16 ++++----
 src/scripts/utilities.js              | 23 +++++++++++
 8 files changed, 102 insertions(+), 68 deletions(-)
 create mode 100644 src/components/Pages/Item.js
 delete mode 100644 src/components/Pages/ItemDetails.js
 create mode 100644 src/scripts/utilities.js

diff --git a/src/components/Navbar/HeaderNavbar.js b/src/components/Navbar/HeaderNavbar.js
index 0848710..c4f7eaf 100644
--- a/src/components/Navbar/HeaderNavbar.js
+++ b/src/components/Navbar/HeaderNavbar.js
@@ -3,9 +3,11 @@ import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
 import { ReactComponent as CartIcon } from '../../assets/images/icons/cart.svg';
 import { CartDataContext } from '../../context/CartDataContext';
+import { sumQuantities } from '../../scripts/utilities';
 
 export default function HeaderNavbar() {
   const [cartItems] = useContext(CartDataContext);
+  const totalCartItems = sumQuantities(cartItems);
 
   return (
     <nav className='header-nav' aria-label='main navigation'>
@@ -23,7 +25,7 @@ export default function HeaderNavbar() {
         <li>
           <Link to='/cart' className='link' aria-label='Shopping cart'>
             <CartIcon className='cart-icon' />
-            <span className='current-cart-amount'>{cartItems.length}</span>
+            <span className='current-cart-amount'>{totalCartItems}</span>
           </Link>
         </li>
       </ul>
diff --git a/src/components/Pages/Cart.js b/src/components/Pages/Cart.js
index 3f04f3a..0b5bdf5 100644
--- a/src/components/Pages/Cart.js
+++ b/src/components/Pages/Cart.js
@@ -2,9 +2,11 @@
 import React, { useEffect, useContext } from 'react';
 import { Link } from 'react-router-dom';
 import { CartDataContext } from '../../context/CartDataContext';
+import { sumCartCosts, sumItemCost } from '../../scripts/utilities';
 
 export default function Cart() {
   const [cartItems, dispatch] = useContext(CartDataContext);
+  const totalCost = sumCartCosts(cartItems);
 
   useEffect(() => {
     document.title = 'Shopping Cart | Enbious';
@@ -16,18 +18,23 @@ export default function Cart() {
         <div>
           <ul role='list' aria-label='Shopping cart'>
             {cartItems.map((cartItem, cartIndex) => {
+              const itemCost = sumItemCost(cartItem);
+
               return (
                 <li key={cartIndex}>
                   <div>{cartItem.name}</div>
                   <div>{cartItem.quantity}</div>
+                  <div>${itemCost}</div>
                 </li>
               );
             })}
           </ul>
+          <div>Total: ${totalCost}</div>
         </div>
       ) : (
         <div>
-          Your cart is empty. <Link to='/shop'>Continue shopping</Link>.
+          Your cart is empty.
+          <Link to='/shop'>Continue shopping.</Link>
         </div>
       )}
     </div>
diff --git a/src/components/Pages/Item.js b/src/components/Pages/Item.js
new file mode 100644
index 0000000..e05f868
--- /dev/null
+++ b/src/components/Pages/Item.js
@@ -0,0 +1,56 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { useParams } from 'react-router-dom';
+import { CartDataContext } from '../../context/CartDataContext';
+import QuantitySelect from '../Inputs/QuantitySelect';
+import NoMatch from './NoMatch';
+import inventory from '../../inventory.json';
+
+export default function Item() {
+    const [item, setItem] = useState({});
+    const [quantity, setQuantity] = useState(1);
+    const [addedToCart, setAddedToCart] = useState(false);
+    const [, dispatch] = useContext(CartDataContext);
+    const params = useParams();
+
+    useEffect(() => {
+        document.title = item ? `${item.name} | Enbious` : 'Enbious';
+    }, [item]);
+
+    useEffect(() => {
+        setItem(inventory.clothing[params.itemId]);
+    }, [params]);
+
+    const handleQuantityChange = (e) => {
+        setQuantity(Number(e.target.value));
+    };
+
+    const handleCartAdd = () => {
+        return dispatch({
+            type: 'ADD_ITEM',
+            payload: {
+                ...item,
+                quantity,
+            },
+        });
+    };
+
+    return item ? (
+        <div className='item-details-container'>
+            <h1>{item.name}</h1>
+            <div className='item-description'>{item.description}</div>
+            <label htmlFor='quantity'>Quantity</label>
+            <QuantitySelect
+                changeEvent={handleQuantityChange}
+                inputId='quantity'
+                stock={item.stock}
+                quantity={quantity}
+            />
+            <button className='add-cart-btn' onClick={handleCartAdd}>
+                Add to Cart
+            </button>
+            {addedToCart ? <div>Added!</div> : null}
+        </div>
+    ) : (
+        <NoMatch />
+    );
+}
diff --git a/src/components/Pages/ItemDetails.js b/src/components/Pages/ItemDetails.js
deleted file mode 100644
index 4c9c5e5..0000000
--- a/src/components/Pages/ItemDetails.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { useState, useEffect, useContext } from 'react';
-import { useParams } from 'react-router-dom';
-import { CartDataContext } from '../../context/CartDataContext';
-import QuantitySelect from '../Inputs/QuantitySelect';
-import NoMatch from './NoMatch';
-import inventory from '../../inventory.json';
-
-export default function ItemDetails() {
-  const [item, setItem] = useState({});
-  const [quantity, setQuantity] = useState(1);
-  const [, dispatch] = useContext(CartDataContext);
-  const params = useParams();
-
-  useEffect(() => {
-    document.title = item ? `${item.name} | Enbious` : 'Enbious';
-  }, [item]);
-
-  useEffect(() => {
-    setItem(inventory.clothing[params.itemId]);
-  }, [params]);
-
-  const handleQuantityChange = (e) => {
-    setQuantity(Number(e.target.value));
-  };
-
-  const handleCartAdd = () => {
-    return dispatch({
-      type: 'ADD_ITEM',
-      payload: {
-        ...item,
-        quantity,
-      },
-    });
-  };
-
-  return item ? (
-    <div className='item-details-container'>
-      <h1>{item.name}</h1>
-      <div className='item-description'>{item.description}</div>
-      <label htmlFor='quantity'>Quantity</label>
-      <QuantitySelect
-        changeEvent={handleQuantityChange}
-        inputId='quantity'
-        stock={item.stock}
-        quantity={quantity}
-      />
-      <button className='add-cart-btn' onClick={handleCartAdd}>
-        Add to Cart
-      </button>
-    </div>
-  ) : (
-    <NoMatch />
-  );
-}
diff --git a/src/components/Router/Router.js b/src/components/Router/Router.js
index e51437e..d708c9f 100644
--- a/src/components/Router/Router.js
+++ b/src/components/Router/Router.js
@@ -4,7 +4,7 @@ import Home from '../Pages/Home';
 import Cart from '../Pages/Cart';
 import Shop from '../Pages/Shop';
 import NoMatch from '../Pages/NoMatch';
-import ItemDetails from '../Pages/ItemDetails';
+import Item from '../Pages/Item';
 
 export default function Router() {
   return (
@@ -12,7 +12,7 @@ export default function Router() {
       <Switch>
         <Route exact path='/' component={Home} />
         <Route exact path='/shop' component={Shop} />
-        <Route exact path='/shop/:itemId' component={ItemDetails} />
+        <Route exact path='/shop/:itemId' component={Item} />
         <Route path='/cart' component={Cart} />
         <Route component={NoMatch} />
       </Switch>
diff --git a/src/context/CartDataContext.js b/src/context/CartDataContext.js
index f59bb89..92fbbdf 100644
--- a/src/context/CartDataContext.js
+++ b/src/context/CartDataContext.js
@@ -2,10 +2,10 @@ import { createContext, useReducer } from 'react';
 import cartReducer from '../reducers/cartReducer';
 
 const CartDataContext = createContext();
-const initialState = [];
+const initialCartItems = [];
 
 function CartDataContextProvider({ children }) {
-  const [cartItems, dispatch] = useReducer(cartReducer, initialState);
+  const [cartItems, dispatch] = useReducer(cartReducer, initialCartItems);
 
   return (
     <CartDataContext.Provider value={[cartItems, dispatch]}>
diff --git a/src/reducers/cartReducer.js b/src/reducers/cartReducer.js
index 1009495..6399bd1 100644
--- a/src/reducers/cartReducer.js
+++ b/src/reducers/cartReducer.js
@@ -1,8 +1,8 @@
-function searchForItemIndex(dataToSearch, itemId) {
-  let itemIndex;
+function searchForItem(cartData, idData) {
+  let itemIndex = undefined;
 
-  dataToSearch.forEach((item, index) => {
-    if (item.id === itemId) {
+  cartData.forEach((item, index) => {
+    if (item.id === idData) {
       itemIndex = index;
     }
   });
@@ -12,12 +12,12 @@ function searchForItemIndex(dataToSearch, itemId) {
 
 const cartReducer = (state, action) => {
   const { payload, type } = action;
-  const itemInCart = searchForItemIndex(state, payload.id);
+  const cartItemIndex = searchForItem(state, payload.id);
 
   switch (type) {
     case 'ADD_ITEM':
-      if (itemInCart >= 0) {
-        const newQuantity = state[itemInCart].quantity + payload.quantity;
+      if (cartItemIndex >= 0) {
+        const newQuantity = state[cartItemIndex].quantity + payload.quantity;
 
         const cartAfterQuantityAdd = state.map((item) => {
           if (item.id === payload.id) {
@@ -25,9 +25,9 @@ const cartReducer = (state, action) => {
           }
           return item;
         });
-
         return [...cartAfterQuantityAdd];
       }
+
       return [...state, payload];
     case 'UPDATE_QUANTITY':
       return [...state, payload];
diff --git a/src/scripts/utilities.js b/src/scripts/utilities.js
new file mode 100644
index 0000000..545b7ff
--- /dev/null
+++ b/src/scripts/utilities.js
@@ -0,0 +1,23 @@
+function sumItemCost(cartData) {
+  return (cartData.price * cartData.quantity).toFixed(2);
+}
+
+function sumCartCosts(cartData) {
+  const totalCost = cartData.map((cartItem) => {
+    return cartItem.quantity * cartItem.price;
+  });
+
+  const summedCost = totalCost.reduce((total, current) => total + current, 0);
+
+  return summedCost.toFixed(2);
+}
+
+function sumQuantities(cartData) {
+  const totalQuantity = cartData.map((cartItem) => {
+    return cartItem.quantity;
+  });
+
+  return totalQuantity.reduce((total, current) => total + current, 0);
+}
+
+export { sumCartCosts, sumItemCost, sumQuantities };