* wip

web/app/assets/javascripts/react-components/AgeRangeList.js.jsx.coffee

@@ -5,9 +5,6 @@ logger = context.JK.logger
 @AgeRangeList = React.createClass({
   ages: [0, 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100]
 
-  componentDidUnmount: () ->
-    @languages = []
-
   componentDidMount: () ->
     @agesJsx = []
     for age in @ages

web/app/assets/javascripts/react-components/TeacherSetupBasics.js.jsx.coffee

@@ -20,13 +20,7 @@ rest = window.JK.Rest()
     $root = jQuery(this.getDOMNode())
     unless this.handleErrors(changes)
       teacher = changes.teacher
-      this.setState({
-        #validate_basics: true,
-        instruments: teacher.instruments
-        genres: teacher.genres
-        languages: teacher.languages
-        subjects: teacher.subjects
-      })
+      this.setState(teacher)
 
   captureFormState: (changes) ->
     $root = jQuery(this.getDOMNode())
@@ -56,9 +50,7 @@ rest = window.JK.Rest()
     navTo = this.navDestination(e)
     teacherActions.change.trigger(this.state, {navTo: navTo})
 
-  studentLevelChanged: (level, e) ->
-
-  render: () ->    
+  render: () ->
     # Render the following:
     # Instruments
     # Subjects
@@ -95,9 +87,9 @@ rest = window.JK.Rest()
         <div className="teacher-field" name="student-levels-taught">
           <h3>Student Levels Taught:</h3>
           <div className="student-levels">
-            <input type="checkbox" className="student-level" onChanged={this.studentLevelChanged.bind('beginner')}/><span className="student-level">Beginner</span>
-            <input type="checkbox" className="student-level" onChanged={this.studentLevelChanged.bind('intermediate')}/><span className="student-level">Intermediate</span>
-            <input type="checkbox" className="student-level" onChanged={this.studentLevelChanged.bind('advanced')}/><span className="student-level">Advanced</span>
+            <TeacherStudentLevel student="beginner" display="Beginner" level={this.state.teaches_beginner} />
+            <TeacherStudentLevel student="intermediate" display="Intermediate" level={this.state.teaches_intermediate} />
+            <TeacherStudentLevel student="adanced" display="Advanced" level={this.state.teaches_advanced} />
           </div>
         </div>
       </div>
@@ -105,9 +97,9 @@ rest = window.JK.Rest()
         <div className="teacher-field" name="student-ages-taught">
           <h3>Student Ages Taught:</h3>
           <div className="student-ages">
-            <AgeRangeList defaultValue={this.state.age_lower} />
+            <AgeRangeList defaultValue={this.state.teaches_age_lower} />
             <span className="age-to-age">to</span>
-            <AgeRangeList defaultValue={this.state.age_upper} />
+            <AgeRangeList defaultValue={this.state.teaches_age_upper} />
           </div>
         </div>
       </div>

web/app/assets/javascripts/react-components/TeacherStudentLevel.js.jsx.coffee

@@ -0,0 +1,18 @@
+context = window
+logger = context.JK.logger
+
+@TeacherStudentLevel = React.createClass({
+
+
+  render: () ->
+    `<span>
+      <input type="checkbox" className="student-level" onChanged={this.studentLevelChanged.bind(this.props.student)} defaultChecked={this.props.level}/>
+      <span className="student-level">{this.props.display}</span>
+    </span>`
+
+  studentLevelChanged: (level, e) ->
+    @setState({checked: $(e.target).is(':checked') })
+
+  getInitialState: () ->
+    {checked:this.props.level}
+})