scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-23 07:38:07 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

refactor advance step and register functions

Browse source
This commit is contained in:
Ben Wheeler 2019-08-30 16:20:26 -04:00
parent 3809d83c36
commit ce5558f8e2
1 changed files with 16 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/components/join-flow/join-flow.jsx
View file

@ -26,8 +26,8 @@ class JoinFlow extends React.Component {
super(props); super(props);
bindAll(this, [ bindAll(this, [
'handleAdvanceStep', 'handleAdvanceStep',
'handleRegister', 'handlePrepareToRegister',
'handleResetForm' 'handleSubmitRegistration'
]); ]);
this.state = { this.state = {
formData: {}, formData: {},
@ -36,7 +36,16 @@ class JoinFlow extends React.Component {
waiting: false waiting: false
}; };
} }
handleRegister (formData) { handlePrepareToRegister (newFormData) {
newFormData = newFormData || {};
const newState = {
formData: defaults({}, newFormData, this.state.formData)
};
this.setState(newState, () => {
this.handleSubmitRegistration(this.state.formData);
});
}
handleSubmitRegistration (formData) {
this.setState({waiting: true}, () => { this.setState({waiting: true}, () => {
api({ api({
host: '', host: '',
@ -104,24 +113,9 @@ class JoinFlow extends React.Component {
} }
handleAdvanceStep (newFormData) { handleAdvanceStep (newFormData) {
newFormData = newFormData || {}; newFormData = newFormData || {};
const newState = {
formData: defaults({}, newFormData, this.state.formData)
};
// for the first 4 steps, automatically advance to next step.
// but for email step, we need to submit registration and wait.
const shouldAdvance = (this.state.step < 4);
const shouldRegister = (this.state.step === 4);
if (shouldAdvance) newState.step = this.state.step + 1;
this.setState(newState, () => {
if (shouldRegister) this.handleRegister(this.state.formData);
});
}
handleResetForm () {
this.setState({ this.setState({
formData: {}, formData: defaults({}, newFormData, this.state.formData),
registrationError: null, step: this.state.step + 1
step: 0,
waiting: false
}); });
} }
render () { render () {
@ -131,7 +125,7 @@ class JoinFlow extends React.Component {
<RegistrationErrorStep <RegistrationErrorStep
errorMsg={this.state.registrationError} errorMsg={this.state.registrationError}
/* eslint-disable react/jsx-no-bind */ /* eslint-disable react/jsx-no-bind */
onTryAgain={() => this.handleRegister(this.state.formData)} onTryAgain={() => this.handleSubmitRegistration(this.state.formData)}
/* eslint-enable react/jsx-no-bind */ /* eslint-enable react/jsx-no-bind */
/> />
) : ( ) : (
@ -142,7 +136,7 @@ class JoinFlow extends React.Component {
<CountryStep onNextStep={this.handleAdvanceStep} /> <CountryStep onNextStep={this.handleAdvanceStep} />
<EmailStep <EmailStep
waiting={this.state.waiting} waiting={this.state.waiting}
onNextStep={this.handleAdvanceStep} onNextStep={this.handlePrepareToRegister}
/> />
<WelcomeStep <WelcomeStep
email={this.state.formData.email} email={this.state.formData.email}