[AFP-48 Shaphen Pangburn, Joe Lu]: Disable Add to Cart button if not logged in...

[AFP-48 Shaphen Pangburn, Joe Lu]: Disable Add to Cart button if not logged in and create user cart in backend if it does not already exist

ecom-web/src/actions/cart_actions.js

@@ -7,5 +7,8 @@ const receiveUserCart = cart => ({
     cart
 })
 
-export const fetchUserCart = userId => dispatch => ApiUtil.fetchUserCart(userId)
-    .then(cart => dispatch(receiveUserCart(cart)));
\ No newline at end of file
+export const fetchUserCart = userEmail => dispatch => ApiUtil.fetchUserCart(userEmail)
+    .then(cart => dispatch(receiveUserCart(cart)));
+
+export const createUserCart = newCart => dispatch => ApiUtil.createCart(newCart)
+    .then(res => console.log('yay'))
\ No newline at end of file

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

@@ -94,7 +94,7 @@ export default class ProductItem extends Component {
                         placeholder="Qty"
                         onChange={ this.handleChange("orderItemQuantity") }
                     />
-                    <button className="add-to-cart-button">Add to Cart</button>
+                    <button disabled={ !this.props.user?.currentUser } className="add-to-cart-button">Add to Cart</button>
                 </form>
 
                 <Modal

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

@@ -23,7 +23,7 @@ export default class ProductMarket extends Component {
     products.forEach(prod => {
       promotions.forEach(promo => {
         if (prod.sku === promo.productSku) {
-          prod.promo = (promo.discountPercentage * 100);
+          prod.promo = (promo.discountPercentage);
         }
       });
     });
@@ -40,7 +40,7 @@ export default class ProductMarket extends Component {
             return (
               <div className={prod.productName ? "product-item-container" : "no-item"} key={ prod.sku }>
                 { prod.productName ? 
-                  <ProductItem item={ prod } cart={ this.props.cart }/>
+                  <ProductItem item={ prod } cart={ this.props.cart } user={ this.props.user } />
                   : 
                   <div className="product-item">
                     <p id="prod-not-available">This Product is No Longer Available</p>

ecom-web/src/components/session/session-container.jsx

 import { connect } from 'react-redux';
 import Session from './session';
 import {login, logOut} from '../../actions/session_actions';
-import { fetchUserCart } from '../../actions/cart_actions';
+import { fetchUserCart, createUserCart } from '../../actions/cart_actions';
 
 const mSTP = state => ({
     currentUser: state.user
@@ -10,7 +10,8 @@ const mSTP = state => ({
 const mDTP = dispatch => ({
     login: (userResponse) => dispatch(login(userResponse)),
     logOut: () => dispatch(logOut()),
-    getUserCart: userId => dispatch(fetchUserCart(userId))
+    getUserCart: userId => dispatch(fetchUserCart(userId)),
+    createCart: newCart => dispatch(createUserCart(newCart))
 });
 
 export default connect(mSTP, mDTP)(Session);
\ No newline at end of file

ecom-web/src/components/session/session.jsx

@@ -23,9 +23,17 @@ export default class Session extends Component {
         const userResponse = {idToken: tokenId, userId, email, firstName, lastName, accessToken}
         this.props.login(userResponse)
         this.setState({logIn: true})
+        
+        // try grabbing user cart
         this.props.getUserCart(email)
             .then(res => res.json)
-            .catch(err => err.json)
+            .catch(err => {
+                const newCart = {
+                    userId: email,
+                    cartItems: []
+                }
+                this.props.createCart(newCart)
+            })
     }
 
     loginFailed = (response) => {

ecom-web/src/reducers/user_reducer.js

@@ -9,7 +9,8 @@ const userReducer = (state = initialState, action) => {
     let newState = Object.assign({}, state);
     switch (action.type) {
         case SET_CURRENT_USER:
-            return newState.currentUser = action.user.data;
+            newState.currentUser = action.user.data;
+            return newState;
         case LOGOUT_USER:
             return newState.currentUser = null;
         default:

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}`)
+export const fetchUserCart = userEmail => {
+    return axios.get(`http://localhost:8080/api/carts/${userEmail}`)
+}
+
+export const createCart = newCart => {
+    debugger
+    return axios.post(`http://localhost:8080/api/carts`, newCart)
 }
\ No newline at end of file