Only pass necessary props to steps

Rather than lazily including all form progress to every step, just give each step what it needs.
This commit is contained in:
Ray Schamp 2016-06-21 18:45:41 -04:00
parent bf76e88ca2
commit de8ac6c56a
2 changed files with 31 additions and 19 deletions

View file

@ -5,7 +5,6 @@ var countryData = require('../../lib/country-data');
var intl = require('../../lib/intl.jsx');
var log = require('../../lib/log');
var smartyStreets = require('../../lib/smarty-streets');
var urlParams = require('../../lib/url-params');
var Button = require('../../components/forms/button.jsx');
var Card = require('../../components/card/card.jsx');
@ -286,10 +285,7 @@ module.exports = {
<Form onValidSubmit={this.props.onNextStep}>
<PhoneInput label={formatMessage({id: 'teacherRegistration.phoneNumber'})}
name="phone"
defaultCountry={
(this.props.formData.user && this.props.formData.user.country) ||
this.props.defaultCountry
}
defaultCountry={this.props.defaultCountry}
required />
<Checkbox label={formatMessage({id: 'teacherRegistration.phoneConsent'})}
name="phoneConsent"
@ -393,10 +389,7 @@ module.exports = {
},
getInitialState: function () {
return {
countryChoice: (
(this.props.formData.user && this.props.formData.user.country) ||
this.props.defaultCountry
),
countryChoice: this.props.defaultCountry,
waiting: false
};
},
@ -589,6 +582,11 @@ module.exports = {
}
})),
LastStep: intl.injectIntl(React.createClass({
getDefaultProps: function () {
return {
email: null
};
},
render: function () {
return (
<Slide>
@ -602,7 +600,7 @@ module.exports = {
<h2><intl.FormattedMessage id="teacherRegistration.confirmYourEmail" /></h2>
<p>
<intl.FormattedMessage id="teacherRegistration.confirmYourEmailDescription" /><br />
<strong>{this.props.formData.user && this.props.formData.user.email}</strong>
<strong>{this.props.email}</strong>
</p>
</Card>
<Card className="wait">

View file

@ -79,15 +79,29 @@ var TeacherRegistration = React.createClass({
<Steps.RegistrationError {... this.state} />
:
<Progression {... this.state}>
<Steps.UsernameStep {... this.state} onNextStep={this.advanceStep} />
<Steps.DemographicsStep {... this.state} onNextStep={this.advanceStep} />
<Steps.NameStep {... this.state} onNextStep={this.advanceStep} />
<Steps.PhoneNumberStep {... this.state} onNextStep={this.advanceStep} />
<Steps.OrganizationStep {... this.state} onNextStep={this.advanceStep} />
<Steps.AddressStep {... this.state} onNextStep={this.advanceStep} />
<Steps.UseScratchStep {... this.state} onNextStep={this.advanceStep} />
<Steps.EmailStep {... this.state} onNextStep={this.register} />
<Steps.LastStep {... this.state} />
<Steps.UsernameStep onNextStep={this.advanceStep}
waiting={this.state.waiting} />
<Steps.DemographicsStep onNextStep={this.advanceStep}
waiting={this.state.waiting} />
<Steps.NameStep onNextStep={this.advanceStep}
waiting={this.state.waiting} />
<Steps.PhoneNumberStep onNextStep={this.advanceStep}
waiting={this.state.waiting}
defaultCountry={
this.state.formData.user && this.state.formData.user.country
} />
<Steps.OrganizationStep onNextStep={this.advanceStep}
waiting={this.state.waiting} />
<Steps.AddressStep onNextStep={this.advanceStep}
waiting={this.state.waiting}
defaultCountry={
this.state.formData.user && this.state.formData.user.country
} />
<Steps.UseScratchStep onNextStep={this.advanceStep}
waiting={this.state.waiting} />
<Steps.EmailStep onNextStep={this.register}
waiting={this.state.waiting} />
<Steps.LastStep email={this.state.formData.user && this.state.formData.user.email} />
</Progression>
}
</Deck>