From 176f2b9e2fa83bed8e2e7b69a7352eb9bb3b76d3 Mon Sep 17 00:00:00 2001
From: Steven Miers <steven.miers@gmail.com>
Date: Sat, 8 Aug 2015 15:01:22 -0500
Subject: [PATCH]  VRFS-3359 : Initial react components.

---
 .../SessionMediaTracks.js.jsx.coffee          |  7 +-
 .../SessionMetronome.js.jsx.coffee            |  1 +
 .../TeacherProfile.js.jsx.coffee              | 99 +++++++++++++++++++
 .../TeacherSetupBasics.js.jsx.coffee          | 85 ++++++++++++++++
 .../TeacherSetupNav.js.jsx.coffee             | 25 +++++
 .../actions/TeacherActions.js.coffee          |  8 ++
 .../mixins/TeacherMixin.js.coffee             | 14 +++
 .../stores/TeacherStore.js.coffee             | 59 +++++++++++
 8 files changed, 294 insertions(+), 4 deletions(-)
 create mode 100644 web/app/assets/javascripts/react-components/TeacherProfile.js.jsx.coffee
 create mode 100644 web/app/assets/javascripts/react-components/TeacherSetupBasics.js.jsx.coffee
 create mode 100644 web/app/assets/javascripts/react-components/TeacherSetupNav.js.jsx.coffee
 create mode 100644 web/app/assets/javascripts/react-components/actions/TeacherActions.js.coffee
 create mode 100644 web/app/assets/javascripts/react-components/mixins/TeacherMixin.js.coffee
 create mode 100644 web/app/assets/javascripts/react-components/stores/TeacherStore.js.coffee

diff --git a/web/app/assets/javascripts/react-components/SessionMediaTracks.js.jsx.coffee b/web/app/assets/javascripts/react-components/SessionMediaTracks.js.jsx.coffee
index f72068f29..d4d50a8ae 100644
--- a/web/app/assets/javascripts/react-components/SessionMediaTracks.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionMediaTracks.js.jsx.coffee
@@ -263,10 +263,9 @@ ChannelGroupIds = context.JK.ChannelGroupIds
         # All the JamTracks
         mediaTracks.push(`<SessionJamTrackCategory key="JamTrackCategory" jamTrackName={this.state.jamTrackName} mixers={this.state.mediaCategoryMixer} mode={MIX_MODES.PERSONAL} />`)
 
-        # this is not ready yet until VRFS-3363 is done
-        #if @state.metronome?
-        #  @state.metronome.mode = MIX_MODES.PERSONAL
-        #  mediaTracks.push(`<SessionMetronome key="JamTrackMetronome"  {...this.state.metronome} />`)
+        if @state.metronome?
+          @state.metronome.mode = MIX_MODES.PERSONAL
+          mediaTracks.push(`<SessionMetronome key="JamTrackMetronome"  {...this.state.metronome} location="jam-track" />`)
 
         for jamTrack in @state.jamTracks
           jamTrack.mode = MIX_MODES.PERSONAL
diff --git a/web/app/assets/javascripts/react-components/SessionMetronome.js.jsx.coffee b/web/app/assets/javascripts/react-components/SessionMetronome.js.jsx.coffee
index d1231642d..aa7654c7e 100644
--- a/web/app/assets/javascripts/react-components/SessionMetronome.js.jsx.coffee
+++ b/web/app/assets/javascripts/react-components/SessionMetronome.js.jsx.coffee
@@ -33,6 +33,7 @@ MIX_MODES = context.JK.MIX_MODES
       "session-track" : true
       "metronome" : true
       "no-mixer" : @props.mode == MIX_MODES.MASTER  # show it as disabled if in master mode
+      "in-jam-track" : @props.location == 'jam-track'
     })
 
     pan = if mixers.mixer? then mixers.mixer?.pan else 0
diff --git a/web/app/assets/javascripts/react-components/TeacherProfile.js.jsx.coffee b/web/app/assets/javascripts/react-components/TeacherProfile.js.jsx.coffee
new file mode 100644
index 000000000..3576b27a5
--- /dev/null
+++ b/web/app/assets/javascripts/react-components/TeacherProfile.js.jsx.coffee
@@ -0,0 +1,99 @@
+context = window
+teacherActions = window.JK.Actions.Teacher
+logger = context.JK.logger
+rest = window.JK.Rest()
+
+@TeacherProfile = React.createClass({
+  mixins: [
+    @TeacherMixin,
+    Reflux.listenTo(@AppStore,"onAppInit"),
+    Reflux.listenTo(TeacherStore, "onTeacherStateChanged")
+  ]
+
+  setTeacherError: () ->
+
+
+  getInitialState: () ->
+    {}
+
+  beforeShow: (data) ->
+    logger.debug("TeacherProfile beforeShow", data, data.d)
+
+
+    if data? && data.d?
+      @teacherId = data.d
+      teacherActions.load.trigger({teacher_id: @teacherId})
+    else
+      teacherActions.load.trigger({})
+
+  onTeacherStateChanged: (changes) ->
+    $root = jQuery(this.getDOMNode())
+    logger.debug("onTeacherStateChanged", changes, changes.errors?, changes.errors)
+    $(".error-text", $root).remove()
+    $(".input-error", $root).removeClass("input-error")
+    if changes.errors?
+      for k,v of changes.errors
+        logger.debug("error", k, v)
+        teacherField = $root.find(".teacher-field[name='#{k}']")
+        teacherField.append("<div class='error-text'>#{v.join()}</div>")
+        $("input", teacherField).addClass("input-error")
+        #$(".error-text", teacherField).show()
+
+    else
+      teacher = changes.teacher
+      logger.debug("@teacher", teacher)
+      this.setState({
+        biography: teacher.biography,
+        introductory_video: teacher.introductory_video,
+        years_teaching: teacher.years_teaching,
+        years_playing: teacher.years_playing,
+        validate_introduction: true
+      })
+      
+
+
+  captureFormState: (changes) ->
+    $root = jQuery(this.getDOMNode())
+    this.setState({
+      biography: $root.find(".teacher-biography").val(),
+      introductory_video: $root.find(".teacher-introductory-video").val(),
+      years_teaching: $root.find(".years-teaching-experience").val(),
+      years_playing: $root.find(".years-playing-experience").val()
+    });
+    logger.debug("capturedFormState", this.state, changes)
+
+  handleSave: (e) ->
+    logger.debug("HANDLESAVE: ", this.state, this, e)
+    teacherActions.change.trigger(this.state)
+
+  render: () ->
+    logger.debug("RENDERING", this.props, this.state)
+    `<div className="TeacherSetupComponent" >
+      <div className="teacher-big-column left">
+        <div className="teacher-field" name="biography">
+          <label for="teacher-biography">Teacher Bio:</label>
+          <textarea className="teacher-biography" rows="12" value={this.state.biography} onChange={this.captureFormState} required/>
+        </div>
+      </div>
+      <div className="teacher-small-column left">
+        <div className="teacher-field" name="introductory_video">
+          <label for="teacher-introductory-video">Teacher Introductory Video:</label>
+          <input className="teacher-introductory-video youtube-video" type="url" maxLength="1024" value={this.state.introductory_video} onChange={this.captureFormState} required/>
+          <em>(enter YouTube URL)</em>
+        </div>
+
+        <div className="teacher-field" name="years_teaching">
+          <label for="years-teaching-experience">Years Teaching Experience:</label>
+          <input className="years-teaching-experience" type="number" min="0" max="99" value={this.state.years_teaching} onChange={this.captureFormState} placeholder="Select" />
+        </div>
+
+        <div className="teacher-field" name="years_playing">
+          <label for="teacher-playing-experience">Years Playing Experience:</label>
+          <input className="years-playing-experience" type="number" min="0" max="99" value={this.state.years_playing} onChange={this.captureFormState}  placeholder="Select" />
+        </div>
+      </div>
+      <TeacherSetupNav handleSave={this.handleSave}/>
+    </div>
+    `
+
+})
\ No newline at end of file
diff --git a/web/app/assets/javascripts/react-components/TeacherSetupBasics.js.jsx.coffee b/web/app/assets/javascripts/react-components/TeacherSetupBasics.js.jsx.coffee
new file mode 100644
index 000000000..b84fd70f8
--- /dev/null
+++ b/web/app/assets/javascripts/react-components/TeacherSetupBasics.js.jsx.coffee
@@ -0,0 +1,85 @@
+context = window
+teacherActions = window.JK.Actions.Teacher
+logger = context.JK.logger
+rest = window.JK.Rest()
+
+@TeacherSetupBasics = React.createClass({
+  mixins: [
+    @TeacherMixin,
+    Reflux.listenTo(@AppStore,"onAppInit"),
+    Reflux.listenTo(TeacherStore, "onTeacherStateChanged")
+  ]
+
+  setTeacherError: () ->
+
+
+  getInitialState: () ->
+    {}
+
+  onTeacherStateChanged: (changes) ->
+    $root = jQuery(this.getDOMNode())
+    logger.debug("onTeacherStateChanged", changes, changes.errors?, changes.errors)
+    $(".error-text", $root).remove()
+    $(".input-error", $root).removeClass("input-error")
+    if changes.errors?
+      for k,v of changes.errors
+        logger.debug("error", k, v)
+        teacherField = $root.find(".teacher-field[name='#{k}']")
+        teacherField.append("<div class='error-text'>#{v.join()}</div>")
+        $("input", teacherField).addClass("input-error")
+    else
+      teacher = changes.teacher
+      logger.debug("@teacher", teacher)
+      this.setState({
+        biography: teacher.biography,
+        introductory_video: teacher.introductory_video,
+        years_teaching: teacher.years_teaching,
+        years_playing: teacher.years_playing,
+        validate_introduction: true
+      })
+
+  captureFormState: (changes) ->
+    $root = jQuery(this.getDOMNode())
+    this.setState({
+      biography: $root.find(".teacher-biography").val(),
+      introductory_video: $root.find(".teacher-introductory-video").val(),
+      years_teaching: $root.find(".years-teaching-experience").val(),
+      years_playing: $root.find(".years-playing-experience").val()
+    });
+    logger.debug("capturedFormState", this.state, changes)
+
+  handleSave: (e) ->
+    logger.debug("HANDLESAVE: ", this.state, this, e)
+    teacherActions.change.trigger(this.state)
+
+  render: () ->
+    logger.debug("RENDERING", this.props, this.state)
+    `<div className="TeacherSetupComponent" >
+      <div className="teacher-big-column left">
+        <div className="teacher-field" name="biography">
+          <label for="teacher-biography">Teacher Bio:</label>
+          <textarea className="teacher-biography" rows="12" value={this.state.biography} onChange={this.captureFormState} required/>
+        </div>
+      </div>
+      <div className="teacher-small-column left">
+        <div className="teacher-field" name="introductory_video">
+          <label for="teacher-introductory-video">Teacher Introductory Video:</label>
+          <input className="teacher-introductory-video youtube-video" type="url" maxLength="1024" value={this.state.introductory_video} onChange={this.captureFormState} required/>
+          <em>(enter YouTube URL)</em>
+        </div>
+
+        <div className="teacher-field" name="years_teaching">
+          <label for="years-teaching-experience">Years Teaching Experience:</label>
+          <input className="years-teaching-experience" type="number" min="0" max="99" value={this.state.years_teaching} onChange={this.captureFormState} placeholder="Select" />
+        </div>
+
+        <div className="teacher-field" name="years_playing">
+          <label for="teacher-playing-experience">Years Playing Experience:</label>
+          <input className="years-playing-experience" type="number" min="0" max="99" value={this.state.years_playing} onChange={this.captureFormState}  placeholder="Select" />
+        </div>
+      </div>
+      <TeacherSetupNav handleSave={this.handleSave}/>
+    </div>
+    `
+
+})
\ No newline at end of file
diff --git a/web/app/assets/javascripts/react-components/TeacherSetupNav.js.jsx.coffee b/web/app/assets/javascripts/react-components/TeacherSetupNav.js.jsx.coffee
new file mode 100644
index 000000000..cdbd037c3
--- /dev/null
+++ b/web/app/assets/javascripts/react-components/TeacherSetupNav.js.jsx.coffee
@@ -0,0 +1,25 @@
+context = window
+SessionActions = @SessionActions
+
+@TeacherSetupNav = React.createClass({
+
+  navPrevious: (e) ->
+    e.preventDefault();
+
+
+  navNext: (e) ->
+    e.preventDefault()
+    console.log("navNext this.props", this.state, this.props)
+    this.props.handleSave()
+
+  render: () ->
+    console.log("SetupNav: this.props", this.state, this.props, this.props.handleSave)
+    `<div className="TeacherSetupNav">
+        <a className="nav-button button-grey" onClick={this.navPrevious}>
+          BACK
+        </a>
+        <a className="nav-button button-orange" onClick={this.navNext}>
+          NEXT
+        </a>
+    </div>`
+})
\ No newline at end of file
diff --git a/web/app/assets/javascripts/react-components/actions/TeacherActions.js.coffee b/web/app/assets/javascripts/react-components/actions/TeacherActions.js.coffee
new file mode 100644
index 000000000..e58dbeb3d
--- /dev/null
+++ b/web/app/assets/javascripts/react-components/actions/TeacherActions.js.coffee
@@ -0,0 +1,8 @@
+context = window
+
+@TeacherActions = Reflux.createActions({
+  load: {},
+  change: {}
+})
+
+context.JK.Actions.Teacher = TeacherActions
diff --git a/web/app/assets/javascripts/react-components/mixins/TeacherMixin.js.coffee b/web/app/assets/javascripts/react-components/mixins/TeacherMixin.js.coffee
new file mode 100644
index 000000000..087c7d3e7
--- /dev/null
+++ b/web/app/assets/javascripts/react-components/mixins/TeacherMixin.js.coffee
@@ -0,0 +1,14 @@
+context = window
+teacherActions = window.JK.Actions.Teacher
+
+@TeacherMixin = {
+  onAppInit: (app) ->
+    logger.debug("TeacherProfile onAppInit", app, document.referrer)
+    screenBindings = {
+      'beforeShow': @beforeShow
+    }
+
+    app.bindScreen('teachers/setup/introduction', screenBindings)
+
+  
+}
\ No newline at end of file
diff --git a/web/app/assets/javascripts/react-components/stores/TeacherStore.js.coffee b/web/app/assets/javascripts/react-components/stores/TeacherStore.js.coffee
new file mode 100644
index 000000000..834713b90
--- /dev/null
+++ b/web/app/assets/javascripts/react-components/stores/TeacherStore.js.coffee
@@ -0,0 +1,59 @@
+$ = jQuery
+context = window
+logger = context.JK.logger
+rest = context.JK.Rest()
+EVENTS = context.JK.EVENTS
+
+
+TeacherActions = @TeacherActions
+
+@TeacherStore = Reflux.createStore(
+  {
+    listenables: TeacherActions
+    teacher: null
+
+    init: ->
+      # Register with the app store to get @app
+      this.listenTo(context.AppStore, this.onAppInit)
+      this.listenTo(context.TeacherActions.load, this.onLoadTeacher)
+      this.listenTo(context.TeacherActions.change, this.onSaveTeacher)
+
+
+    onAppInit: (app) ->
+      @app = app
+
+    onLoadTeacher: (options) ->
+      logger.debug("onLoadTeacher", options)
+      if !options?
+        throw new Error('@teacher must be specified')
+
+      rest.getTeacher(options)
+          .done((savedTeacher) =>
+            logger.debug("LOADING TEACHER",savedTeacher)
+            this.trigger({teacher: savedTeacher}))
+          .fail((jqXHR, textStatus, errorMessage) =>
+            logger.debug("FAILED",jqXHR, textStatus, errorMessage)
+            if (jqXHR.status==404)
+              this.trigger({teacher: {}})
+            else
+              context.JK.app.ajaxError(jqXHR, textStatus, errorMessage)
+          )
+
+    onSaveTeacher: (teacher) ->
+      logger.debug("onSaveTeacher", teacher)
+      rest.updateTeacher(teacher)
+          .done((savedTeacher) =>
+            logger.debug("SAVED TEACHER",savedTeacher)
+            this.trigger({teacher: savedTeacher}))
+          .fail((jqXHR, textStatus, errorMessage) =>
+            logger.debug("FAILED",jqXHR, textStatus, errorMessage)
+            #errors = JSON.parse(jqXHR.responseText)
+
+            if (jqXHR.status==422)
+              logger.debug("FAILED422",jqXHR.responseJSON.errors)
+              this.trigger({errors: jqXHR.responseJSON.errors})
+            else
+              context.JK.app.ajaxError(jqXHR, textStatus, errorMessage)
+          )
+  }
+)
\ No newline at end of file