All done

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
 
 export default function SubmitOrder(props) {
     
-    let handleSubmitClick = (e) => {
+    let handleSubmitClick = () => {
         console.log("Submit Button Clicked")
 
         props.setSubmitButtonActive(1)
@@ -17,7 +17,7 @@ export default function SubmitOrder(props) {
             </div>
 
             <div id="SubmitButtonContainer">
-                <p className="errorMessage">{(props.errorWhileValidating === 1 && props.allFieldsValidated[0] === 0)? 'One or more fields is missing a value' : ''}</p>
+                <p className="errorMessage">{(props.errorWhileValidating === 1 && props.allFieldsValidated === 0)? 'One or more fields is missing a value' : ''}</p>
                 <button id="SubmitButtonInput" onClick={() => {handleSubmitClick()}} >Submit Order</button>
             </div>
 

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

-import React, {useState, useEffect} from 'react'
-import {useSelector, useDispatch} from 'react-redux'
+import React, { useState, useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
 
 import ShippingAddress from './ShippingAddress.js'
 import PaymentMethod from './PaymentMethod.js'
@@ -7,24 +7,35 @@ import ReviewOrder from './ReviewOrder.js'
 import SubmitOrder from './SubmitOrder.js'
 import './checkout.css'
 
-import {dispatchOrderInfo} from './../../actions/checkout_actions'
+import { dispatchOrderInfo } from './../../actions/checkout_actions'
+import { updateUserCart } from './../../actions/cart_actions'
+import { calcTotalPrice, calcNumItems, storeCartItemsInProcessing } from './../../actions/cart_processing_actions'
 
 
 export default function Checkout() {
-    
+
 
     const dispatch = useDispatch()
 
     ///////////////////////
     // Shipping Info State
     ///////////////////////
-    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")
+    // 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")
+
+    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("")
+
 
 
     ///////////////////////
@@ -49,9 +60,9 @@ export default function Checkout() {
     ///////////////////////
     // Submit Button State
     ///////////////////////
-    const [submitButtonActive, setSubmitButtonActive] = useState([0])
-    const [allFieldsValidated, setAllFieldsValidated] = useState([0])
-    const [errorWhileValidating, setErrorWhileValidating] = useState([0])
+    const [submitButtonActive, setSubmitButtonActive] = useState(0)
+    const [allFieldsValidated, setAllFieldsValidated] = useState(0)
+    const [errorWhileValidating, setErrorWhileValidating] = useState(0)
 
 
     ///////////////////////
@@ -61,65 +72,48 @@ export default function Checkout() {
     const cart = useSelector(state => state.cart)
 
 
+    useEffect(() => {
+
+        if (firstName && lastName && shippingAddress && city && state && zipCode) {
+            console.log("All Fields Validated!")
+            setAllFieldsValidated(1)
+        }
 
+    }, [firstName, lastName, shippingAddress, city, state, zipCode])
 
-    // 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( () => {
+    useEffect(() => {
 
-        // when submit button clicked after being inactive
         if (submitButtonActive === 1) {
-            
-            // fields to make sure are non-empty
-            let fieldsToCheck = [
-                firstName,
-                lastName,
-                shippingAddress,
-                city,
-                state,
-                zipCode
-            ]
-    
-            // initially validated, gets flipped if required field is empty
-            let validated = 1
-            for (let i in fieldsToCheck) {
-                if (fieldsToCheck[i].length === 0) {
-                    console.log("a required Field Value was empty")
-                    validated = 0
-                    break
+            if (allFieldsValidated) {
+                setErrorWhileValidating(0)
+                handleSubmit()
+                console.log("Successful submission request")
+                setSubmitButtonActive(0)
+
+
+                const cartUpdateObj = {
+                    userId: user.email,
+                    cartItems: []
                 }
-            }
-    
-            // if validated, propogate to component state that all fields were validated
-            if (validated === 1) {
-                setAllFieldsValidated(1)
-            }
 
-            // if invalid, propogate to component state
+                // clear user cart now that order has been placed
+                dispatch(updateUserCart(cartUpdateObj, cartUpdateObj.userId))
+                dispatch(storeCartItemsInProcessing([]))
+                dispatch(calcTotalPrice([]))
+                dispatch(calcNumItems([]))
+            }
             else {
-                console.log("Failed to validate")
                 setErrorWhileValidating(1)
                 setSubmitButtonActive(0)
             }
         }
+        else { ; }
 
-        // when submit button gets reset from active to inactive
-        else if (submitButtonActive === 0) {
-            ;
-        }
 
     }, [submitButtonActive])
 
 
 
-    // This effect looks for the allFieldsValidated signal and fires off the order submission when complete
-    useEffect( () => {
-        handleSubmit()
-        console.log("Successful submission request")
-    }, [allFieldsValidated])
-
-
-
     let handleSubmit = () => {
         console.log("Submitting Order!")
 
@@ -141,7 +135,7 @@ export default function Checkout() {
                 "id": "something",
                 "userId": user.userId,
                 "cartItems": cart
-            }   
+            }
         }
 
         console.log(orderInfo)
@@ -153,7 +147,7 @@ export default function Checkout() {
         <div id="checkout-container">
 
             {/* Collects User's shipping info */}
-            <ShippingAddress 
+            <ShippingAddress
                 captureFirstName={setFirstName}
                 captureLastName={setLastName}
                 captureShippingAddress={setShippingAddress}
@@ -168,7 +162,7 @@ export default function Checkout() {
                 cardNumber={cardNumber}
                 cardHolderName={cardHolderName}
                 expirationDate={expirationDate}
-                cvv={cvv} 
+                cvv={cvv}
                 captureCardNumber={setCardNumber}
                 captureCardHolderName={setCardHolderName}
                 captureExpirationDate={setExpirationDate}
@@ -190,7 +184,7 @@ export default function Checkout() {
                 errorWhileValidating={errorWhileValidating}
                 allFieldsValidated={allFieldsValidated}
             />
-            
+
         </div>
     )
 }