Skip to content

E
ecommerce-maven
Commit ec73ed49 authored by Kyle Muldoon's avatar Kyle Muldoon
Browse files
Options

All done

parent c7e9eb4f
Show whitespace changes
Inline Side-by-side
Showing with 56 additions and 62 deletions
ecom-web/src/components/checkout/SubmitOrder.js
View file @ ec73ed49
......@@ -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
View file @ ec73ed49
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,7 +7,9 @@ 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() {
......@@ -18,13 +20,22 @@ export default function Checkout() {
///////////////////////
// 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) {
if (allFieldsValidated) {
setErrorWhileValidating(0)
handleSubmit()
console.log("Successful submission request")
setSubmitButtonActive(0)
// 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 validated, propogate to component state that all fields were validated
if (validated === 1) {
setAllFieldsValidated(1)
const cartUpdateObj = {
userId: user.email,
cartItems: []
}
// 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!")
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment