* wip

web/app/assets/javascripts/react-components.js

@@ -3,6 +3,8 @@
 //= require_directory ./react-components/helpers
 //= require_directory ./react-components/actions
 //= require ./react-components/stores/AppStore
+//= require ./react-components/stores/InstrumentStore
+//= require ./react-components/stores/LanguageStore
 //= require ./react-components/stores/PlatformStore
 //= require ./react-components/stores/BrowserMediaStore
 //= require ./react-components/stores/RecordingStore

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

@@ -11,7 +11,7 @@ logger = context.JK.logger
       @agesJsx.push(`<option value={age}>{age == 0 ? 'Any' : age}</option>`)
 
   render: () ->
-    `<select className="AgeRangeList react-component" defaultValue={this.props.defaultValue}>
+    `<select className="AgeRangeList react-component" onChange={} defaultValue={this.props.defaultValue}>
       {this.agesJsx}
     </select>`
 })

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

@@ -3,16 +3,17 @@ rest = window.JK.Rest()
 logger = context.JK.logger
 
 @InstrumentCheckBoxList = React.createClass({
-  instruments: []
-  componentDidUnmount: () ->
-    @instruments = []
 
-  componentDidMount: () ->
-    rest.getInstruments().done (instruments) =>
-      @instruments = instruments
+  mixins: [Reflux.listenTo(@InstrumentStore,"onInstrumentsChanged")]
+
+  getInitialState: () ->
+    {instruments: []}
+
+  onInstrumentsChanged: (instruments) ->
+    @setState({instruments: instruments})
 
   render: () ->
     `<div className="InstrumentCheckBoxList react-component">
-        <CheckBoxList objectName='instruments' onItemChanged={this.props.onItemChanged} sourceObjects={this.instruments} selectedObjects={this.props.selectedInstruments}/>
+        <CheckBoxList objectName='instruments' onItemChanged={this.props.onItemChanged} sourceObjects={this.state.instruments} selectedObjects={this.props.selectedInstruments}/>
     </div>`
 })

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

@@ -3,16 +3,17 @@ rest = window.JK.Rest()
 logger = context.JK.logger
 
 @LanguageCheckBoxList = React.createClass({
-  languages: []
-  componentDidUnmount: () ->
-    @languages = []
 
-  componentDidMount: () ->
-    rest.getLanguages().done (languages) =>
-      @languages = languages
+  mixins: [Reflux.listenTo(@LanguageStore,"onLanguagesChanged")]
+
+  getInitialState: () ->
+    {languages: []}
+
+  onLanguagesChanged: (languages) ->
+    @setState({languages: languages})
 
   render: () ->
     `<div className="LanguageCheckBoxList react-component">
-        <CheckBoxList objectName='languages' onItemChanged={this.props.onItemChanged} sourceObjects={this.languages} selectedObjects={this.props.selectedLanguages}/>
+        <CheckBoxList objectName='languages' onItemChanged={this.props.onItemChanged} sourceObjects={this.state.languages} selectedObjects={this.props.selectedLanguages}/>
     </div>`
 })

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

@@ -34,6 +34,12 @@ rest = window.JK.Rest()
       "#{listName}": selectedObjects
     });
 
+  handleFieldChange: (fieldName, value)->
+    logger.debug("hangeFieldChange:", fieldName, value)
+    this.setState({
+      "#{fieldName}": value
+    });
+
   navDestination: (instructions) ->
     navTo=null
     if instructions?
@@ -58,6 +64,8 @@ rest = window.JK.Rest()
     # Languages
     # All lists will take a list of selected keys,
     # and will otherwise self-render the available
+
+    console.log("STATE!", this.state)
     `<div className="TeacherSetupBasics TeacherSetupComponent">
       <div className="teacher-quarter-column">
         <div className="teacher-field" name="instruments">
@@ -87,9 +95,9 @@ rest = window.JK.Rest()
         <div className="teacher-field" name="student-levels-taught">
           <h3>Student Levels Taught:</h3>
           <div className="student-levels">
-            <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} />
+            <TeacherStudentLevel onChange={this.handleFieldChange} student="teaches_beginner" display="Beginner" level={this.state.teaches_beginner} />
+            <TeacherStudentLevel onChange={this.handleFieldChange} student="teaches_intermediate" display="Intermediate" level={this.state.teaches_intermediate} />
+            <TeacherStudentLevel onChange={this.handleFieldChange} student="teaches_advanced" display="Advanced" level={this.state.teaches_advanced} />
           </div>
         </div>
       </div>
