[AFP-48 Shaphen Pangburn]: Add redux cycle to persist user cart to global state

ecom-web/src/actions/cart_actions.js

+import * as ApiUtil from '../util/cart_api_util';
+
+export const RECEIVE_USER_CART = "RECEIVE_USER_CART";
+
+const receiveUserCart = cart => ({
+    type: RECEIVE_USER_CART,
+    cart
+})
+
+export const fetchUserCart = userId => dispatch => ApiUtil.fetchUserCart(userId)
+    .then(cart => dispatch(receiveUserCart(cart)));
\ No newline at end of file

ecom-web/src/components/product-market/product-item.jsx

@@ -7,6 +7,7 @@ export default class ProductItem extends Component {
     constructor(props) {
         super(props)
         this.state = {
+            orderItemQuantity: 0,
             showDetailsModal: false
         }
         this.handleSubmit = this.handleSubmit.bind(this);
@@ -18,12 +19,29 @@ export default class ProductItem extends Component {
         this.setState({ showDetailsModal: !prevState });
     }
 
+    handleChange(type) {
+        return e => {
+            this.setState({ [type]: e.target.value })
+        }
+    }
+
     calculateDiscount(price, discount) {
         return (price * ((100 - discount) / 100)).toFixed(2);
     }
 
     handleSubmit(e, product) {
         e.preventDefault();
+        // const newCart = Object.assign({}, this.props.cart);
+        // const newCartItem = {
+        //     productRef: {
+        //         id: product.sku,
+        //         sku: product.sku,
+        //         upc: product.upc,
+        //     },
+        //     quantity: this.state.orderItemQuantity;
+        // }
+        // newCart.cartItems.push(newCartItem);
+        // this.ptops.addCartItem(newCart);
     }
     
     render() {
@@ -56,7 +74,12 @@ export default class ProductItem extends Component {
                     { "Save " + this.props.item.promo + "% on this item!"}
                 </p> : ""}
                 <form onSubmit={ e => this.handleSubmit(e, this.props.item) } className="add-cart-and-quantity">
-                    <input className="order-quantity" type="number" placeholder="Qty" />
+                    <input 
+                        className="order-quantity" 
+                        type="number" 
+                        placeholder="Qty"
+                        onChange={ this.handleChange("orderItemQuantity") }
+                    />
                     <button className="add-to-cart-button">Add to Cart</button>
                 </form>
 

ecom-web/src/components/product-market/product-market-container.jsx

 import { connect } from 'react-redux';
 import ProductMarket from './product-market';
 import { fetchProducts, fetchPromotions } from '../../actions/product_actions';
+import { fetchUserCart } from '../../actions/cart_actions';
 
 const mSTP = state => ({
   products: state.market.products,
   promotions: state.market.promotions,
+  user: state.user
 });
 
 const mDTP = dispatch => ({
   getProducts: () => dispatch(fetchProducts()),
-  getPromotions: () => dispatch(fetchPromotions())
+  getPromotions: () => dispatch(fetchPromotions()),
+  getUserCart: userId => dispatch(fetchUserCart(userId))
 });
 
 export default connect(mSTP, mDTP)(ProductMarket);
\ No newline at end of file

ecom-web/src/components/product-market/product-market.jsx

@@ -14,6 +14,7 @@ export default class ProductMarket extends Component {
   componentDidMount() {
     this.props.getProducts();
     this.props.getPromotions();
+    // this.props.getUserCart(this.props.user.emailAddress);
   }
   
   render() {

ecom-web/src/reducers/user_reducer.js

 import {SET_CURRENT_USER, LOGOUT_USER} from '../actions/session_actions'
+import { RECEIVE_USER_CART } from '../actions/cart_actions';
 
-const initialState = {currentUser: null}
+const initialState = {
+    currentUser: null,
+    cart: {},
+}
 const userReducer = (state = initialState, action) => {
     Object.freeze(state);
     let newState = Object.assign({}, state);
     switch (action.type) {
         case SET_CURRENT_USER:
             return newState.currentUser = { emailAddress: 'fakeEmail@123'};
-        
         case LOGOUT_USER:
             return newState.currentUser = null;
-        
+        case RECEIVE_USER_CART:
+            return newState.cart = action.cart
         default:
             return state;
     }

ecom-web/src/util/cart_api_util.js

+import axios from 'axios';
+
+export const fetchUserCart = userId => {
+    return axios.get(`http://localhost:8080/api/carts/${userId}`)
+}
\ No newline at end of file