Delete item from cart updates backend and componenet, not redux state though....

Delete item from cart updates backend and componenet, not redux state though. Also cleaned up debug code in checkout component

ecom-web/src/components/checkout/SubmitOrder.js

@@ -18,7 +18,7 @@ export default function SubmitOrder(props) {
 
             <div id="SubmitButtonContainer">
                 <p className="errorMessage">{(props.errorWhileValidating === 1 && props.allFieldsValidated[0] === 0)? 'One or more fields is missing a value' : ''}</p>
-                <button id="SubmitButtonInput" onClick={handleSubmitClick} >Submit Order</button>
+                <button id="SubmitButtonInput" onClick={() => {handleSubmitClick()}} >Submit Order</button>
             </div>
 
         </div>

ecom-web/src/components/checkout/checkout.js

@@ -17,6 +17,13 @@ export default function Checkout() {
     ///////////////////////
     // const {currentUser} = useSelector(state => state)
     // const {cart} = useSelector(state => state)
+    
+    
+    ///////////////////////
+    // Submit Action State
+    ///////////////////////
+    
+    const dispatch = useDispatch()
 
     ///////////////////////
     // Shipping Info State
@@ -56,15 +63,6 @@ export default function Checkout() {
     const [errorWhileValidating, setErrorWhileValidating] = useState([0])
 
 
-    ///////////////////////
-    // Submit Action State
-    ///////////////////////
-    
-    const dispatch = useDispatch()
-
-
-
-
     // This effect listens for the submit button to be clicked
     // It then checks each of the required fields to make sure they are non null
     useEffect( () => {
@@ -79,11 +77,7 @@ export default function Checkout() {
                 shippingAddress,
                 city,
                 state,
-                zipCode,
-                // cardNumber,
-                // cardHolderName,
-                // expirationDate,
-                // cvv
+                zipCode
             ]
     
             // initially validated, gets flipped if required field is empty
@@ -128,19 +122,6 @@ export default function Checkout() {
 
     let handleSubmit = () => {
         console.log("Submitting Order!")
-        // let order = {}
-        // order["firstName"] = firstName
-        // order["lastName"] = lastName
-        // order["shippingAddress"] = shippingAddress
-        // order["aptSuitNo"] = aptSuiteNo
-        // order["city"] = city
-        // order["state"] = state
-        // order["zipCode"] = zipCode
-        // order["cardNumber"] = cardNumber
-        // order["cardHolderName"] = cardHolderName
-        // order["expirationDate"] = expirationDate
-        // order["cvv"] = cvv
-        // console.log(order)
 
         let chrisSpec = {
             "user": {
@@ -175,32 +156,6 @@ export default function Checkout() {
 
     }
 
-
-
-
-    // This watches for changes on any shipping input fields and prints the current states on any change
-    useEffect( () => {
-        console.log("======================================")
-        console.log("First Name: " + firstName)
-        console.log("Last Name: " + lastName)
-        console.log("Shipping Address: " + shippingAddress)
-        console.log("Apt Suite No: " + aptSuiteNo)
-        console.log("City: " + city)
-        console.log("State: " + state)
-        console.log("Zip: " + zipCode)
-    }, [firstName, lastName, shippingAddress, aptSuiteNo, city, state, zipCode])
-
-
-    // This watches for changes on any billing input fields and prints the current states on any change
-    useEffect( () => {
-        console.log("======================================")
-        console.log("Card Number: " + cardNumber)
-        console.log("Card Holder Name: " + cardHolderName)
-        console.log("Expiration Date: " + expirationDate)
-        console.log("CVV: " + cvv)
-    }, [cardNumber, cardHolderName, expirationDate, cvv])
-
-
     return (
         <div id="checkout-container">
 

ecom-web/src/components/shopping-cart/CartItem.js

@@ -3,6 +3,7 @@ import './shopping-cart.css'
 
 export default function CartItem(props) {
      
+
     return (
         <div className="shoppingCartItem" >
             {/* This is based on amazon's style */}
@@ -20,7 +21,7 @@ export default function CartItem(props) {
                 
                 <div className="quantityControls">
                     <select className="productQuantitySelect"><option>{props.quantity}</option></select>
-                    <button>Delete</button>
+                    <button onClick={() => { props.handleDelete(props.productInfo.sku) }}>Delete</button>
                 </div>
                 
             </div>

ecom-web/src/components/shopping-cart/shopping-cart.js

@@ -3,31 +3,58 @@ import CartItem from './CartItem.js'
 import './shopping-cart.css'
 import { useSelector, useDispatch } from 'react-redux'
 import { Link } from 'react-router-dom'
+import axios from 'axios'
 
 export default function ShoppingCart() {
 
+  const [userSession, setUserSession] = useState(useSelector(state => state.user.currentUser))
   const [allProducts, setAllProducts] = useState(useSelector(state => state.market.products))
   const [cartRefs, setCartRefs] = useState(useSelector(state => state.cart))
   const [cartItems, setCartItems] = useState([])
 
 
+  // This effect collects the products that are mapped to the cartRefs in the user's cart
+  //    and assigns the list of producct-supplemented cart items to the cartItems state
   useEffect(() => {
-
     const productsFromRefs = []
 
     cartRefs.map((cartRef) => {
-      let tempCartItem = {
-        product: allProducts.filter((currProduct) => currProduct.sku === cartRef.productRef.sku)[0],
-        quantity: cartRef.quantity
-      }
-      
-      productsFromRefs.push(tempCartItem)
+      productsFromRefs.push(({product: allProducts.filter((currProduct) => (currProduct.sku === cartRef.productRef.sku))[0], quantity: cartRef.quantity}))
     })
 
     setCartItems(productsFromRefs)
 
   }, [cartRefs])
 
+  
+  // This function deletes an item from the user's cart
+  let handleDelete = (skuToBeDeleted) => {
+    console.log("SKU to be deleted: " + skuToBeDeleted)
+
+    const newCartRefs = cartRefs.filter((cartRef) => !(cartRef.productRef.sku === skuToBeDeleted))
+    setCartRefs(newCartRefs)
+
+  }
+
+  let updateCart = async () => {
+
+    const cartUpdateObj = {
+      userId: userSession.email,
+      cartItems: cartRefs
+    }
+
+    console.log(JSON.stringify(cartUpdateObj))
+
+    const response = await axios.put(`http://localhost:8080/api/carts/${userSession.email}`, cartUpdateObj)
+    return response
+  }
+
+
+  useEffect(() => {
+
+    console.log(updateCart())
+
+  }, [cartItems])
 
   return (
     <div id="shoppingCartContainer">
@@ -37,7 +64,12 @@ export default function ShoppingCart() {
       <div id="cartItemList">
         {cartItems.map((currItem) => {
           return (
-            <CartItem productInfo={currItem.product} quantity={currItem.quantity} key={currItem.product.sku}/>
+            <CartItem 
+                  productInfo={currItem.product} 
+                  quantity={currItem.quantity} 
+                  handleDelete={handleDelete}
+                  key={currItem.product.sku} 
+            />
           )
         })}
       </div>