Add logic to increment and decrement inputs

thatblindgeye · Jul 17, 2021 · 9568258 · 9568258
1 parent 7294866
commit 9568258
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 41 deletions.
diff --git a/src/components/Cards/CartCard.js b/src/components/Cards/CartCard.js
@@ -1,12 +1,13 @@
 import React, { useContext, useEffect } from 'react';
 import { CartDataContext } from '../../context/CartDataContext';
 import Quantity from '../Inputs/Quantity';
+import { sumItemCost } from '../../scripts/utilities';
 
 export default function CartItem({ cartItem, itemCost }) {
     const [, dispatch] = useContext(CartDataContext);
     const { name, quantity, stock } = cartItem;
 
-    const handleUpdateItem = (e) => {
+    const handleQuantityChange = (e) => {
         return dispatch({
             type: 'UPDATE_QUANTITY',
             payload: {
@@ -16,6 +17,28 @@ export default function CartItem({ cartItem, itemCost }) {
         });
     };
 
+    const handleQuantityIncrement = () => {
+        if (quantity === stock) return;
+        return dispatch({
+            type: 'UPDATE_QUANTITY',
+            payload: {
+                ...cartItem,
+                quantity: quantity + 1,
+            },
+        });
+    };
+
+    const handleQuantityDecrement = () => {
+        if (quantity === 1) return;
+        return dispatch({
+            type: 'UPDATE_QUANTITY',
+            payload: {
+                ...cartItem,
+                quantity: quantity - 1,
+            },
+        });
+    };
+
     const handleRemoveItem = (index) => {
         return dispatch({
             type: 'REMOVE_FROM_CART',
@@ -30,12 +53,14 @@ export default function CartItem({ cartItem, itemCost }) {
             <div>{name}</div>
             <div>{quantity}</div>
             <Quantity
-                changeEvent={handleUpdateItem}
+                changeEvent={handleQuantityChange}
+                incrementEvent={handleQuantityIncrement}
+                decrementEvent={handleQuantityDecrement}
                 inputId='quantity'
                 stock={stock}
                 quantity={quantity}
             />
-            <div>${itemCost}</div>
+            <div>${sumItemCost(cartItem)}</div>
             <button onClick={handleRemoveItem}>Delete</button>
         </div>
     );

diff --git a/src/components/Pages/Cart.js b/src/components/Pages/Cart.js
@@ -1,65 +1,42 @@
 /* eslint-disable jsx-a11y/no-redundant-roles */
-import React, { useEffect, useContext } from 'react';
+import React, { useEffect, useContext, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { CartDataContext } from '../../context/CartDataContext';
-import { sumCartCosts, sumItemCost } from '../../scripts/utilities';
+import { sumCartCosts } from '../../scripts/utilities';
 import CartItem from '../Cards/CartCard';
 
 export default function Cart() {
     const [cartItems, dispatch] = useContext(CartDataContext);
+    const [isCheckedOut, setIsCheckedOut] = useState(false);
     const totalCost = sumCartCosts(cartItems);
 
     useEffect(() => {
         document.title = 'Shopping Cart | Enbious';
     }, []);
 
-    const handleUpdateItem = (e, index) => {
-        return dispatch({
-            type: 'UPDATE_QUANTITY',
-            payload: {
-                ...cartItems[index],
-                quantity: Number(e.target.value),
-            },
-        });
-    };
+    const checkoutCart = () => {
+        setIsCheckedOut(true);
 
-    const handleRemoveItem = (index) => {
         return dispatch({
-            type: 'REMOVE_FROM_CART',
-            payload: {
-                ...cartItems[index],
-            },
+            type: 'CLEAR_CART',
         });
     };
 
-    return (
+    return !isCheckedOut ? (
         <div>
             {cartItems.length ? (
                 <div>
                     <ul role='list' aria-label='Shopping cart'>
                         {cartItems.map((cartItem, cartIndex) => {
-                            const itemCost = sumItemCost(cartItem);
-                            const { name, quantity, stock } = cartItem;
-
                             return (
                                 <li key={cartIndex}>
-                                    <CartItem
-                                        name={name}
-                                        quantity={quantity}
-                                        stock={stock}
-                                        itemCost={itemCost}
-                                        changeEvent={(e) => {
-                                            handleUpdateItem(e, cartIndex);
-                                        }}
-                                        removeEvent={() => {
-                                            handleRemoveItem(cartIndex);
-                                        }}
-                                    />
+                                    <CartItem cartItem={cartItem} />
                                 </li>
                             );
                         })}
                     </ul>
                     <div>Total: ${totalCost}</div>
+                    <button onClick={checkoutCart}>Place Order</button>
                 </div>
             ) : (
                 <div>
@@ -68,5 +45,7 @@ export default function Cart() {
                 </div>
             )}
         </div>
+    ) : (
+        <div>Your order has been placed!</div>
     );
 }
diff --git a/src/components/Pages/Item.js b/src/components/Pages/Item.js
@@ -1,16 +1,16 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { useParams } from 'react-router-dom';
 import { CartDataContext } from '../../context/CartDataContext';
-import QuantitySelect from '../Inputs/QuantitySelect';
+import Quantity from '../Inputs/Quantity';
 import NoMatch from './NoMatch';
 import inventory from '../../inventory.json';
 
 export default function Item() {
+    const params = useParams();
     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';
@@ -36,6 +36,20 @@ export default function Item() {
         setQuantity(Number(e.target.value));
     };
 
+    const handleQuantityIncrement = (e) => {
+        if (quantity === item.stock) return;
+        setQuantity((prevState) => {
+            return prevState + 1;
+        });
+    };
+
+    const handleQuantityDecrement = (e) => {
+        if (quantity === 1) return;
+        setQuantity((prevState) => {
+            return prevState - 1;
+        });
+    };
+
     const handleCartAdd = () => {
         setAddedToCart(true);
         return dispatch({
@@ -51,10 +65,11 @@ export default function Item() {
         <div className='item-details-container'>
             <h1>{item.name}</h1>
             <div className='item-description'>{item.description}</div>
-            <label htmlFor='quantity'>Quantity</label>
-            <QuantitySelect
+            <Quantity
+                decrementEvent={handleQuantityDecrement}
                 changeEvent={handleQuantityChange}
-                inputId='quantity'
+                incrementEvent={handleQuantityIncrement}
+                inputId={item.id}
                 stock={item.stock}
                 quantity={quantity}
             />

diff --git a/src/reducers/cartReducer.js b/src/reducers/cartReducer.js
@@ -12,10 +12,11 @@ function searchForItem(cartData, idData) {
 
 const cartReducer = (state, action) => {
     const { payload, type } = action;
-    const cartItemIndex = searchForItem(state, payload.id);
 
     switch (type) {
         case 'ADD_ITEM':
+            const cartItemIndex = searchForItem(state, payload.id);
+
             if (cartItemIndex >= 0) {
                 const newQuantity =
                     state[cartItemIndex].quantity + payload.quantity;
@@ -47,6 +48,8 @@ const cartReducer = (state, action) => {
             });
 
             return [...cartAfterRemoval];
+        case 'CLEAR_CART':
+            return [];
         default: {
             console.log('error');
         }