From de8ac6c56a956ff7107defebcc1e41c4264da43e Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Tue, 21 Jun 2016 18:45:41 -0400
Subject: [PATCH] Only pass necessary props to steps

Rather than lazily including all form progress to every step, just give each step what it needs.
---
 src/views/teacherregistration/steps.jsx       | 18 +++++------
 .../teacherregistration.jsx                   | 32 +++++++++++++------
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/views/teacherregistration/steps.jsx b/src/views/teacherregistration/steps.jsx
index 341d6a749..030e56b24 100644
--- a/src/views/teacherregistration/steps.jsx
+++ b/src/views/teacherregistration/steps.jsx
@@ -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">
diff --git a/src/views/teacherregistration/teacherregistration.jsx b/src/views/teacherregistration/teacherregistration.jsx
index 8ea60998e..89b51d930 100644
--- a/src/views/teacherregistration/teacherregistration.jsx
+++ b/src/views/teacherregistration/teacherregistration.jsx
@@ -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>