Skip to content

Instantly share code, notes, and snippets.

View cbrannen9a's full-sized avatar

Chris Brannen cbrannen9a

View GitHub Profile
function getStepContent(step) {
switch (step) {
case 0:
return <AddressForm />;
case 1:
return <PaymentForm />;
case 2:
return <Review />;
default:
throw new Error('Unknown step');
@cbrannen9a
cbrannen9a / partial_checkout.js
Created November 8, 2018 11:34
Portion of main Checkout.js with state
class Checkout extends Component {
state = {
activeStep: 0,
addressForm: {
firstName: '',
lastName: '',
address1: '',
address2: '',
city: '',
state: '',
@cbrannen9a
cbrannen9a / partial_checkout2.js
Created November 8, 2018 11:38
Partial Checkout.js with handleChange function
handleChange = (name, area) => event => {
const value = event.target.value;
this.setState({
[area]: {
...this.state[area],
[name]: value
}
});
}
@cbrannen9a
cbrannen9a / partial_checkout3.js
Created November 8, 2018 11:40
Get step content with state
getStepContent = (step) => {
switch (step) {
case 0:
return <AddressForm
state={this.state}
handleChange={this.handleChange}
/>;
case 1:
return <PaymentForm state={this.state}
handleChange={this.handleChange}
@cbrannen9a
cbrannen9a / partial_addressForm.js
Created November 8, 2018 11:48
Partial Address Form adding value and change handling
function AddressForm(props) {
const { state, handleChange } = props;
return (
<Fragment>
<Typography variant="h6" gutterBottom>
Shipping address
</Typography>
<Grid container spacing={24}>
<Grid item xs={12} sm={6}>
@cbrannen9a
cbrannen9a / partial_fieldValidator.js
Created November 8, 2018 12:00
Partial field validator
export const fieldValidator = (name, value) => {
let valid = false;
let message = '';
switch (name) {
case 'firstName':
valid = value.trim().length > 0;
message = validatorMessage(
valid,
@cbrannen9a
cbrannen9a / partial_addressForm.js
Created November 8, 2018 12:04
Partial Address Form with error and helperText
function AddressForm(props) {
const { state, handleChange } = props;
return (
<Fragment>
<Typography variant="h6" gutterBottom>
Shipping address
</Typography>
<Grid container spacing={24}>
<Grid item xs={12} sm={6}>
@cbrannen9a
cbrannen9a / partial_checkout5.js
Created November 8, 2018 12:09
Partial checkout adding form validation
handleFormValidation = () => {
const { validation } = this.state;
this.setState({
validation: {
...validation,
hasErrorAddressForm: formValidator(validation, 'addressForm'),
}
});
}
@cbrannen9a
cbrannen9a / partial_formValidator.js
Created November 8, 2018 12:10
Partial formValidation for addressForm
export const formValidator = (validation, area) => {
if (area === 'addressForm') {
return !validation.firstName
|| !validation.lastName
|| !validation.address1
|| !validation.city
|| !validation.zip
|| !validation.country
}
return true;
@cbrannen9a
cbrannen9a / partial_checkout6.js
Created November 8, 2018 12:14
Partial Checkout6
handleValid = () => {
const { activeStep, validation } = this.state;
if (activeStep === 0 && !validation.hasErrorAddressForm) {
return false;
} else if (activeStep === 2) {
return false;
}
return true;
}
//...