@@ -97,9 +105,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.teaches_age_lower} />
+            <AgeRangeList onItemChanged={this.handleSelectChange} objectName="teaches_age_lower" selectedAge={this.state.teaches_age_lower} />
             <span className="age-to-age">to</span>
-            <AgeRangeList defaultValue={this.state.teaches_age_upper} />
+            <AgeRangeList onItemChanged={this.handleSelectChange} objectName="teaches_age_upper" selectedAge={this.state.teaches_age_upper} />
           </div>
         </div>
       </div>

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

@@ -15,7 +15,7 @@ SessionActions = @SessionActions
     this.props.handleNav({direction: "next"})
 
   render: () ->
-    console.log("SetupNav: this.props", this.state, this.ref, this.props.handleNav)
+    #console.log("SetupNav: this.props", this.state, this.ref, this.props.handleNav)
     `<div className="TeacherSetupNav right">
         <a className="nav-button button-grey" onClick={this.navBack}>
           BACK

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

@@ -6,13 +6,18 @@ logger = context.JK.logger
 
   render: () ->
     `<span>
-      <input type="checkbox" className="student-level" onChanged={this.studentLevelChanged.bind(this.props.student)} defaultChecked={this.props.level}/>
+      <input objectName={this.props.student} type="checkbox" className="student-level" onChange={this.studentLevelChanged.bind(this, this.props.student)} checked={this.state.checked}/>
       <span className="student-level">{this.props.display}</span>
     </span>`
 
   studentLevelChanged: (level, e) ->
     @setState({checked: $(e.target).is(':checked') })
 
+    @props.onChange(this.props.student, $(e.target).is(':checked'))
+
   getInitialState: () ->
-    {checked:this.props.level}
+    {checked:@props.level}
+
+  componentWillReceiveProps: (nextProps) ->
+    @setState({checked: nextProps.level})
 })

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

@@ -3,13 +3,7 @@ rest = window.JK.Rest()
 logger = context.JK.logger
 
 @YearSelect = React.createClass({
-  instruments: []
-  componentDidUnmount: () ->
-    @instruments = []
 
-  componentDidMount: () ->
-    rest.getInstruments().done (instruments) =>
-      @instruments = instruments
 
   render: () ->
     options = []

web/app/assets/javascripts/react-components/actions/InstrumentActions.js.coffee

@@ -0,0 +1,5 @@
+context = window
+
+@InstrumentActions = Reflux.createActions({
+
+})

web/app/assets/javascripts/react-components/actions/LanguageActions.js.coffee

@@ -0,0 +1,5 @@
+context = window
+
+@LanguageActions = Reflux.createActions({
+
+})

web/app/assets/javascripts/react-components/mixins/TeacherProfileMixin.js.coffee

@@ -19,7 +19,4 @@ teacherActions = window.JK.Actions.Teacher
       teacherActions.load.trigger({teacher_id: @teacherId})
     else
       teacherActions.load.trigger({})
-
-
-  
 }

web/app/assets/javascripts/react-components/stores/InstrumentStore.js.coffee

@@ -0,0 +1,20 @@
+$ = jQuery
+context = window
+logger = context.JK.logger
+
+@InstrumentStore = Reflux.createStore(
+  {
+    listenables: @InstrumentActions
+    instruments: []
+
+    init: ->
+      # Register with the app store to get @app
+      this.listenTo(context.AppStore, this.onAppInit)
+
+    onAppInit: (@app) ->
+      rest.getInstruments().done (instruments) =>
+        @instruments = instruments
+        @trigger(@instruments)
+
+  }
+)

web/app/assets/javascripts/react-components/stores/LanguageStore.js.coffee

@@ -0,0 +1,20 @@
+$ = jQuery
+context = window
+logger = context.JK.logger
+
+@LanguageStore = Reflux.createStore(
+  {
+    listenables: @LanguageActions
+    languages: []
+
+    init: ->
+      # Register with the app store to get @app
+      this.listenTo(context.AppStore, this.onAppInit)
+
+    onAppInit: (@app) ->
+      rest.getLanguages().done (languages) =>
+        @languages = languages
+        @trigger(@languages)
+
+  }
+)