scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-12-04 12:51:28 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Only pass necessary props to steps

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/views/teacherregistration/steps.jsx
View file

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

32
src/views/teacherregistration/teacherregistration.jsx
View file

@ -79,15 +79,29 @@ var TeacherRegistration = React.createClass({
<Steps.RegistrationError {... this.state} /> <Steps.RegistrationError {... this.state} />
: :
<Progression {... this.state}> <Progression {... this.state}>
<Steps.UsernameStep {... this.state} onNextStep={this.advanceStep} /> <Steps.UsernameStep onNextStep={this.advanceStep}
<Steps.DemographicsStep {... this.state} onNextStep={this.advanceStep} /> waiting={this.state.waiting} />
<Steps.NameStep {... this.state} onNextStep={this.advanceStep} /> <Steps.DemographicsStep onNextStep={this.advanceStep}
<Steps.PhoneNumberStep {... this.state} onNextStep={this.advanceStep} /> waiting={this.state.waiting} />
<Steps.OrganizationStep {... this.state} onNextStep={this.advanceStep} /> <Steps.NameStep onNextStep={this.advanceStep}
<Steps.AddressStep {... this.state} onNextStep={this.advanceStep} /> waiting={this.state.waiting} />
<Steps.UseScratchStep {... this.state} onNextStep={this.advanceStep} /> <Steps.PhoneNumberStep onNextStep={this.advanceStep}
<Steps.EmailStep {... this.state} onNextStep={this.register} /> waiting={this.state.waiting}
<Steps.LastStep {... this.state} /> 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> </Progression>
} }
</Deck> </Deck>