This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
getStepContent = (step) => { | |
switch (step) { | |
case 0: | |
return <AddressForm | |
state={this.state} | |
handleChange={this.handleChange} | |
/>; | |
case 1: | |
return <PaymentForm state={this.state} | |
handleChange={this.handleChange} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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}> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
handleChange = (name, area) => event => { | |
const value = event.target.value; | |
this.setState({ | |
[area]: { | |
...this.state[area], | |
[name]: value | |
} | |
}, () => { this.handleValidation(name, value); }); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const fieldValidator = (name, value) => { | |
let valid = false; | |
let message = ''; | |
switch (name) { | |
case 'firstName': | |
valid = value.trim().length > 0; | |
message = validatorMessage( | |
valid, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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}> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
handleFormValidation = () => { | |
const { validation } = this.state; | |
this.setState({ | |
validation: { | |
...validation, | |
hasErrorAddressForm: formValidator(validation, 'addressForm'), | |
} | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const formValidator = (validation, area) => { | |
if (area === 'addressForm') { | |
return !validation.firstName | |
|| !validation.lastName | |
|| !validation.address1 | |
|| !validation.city | |
|| !validation.zip | |
|| !validation.country | |
} | |
return true; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
handleValid = () => { | |
const { activeStep, validation } = this.state; | |
if (activeStep === 0 && !validation.hasErrorAddressForm) { | |
return false; | |
} else if (activeStep === 2) { | |
return false; | |
} | |
return true; | |
} | |
//... |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const validateCardNumber = (number) => { | |
var regex = new RegExp("^[0-9]{16}$"); | |
if (!regex.test(number)) { return false; } | |
return luhnCheck(number); | |
} | |
const luhnCheck = (val) => { | |
var sum = 0; | |
for (var i = 0; i < val.length; i++) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"extends": "react-app", | |
"plugins": [ | |
"react-hooks" | |
], | |
"rules": { | |
"react-hooks/rules-of-hooks": "error" | |
} | |
} |