Like half way through moving logic to utils / reducers. Order placement so...

Like half way through moving logic to utils / reducers. Order placement so close to working. Backend issue is ocurring

ecom-web/src/actions/cart_actions.js

@@ -3,6 +3,7 @@ import * as ApiUtil from '../util/cart_api_util';
 export const RECEIVE_USER_CART = "RECEIVE_USER_CART";
 export const CLEAR_USER_CART = "CLEAR_USER_CART";
 
+
 const receiveUserCart = cart => ({
     type: RECEIVE_USER_CART,
     cart
@@ -12,6 +13,7 @@ export const clearUserCart = () => ({
     type: CLEAR_USER_CART
 })
 
+
 export const fetchUserCart = userEmail => dispatch => ApiUtil.fetchUserCart(userEmail)
     .then(cart => dispatch(receiveUserCart(cart)));
 
@@ -20,3 +22,4 @@ export const updateUserCart = (updatedCart, userEmail) => dispatch => ApiUtil.up
 
 export const createUserCart = newCart => dispatch => ApiUtil.createCart(newCart)
     .then(res => res.json)
+

ecom-web/src/actions/cart_processing_actions.js

+import {priceCalcUtil, numItemsCalcUtil} from '../util/cart_processing_util'
+
+export const GET_TOTAL_PRICE = "GET_TOTAL_PRICE"
+export const GET_NUM_ITEMS = "GET_NUM_ITEMS"
+export const GET_CART_PRODUCTS = "GET_CART_PRODUCTS"
+
+export const getTotalPrice = (totalPrice) => ({
+    type: GET_TOTAL_PRICE,
+    payload: totalPrice
+})
+
+export const getNumItems = (numItems) => ({
+    type: GET_NUM_ITEMS,
+    payload: numItems
+})
+
+export const getCartProducts = (cartProducts) => ({
+    type: GET_CART_PRODUCTS,
+    payload: cartProducts
+})
+
+
+export const calcTotalPrice = (productList) => {
+    return (dispatch) => {
+        return dispatch(getTotalPrice(priceCalcUtil(productList)))
+    }
+}
+
+export const calcNumItems = (productList) => {
+    return (dispatch) => {
+        return dispatch(getNumItems(numItemsCalcUtil(productList)))
+    }
+}
+
+export const storeCartItemsInProcessing = (productList) => {
+    return (dispatch) => {
+        return dispatch(getCartProducts(productList))
+    }
+}
\ No newline at end of file

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

@@ -12,36 +12,26 @@ import {dispatchOrderInfo} from './../../actions/checkout_actions'
 
 export default function Checkout() {
     
-    ///////////////////////
-    // REDUX Global State
-    ///////////////////////
-    // const {currentUser} = useSelector(state => state)
-    // const {cart} = useSelector(state => state)
-    
-    
-    ///////////////////////
-    // Submit Action State
-    ///////////////////////
-    
+
     const dispatch = useDispatch()
 
     ///////////////////////
     // Shipping Info State
     ///////////////////////
-    const [firstName, setFirstName] = useState([])
-    const [lastName, setLastName] = useState([])
-    const [shippingAddress, setShippingAddress] = useState([])
-    const [aptSuiteNo, setAptSuiteNo] = useState([])
-    const [city, setCity] = useState([])
-    const [state, setState] = useState([])
-    const [zipCode, setZipCode] = useState([])
+    const [firstName, setFirstName] = useState(["Guy"])
+    const [lastName, setLastName] = useState(["Fieri"])
+    const [shippingAddress, setShippingAddress] = useState(["1234 Flavortown Dr"])
+    const [aptSuiteNo, setAptSuiteNo] = useState(["Apt 317"])
+    const [city, setCity] = useState(["Santa Rosa"])
+    const [state, setState] = useState(["California"])
+    const [zipCode, setZipCode] = useState(["90210"])
 
 
     ///////////////////////
     // Billing Info State
     ///////////////////////
     const [cardNumber, setCardNumber] = useState(["123456789"])
-    const [cardHolderName, setCardHolderName] = useState(["Jane Doe"])
+    const [cardHolderName, setCardHolderName] = useState(["Guy Fieri"])
     const [expirationDate, setExpirationDate] = useState(["05/20206"])
     const [cvv, setCVV] = useState(["123"])
 
@@ -49,10 +39,11 @@ export default function Checkout() {
     ///////////////////////
     // Order Review / Summary State
     ///////////////////////
-    const [numCartItems, setNumCartItems] = useState([3])
-    const [itemsTotal, setItemsTotal] = useState([87.65]) // arbitrary cart total
-    const [shippingHandling, setShippingHandling] = useState([8.00]) // arbitraty shipping and handling amount
-    const [taxRate, setTaxRate] = useState([0.0725]) // california tax rate
+
+    const numCartItems = useSelector(state => state.cartProcessing.numItems)
+    const itemsTotal = useSelector(state => state.cartProcessing.totalPrice)
+    const taxRate = 0.0725
+    const shippingHandling = 9.00
 
 
     ///////////////////////
@@ -63,6 +54,15 @@ export default function Checkout() {
     const [errorWhileValidating, setErrorWhileValidating] = useState([0])
 
 
+    ///////////////////////
+    // Form Submission State
+    ///////////////////////
+    const user = useSelector(state => state.user.currentUser)
+    const cart = useSelector(state => state.cart)
+
+
+
+
     // 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( () => {
@@ -125,30 +125,21 @@ export default function Checkout() {
 
         let chrisSpec = {
             "user": {
-                "userId": "e-com-test-id",
-                "email": "test@test.test",
-                "firstName":"ecom",
-                "lastName":"test"
+                "userId": user.email,
+                "email": user.email,
+                "firstName": user.firstName,
+                "lastName": user.lastName
             },
             "address": {
-                "state": "IL",
-                "city": "chicago",
-                "zip": "90210",
-                "street": "Grand"
+                "state": state,
+                "city": city,
+                "zip": zipCode,
+                "street": shippingAddress
             },
             "cart": {
                 "id": "something",
-                "userId": "e-com-test-id",
-                "cartItems":[
-                        {
-                            "quantity": 2,
-                            "productRef": {
-                                "id": "something",
-                                "sku": "AFP-1",
-                                "upc": "00002"
-                            }
-                        }
-                    ]
+                "userId": user.email,
+                "cartItems": cart
             }   
         }
 

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

@@ -3,7 +3,8 @@ import CartItem from './CartItem.js'
 import './shopping-cart.css'
 import { useSelector, useDispatch } from 'react-redux'
 import { Link, Redirect } from 'react-router-dom'
-import { updateUserCart } from './../../actions/cart_actions'
+import { updateUserCart} from './../../actions/cart_actions'
+import { calcTotalPrice, calcNumItems, storeCartItemsInProcessing } from './../../actions/cart_processing_actions'
 
 
 export default function ShoppingCart() {
@@ -75,12 +76,16 @@ export default function ShoppingCart() {
   ////////////////////////////////////////////////////////////////
   useEffect(() => {
     if (!userSession) return;
+    
     const cartUpdateObj = {
       userId: userSession.email,
       cartItems: cartRefs
     }
 
     dispatch(updateUserCart(cartUpdateObj, cartUpdateObj.userId))
+    dispatch(storeCartItemsInProcessing(cartItems))
+    dispatch(calcTotalPrice(cartItems))
+    dispatch(calcNumItems(cartItems))
 
   }, [cartItems])
 

ecom-web/src/reducers/cart_processing_reducer.js

+import {GET_TOTAL_PRICE, GET_NUM_ITEMS, GET_CART_PRODUCTS} from './../actions/cart_processing_actions'
+
+
+const initialState = {
+    cartProducts: [],
+    numItems: 0,
+    totalPrice: 0
+}
+
+const cartProcessingReducer = (prevState = initialState, action) => {
+    Object.freeze(prevState)
+    const nextState = {...prevState}
+
+    switch (action.type) {
+        
+        case GET_TOTAL_PRICE:
+            nextState.totalPrice = action.payload
+            return nextState
+
+        case GET_NUM_ITEMS:
+            nextState.numItems = action.payload
+            return nextState
+
+        case GET_CART_PRODUCTS:
+            nextState.cartProducts = action.payload
+            return nextState
+
+
+        default:
+            return nextState
+    }
+
+}
+
+export default cartProcessingReducer
\ No newline at end of file

ecom-web/src/reducers/root_reducer.js

@@ -3,14 +3,15 @@ import productsReducer from './products_reducer';
 import orderReducer from './order_reducer'
 import userReducer from './user_reducer'
 import cartReducer from './cart_reducer';
+import cartProcessingReducer from './cart_processing_reducer'
 
 
 const rootReducer = combineReducers({
     market: productsReducer,
     user: userReducer,
     cart: cartReducer,
-    orderStatus: orderReducer
-
+    orderStatus: orderReducer,
+    cartProcessing: cartProcessingReducer
 });
 
 export default rootReducer;
\ No newline at end of file

ecom-web/src/util/cart_api_util.js

@@ -9,6 +9,5 @@ export const createCart = newCart => {
 }
 
 export const updateCart = (updatedCart, userEmail) => {
-    // debugger
     return axios.put(`http://localhost:8080/api/carts/${userEmail}`, updatedCart)
-}
+}
\ No newline at end of file

ecom-web/src/util/cart_processing_util.js

+export const priceCalcUtil = (productList) => {
+    const totalPrice = productList.reduce((acc, curr) => {return parseFloat(acc) + (parseFloat(curr.product.price) * parseFloat(curr.quantity))}, 0)
+    console.log("PRICE IN CART: " + totalPrice)
+    return totalPrice
+}
+
+
+export const numItemsCalcUtil = (productList) => {
+    const totalItems = productList.reduce((acc, curr) => {return parseInt(acc) + parseInt(curr.quantity)}, 0)
+    console.log("ITEMS IN CART: " + totalItems)
+    return totalItems
+}