Done with ticket for now

ecom-web/src/components/Header/header-cart.jsx

 import React, { Component } from 'react'
 import './header.css';
-import { NavLink} from "react-router-dom"
 import Nav from "react-bootstrap/Nav"
+import {LinkContainer} from 'react-router-bootstrap'
 
 
-import { NavLink} from 'react-router-dom'
-import Nav from 'react-bootstrap/Nav'
-
 export default class HeaderCart extends Component {
     constructor(props) {
         super(props)
@@ -15,7 +12,9 @@ export default class HeaderCart extends Component {
     render() {
         return (
             <div>
-                <Nav.Link href="/cart">Cart</Nav.Link>
+                <LinkContainer to="/cart" >
+                    <Nav.Link id="nav-Cart-link">Cart</Nav.Link>
+                </LinkContainer>
             </div>
         )
     }

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

@@ -20,7 +20,17 @@ export default function CartItem(props) {
                 <div className="productStock">{props.productInfo.availableStock} left in stock</div>
                 
                 <div className="quantityControls">
-                    <select className="productQuantitySelect"><option>{props.quantity}</option></select>
+                    
+                    <input 
+                        className="productQuantitySelect"
+                        type="number"
+                        value={props.quantity}
+                        min="1"
+                        max="99"
+                        onChange={(e) => {props.handleQuantityUpdate(props.productInfo.sku, e.target.value)}}
+                    />
+                    
+                    
                     <button onClick={() => { props.handleDelete(props.productInfo.sku) }}>Delete</button>
                 </div>
                 

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

@@ -3,59 +3,88 @@ 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'
+import { updateUserCart } from './../../actions/cart_actions'
+
 
 export default function ShoppingCart() {
 
-  const [userSession, setUserSession] = useState(useSelector(state => state.user.currentUser))
-  const [allProducts, setAllProducts] = useState(useSelector(state => state.market.products))
+  const dispatch = useDispatch()
+
+  const userSession = useSelector(state => state.user.currentUser)
+  const allProducts = 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
+  ////////////////////////////////////////////////////////////////
+  // Map Product Refs to Products that exist in redux global state
+  ////////////////////////////////////////////////////////////////
   useEffect(() => {
+
     const productsFromRefs = []
 
     cartRefs.map((cartRef) => {
-      productsFromRefs.push(({ product: allProducts.filter((currProduct) => (currProduct.sku === cartRef.productRef.sku))[0], quantity: cartRef.quantity }))
+      productsFromRefs.push((
+        {
+          product: allProducts.filter((currProduct) => (currProduct.sku === cartRef.productRef.sku))[0],
+          quantity: cartRef.quantity
+        }))
     })
 
+    console.log("NEW PRODUCTS FROM REFS YO")
+    console.log(productsFromRefs)
     setCartItems(productsFromRefs)
 
   }, [cartRefs])
 
 
-  // This function deletes an item from the user's cart
+  ////////////////////////////////
+  // Delete Item from 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
-      }
+  ////////////////////////////////
+  // Update Quantity of an item
+  ////////////////////////////////
+  let handleQuantityUpdate = (skuToBeUpdated, newQuantity) => {
 
-      console.log(JSON.stringify(cartUpdateObj))
+    const newCartRefs = []
     
-      const response = await axios.put(`http://localhost:8080/api/carts/${userSession.email}`, cartUpdateObj)
-      return response
+    cartRefs.map( (cartRef) => {
+      if (cartRef.productRef.sku === skuToBeUpdated) {
+        let temp = cartRef
+        temp.quantity = newQuantity
+        newCartRefs.push(temp)
+      }
+      else {
+        newCartRefs.push(cartRef)
       }
+    })
 
+    setCartRefs(newCartRefs)
+  }
 
+  ////////////////////////////////////////////////////////////////
+  // Sync Cart with backend and redux global state
+  ////////////////////////////////////////////////////////////////
   useEffect(() => {
 
-    console.log(updateCart())
+    const cartUpdateObj = {
+      userId: userSession.email,
+      cartItems: cartRefs
+    }
+
+    dispatch(updateUserCart(cartUpdateObj, cartUpdateObj.userId))
 
   }, [cartItems])
 
+
   return (
     <div id="shoppingCartContainer">
 
@@ -68,6 +97,7 @@ export default function ShoppingCart() {
               productInfo={currItem.product}
               quantity={currItem.quantity}
               handleDelete={handleDelete}
+              handleQuantityUpdate={handleQuantityUpdate}
               key={currItem.product.sku}
             />
           )

ecom-web/src/reducers/user_reducer.js

@@ -12,7 +12,7 @@ const userReducer = (state = initialState, action) => {
             newState.currentUser = action.user.data;
             return newState;
         case LOGOUT_USER:
-            return newState.currentUser = null;
+            return newState.currentUser = ({currentUser: null});
         default:
             return state;
     }