VRFS-3359 : Teacher Setup - Factor out common functionality into a CheckBoxList, of which the instrument selector is composed.

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

@@ -0,0 +1,41 @@
+context = window
+rest = window.JK.Rest()
+logger = context.JK.logger
+
+@CheckBoxList = React.createClass({
+  objects: []
+  componentDidUnmount: () ->
+    @root.off("change", ".checkItem input[type=checkbox]")
+
+  componentDidMount: () ->
+    @root = jQuery(this.getDOMNode())
+    @root.off("change", ".checkItem input[type=checkbox]").on("change", ".checkItem input[type=checkbox]", @onItemChanged)
+
+  onItemChanged: (e) ->
+    e.preventDefault()
+    this.props.onItemChanged("objects", @selectedObjects())
+
+  selectedObjects: ->
+    selected=[]
+    @root = jQuery(this.getDOMNode())
+    $(".checkItem input[type=checkbox]:checked", @root).each ->
+      selected.push $(this).data("object-id")
+    selected
+
+  render: () ->
+    object_options = []
+
+    for object in this.props.sourceObjects
+      nm = "check_#{object.id}"
+      checkedStr = if @isChecked(object.id) then "checked" else ""
+      object_options.push `<div className='checkItem'><input type='checkbox' name={nm} data-object-id={object.id} defaultChecked={checkedStr}></input><label htmlFor={nm}>{object.description}</label></div>`
+
+    `<div className="CheckBoxList react-component">
+        <div className="checkbox-scroller left">
+          {object_options}
+        </div>
+    </div>`
+
+  isChecked: (id) ->
+    this.props.selectedObjects? && id in this.props.selectedObjects
+})

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

@@ -6,43 +6,13 @@ logger = context.JK.logger
   instruments: []
   componentDidUnmount: () ->
     @instruments = []
-    @root.off("change", ".checkItem.checkItemInstrument input[type=checkbox]")
 
   componentDidMount: () ->
-    @root = jQuery(this.getDOMNode())
-    @root.off("change", ".checkItem.checkItemInstrument input[type=checkbox]").on("change", ".checkItem.checkItemInstrument input[type=checkbox]", @onItemChanged)
-
     rest.getInstruments().done (instruments) =>
       @instruments = instruments
 
-  onItemChanged: (e) ->
-    e.preventDefault()
-    this.props.onInstrumentsChanged("instruments", @selectedItems())
-
-
-  selectedItems: ->
-    selected=[]
-    @root = jQuery(this.getDOMNode())
-    $(".checkItem.checkItemInstrument input[type=checkbox]:checked", @root).each ->
-      selected.push $(this).data("instrument-id")
-    selected
-
   render: () ->
-    instrument_options = []
-
-    for instrument in @instruments
-      nm = "check_#{instrument.id}"
-      checkedStr = if @isChecked(instrument.id) then "checked" else ""
-      instrument_options.push `<div className='checkItem checkItemInstrument'><input type='checkbox' name={nm} data-instrument-id={instrument.id} defaultChecked={checkedStr}></input><label htmlFor={nm}>{instrument.description}</label></div>`
-
     `<div className="InstrumentSelectorList react-component">
-        <div className="checkbox-scroller left">
+        <CheckBoxList onItemChanged={this.props.handleListChange} sourceObjects={this.instruments} selectedObjects={this.props.selectedInstruments}/>
-          {instrument_options}
-        </div>
     </div>`
-
-  isChecked: (id) ->
-    this.props.selectedItems? && id in this.props.selectedItems
-    #!!(_.find this.props.selectedItems, (item) -> item.id is id)
-
 })

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

@@ -31,9 +31,9 @@ rest = window.JK.Rest()
 
     });
 
-  handleListChange: (listName, selectedItems)->
+  handleListChange: (listName, selectedObjects)->
     this.setState({
-      "#{listName}": selectedItems
+      "#{listName}": selectedObjects
     });
 
 
@@ -69,7 +69,7 @@ rest = window.JK.Rest()
         <div className="teacher-field" name="instruments">
           <strong>Instruments Taught</strong>
 
-            <InstrumentSelectorList onInstrumentsChanged={this.handleListChange} selectedItems={this.state.instruments}/>
+            <InstrumentSelectorList onInstrumentsChanged={this.handleListChange} selectedInstruments={this.state.instruments}/>
 
         </div>
       </div>