Add functions to sum cart items and costs

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>

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>

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 />
+    );
+}

src/components/Router/Router.js

@@ -4,15 +4,15 @@ 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 (
     <main aria-live='polite'>
       <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>

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]}>

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,22 +12,22 @@ 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) {
             return { ...item, quantity: newQuantity };
           }
           return item;
         });
-
         return [...cartAfterQuantityAdd];
       }
+
       return [...state, payload];
     case 'UPDATE_QUANTITY':
       return [...state, payload];

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 };