jam-cloud/web/app/assets/javascripts/react-components/TeacherProfile.js.jsx.coffee

context = window
rest = context.JK.Rest()
logger = context.JK.logger
EVENTS = context.JK.EVENTS;

SubjectStore = context.SubjectStore
InstrumentStore = context.InstrumentStore
LanguageStore = context.LanguageStore
GenreStore = context.GenreStore
UserStore = context.UserStore
AppStore = context.AppStore
ProfileActions = context.ProfileActions

profileUtils = context.JK.ProfileUtils

proficiencyCssMap = {
  "1": "proficiency-beginner",
  "2": "proficiency-intermediate",
  "3": "proficiency-expert"
};

proficiencyDescriptionMap = {
  "1": "BEGINNER",
  "2": "INTERMEDIATE",
  "3": "EXPERT"
};

@TeacherProfile = React.createClass({

  mixins: [
    PostProcessorMixin,
    Reflux.listenTo(AppStore, "onAppInit"),
    Reflux.listenTo(UserStore, "onUserChanged"),
    Reflux.listenTo(SubjectStore, "onSubjectsChanged"),
    Reflux.listenTo(GenreStore, "onGenresChanged"),
    Reflux.listenTo(InstrumentStore, "onInstrumentsChanged"),
    Reflux.listenTo(LanguageStore, "onLanguagesChanged")
  ]

  TILE_ABOUT: 'about'
  TILE_EXPERIENCE: 'experience'
  TILE_SAMPLES: 'samples'
  TILE_RATINGS: 'ratings'
  TILE_PRICES: 'prices'
  visible: false

  TILES: ['about', 'experience', 'samples', 'ratings', 'prices']

  onAppInit: (@app) ->
    @app.bindScreen('profile/teacher', {beforeShow: @beforeShow, afterShow: @afterShow, beforeHide: @beforeHide})

  onSubjectsChanged: () ->
    @setState({subjects: true})

  onInstrumentsChanged: () ->
    @setState({instruments: true})

  onGenresChanged: () ->
    @setState({genres: true})

  onLanguagesChanged: () ->
    @setState({languages: true})

  componentDidMount: () ->
    @root = $(@getDOMNode())
    @screen = $('#teacher-profile')
    @starbox()

  componentDidUpdate:() ->
    @starbox()

    context.JK.popExternalLinks(@root)

  starbox:() ->
    $ratings = @root.find('.ratings-box')
    $ratings.each((i, value) =>
      $element = $(value)
      rating = $element.attr('data-ratings')
      rating = parseFloat(rating)

      #$element.starbox('destroy')

      $element.starbox({
        average: rating,
        changeable: false,
        autoUpdateAverage: false,
        ghosting: false
      }).show()
    )


  userDetailDone: (response) ->
    if response.id == @state.userId
      console.log("teacher markup", response)
      @postProcessUser(response)
      @setState({user: response, isSelf: response.id == context.JK.currentUserId})
    else
      logger.debug("ignoring userDetailDone", response.id, @state.userId)

    @showSideBubbleWhenReady()

  showSideBubbleWhenReady: () ->
    if @user? && @state.user?
      if @visible
        setTimeout((() => (
          if @visible
            @showSideBubble()
        )), 5000)

  beforeHide: (e) ->
    @visible = false
    @hideSideBubble();
    logger.debug("TeacherProfile: beforeHide")
    ProfileActions.viewTeacherProfileDone()

  beforeShow: (e) ->
    logger.debug("TeacherProfile: beforeShow")


  afterShow: (e) ->
    UserActions.refresh()
    @visible = true
    logger.debug("TeacherProfile: afterShow")
    @setState({userId: e.id, user: null})
    @updateProfileInfo(e.id)

    if $.QueryString['tile']?
      rewrite = true
      @setState({selected: $.QueryString['tile']})

    if rewrite
      if window.history.replaceState #ie9 proofing
        window.history.replaceState({}, "", "/client#/profile/teacher/#{e.id}")


  updateProfileInfo: (id) ->
    rest.getUserDetail({
      id: id,
      show_teacher: true,
      show_profile: true
    }).done((response) => @userDetailDone(response)).fail(@app.ajaxError)

  showSideBubble: () ->
    # :remaining_test_drives, :can_buy_test_drive?
    if @state.user?['has_booked_test_drive_with_student']
      @showBuyNormalLessonBubble()
    else
      if @user['remaining_test_drives'] > 0
        @showUseRemainingTestDrivesBubble()
      else if @user['can_buy_test_drive?']
        @showBuyTestDriveBubble()
      else
        @showBuyNormalLessonBubble()

  hideSideBubble: () ->
    if @screen.btOff
      @screen.btOff()

  showUseRemainingTestDrivesBubble: ( ) ->
    context.JK.HelpBubbleHelper.showUseRemainingTestDrives(@screen, @screen, @user, (() => @useRemainingTestDrives()))

  showBuyTestDriveBubble: () ->
    context.JK.HelpBubbleHelper.showBuyTestDrive(@screen, @screen, @user, (() => @buyTestDrive()))

  showBuyNormalLessonBubble: () ->
    context.JK.HelpBubbleHelper.showBuyNormalLesson(@screen, @screen, @state.user, (() => @buyNormalLesson()))

  useRemainingTestDrives: () ->
    window.location.href = "/client#/jamclass/book-lesson/test-drive_#{@state.user.id}"
  buyTestDrive: () ->
    window.location.href = "/client#/jamclass/test-drive-selection/#{@state.user.id}"


  buyNormalLesson: () ->
    window.location.href = "/client#/jamclass/book-lesson/normal_#{@state.user.id}"

  getInitialState: () ->
    {
    userId: null,
    user: null,
    selected: 'about' ,
    isSelf: false,
    subjects: false,
    instruments: false,
    genres: false,
    languages: false
    }

  onUserChanged: (userState) ->
    @user = userState?.user
    @showSideBubbleWhenReady()

  editProfile: (selected, e) ->
    e.preventDefault()
    logger.debug("edit profile requested for state " + selected)
    ProfileActions.startTeacherEdit(selected, true)

  editMusicProfile: (selected, e) ->
    e.preventDefault()
    logger.debug("edit music profile requested " + selected)
    ProfileActions.startProfileEdit(selected, true)

  editProfileLink: (text, selected) ->
    if @state.isSelf
      `<a className="edit-link" onClick={this.editProfile.bind(this, selected)}>{text}</a>`

  editMusicProfileLink: (text, selected) ->
    if @state.isSelf
      `<a className="edit-link" onClick={this.editMusicProfile.bind(this, selected)}>{text}</a>`

  editTeacherProfile: (e) ->
    e.preventDefault()

    ProfileActions.startTeacherEdit(null, false)

  teacherBio: (user, teacher) ->
    if teacher.biography?
      biography = teacher.biography
    else
      biography = 'No bio defined yet'

    biography = biography.replace(/\n/g, "<br/>")

    `<div className="section bio">
      <h3>Teacher Profile {this.editProfileLink('edit profile', 'introduction')}</h3>
      <div className="section-content">
        <div dangerouslySetInnerHTML={{__html: biography}}></div>
      </div>
    </div>`

  getYoutubeId:(url) ->
    regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
    match = url.match(regExp)

    if match && match[2].length >= 9
      return match[2]
    else
      return 'unknown'


  sampleVideo: (user, teacher) ->
    if teacher.introductory_video? && teacher.introductory_video.length > 0
      videoUrl = teacher.introductory_video

      # http://stackoverflow.com/a/21607897
      embedId = @getYoutubeId(videoUrl)
      embedUrl = "//www.youtube.com/embed/#{embedId}"

      video = `<a className="video-thumbnail" href={videoUrl} rel="external">
        <img className="play" src="/assets/content/icon_youtube_play.png" />
      </a>`

      return `<div className="section introductory-video">
        <h3>Intro Video</h3>

        <div className="section-content">
          {video}
        </div>
      </div>`


  teachesInfo: (user, teacher) ->
    teachesInfo = []

    instruments = teacher.instruments.map((id) -> InstrumentStore.display(id))
    instrumentData = instruments.join(', ')
    teachesInfo.push(`<tr key="instruments">
      <td>Instruments</td>
      <td>{instrumentData}</td>
    </tr>`)

    subjects = teacher.subjects.map((id) -> SubjectStore.display(id))
    subjectsData = subjects.join(', ')
    teachesInfo.push(`<tr key="subjects">
      <td>Subjects</td>
      <td>{subjectsData}</td>
    </tr>`)

    genres = teacher.genres.map((id) -> GenreStore.display(id))
    genresData = genres.join(', ')
    teachesInfo.push(`<tr key="genres">
      <td>Genres</td>
      <td>{genresData}</td>
    </tr>`)

    levels = []
    if teacher.teaches_beginner
      levels.push('Beginner')
    if teacher.teaches_intermediate
      levels.push('Intermediate')
    if teacher.teaches_advanced
      levels.push('Advanced')
    levelsData = levels.join(', ')
    teachesInfo.push(`<tr key="levels">
      <td>Levels</td>
      <td>{levelsData}</td>
    </tr>`)

    ageData = '?'
    if teacher.teaches_age_lower == 0 && teacher.teaches_age_upper == 0
      ageData = 'Any'
    else if teacher.teaches_age_lower != 0 && teacher.teaches_age_upper != 0
      ageData = "#{teacher.teaches_age_lower} to #{teacher.teaches_age_upper}"
    else if teacher.teaches_age_lower == 0
      ageData = "Age #{teacher.teaches_age_upper} and younger"
    else if teacher.teaches_age_upper == 0
      ageData = "Ages #{teacher.teaches_age_lower} and up"
    teachesInfo.push(`<tr key="ages">
      <td>Ages</td>
      <td>{ageData}</td>
    </tr>`)

    languages = teacher.languages.map((id) -> LanguageStore.display(id))
    languagesData = languages.join(', ')
    teachesInfo.push(`<tr key="languages">
      <td>Languages</td>
      <td>{languagesData}</td>
    </tr>`)
    `<div className="section teachers">
      <h3>{this.state.user.first_name} Teaches {this.editProfileLink('edit teaching', 'basics')}</h3>

      <div className="section-content">
        <table className="jamtable" cellSpacing="0" cellPadding="0" border="0">
          <tbody>
          {teachesInfo}
          </tbody>
        </table>
      </div>
    </div>`

  musicianBio: (user, teacher) ->

    if user.biography?
      musicianBio = user.biography
    else
      musicianBio = 'None specified.'

    musicianBio = musicianBio.replace(/\n/g, "<br/>")

    `<div className="section musician-bio">
      <h3>Musical Profile {this.editMusicProfileLink('update bio', '')}</h3>

      <div className="section-content" dangerouslySetInnerHTML={{__html: musicianBio}}></div>
    </div>`

  plays: (user, teacher) ->
    if user.profile.concert_count > 0
      gigs = "Has played #{profileUtils.gigMap[user.profile.concert_count]} concert gigs"
    else
      gigs = "Has played an unknown # of concert gigs"

    if user.profile.studio_session_count > 0
      studioSessions = "Has played #{profileUtils.gigMap[user.profile.studio_session_count]} studio sessions"
    else
      studioSessions = "Has played an unknown # of studio sessions"


    gigTable =
      `<div className="giginfo">
        <div className="gigs">{gigs}</div>
        <div>{studioSessions}</div>
      </div>`

    display_instruments = []
    for instrument in user.instruments

      description = InstrumentStore.display(instrument.instrument_id)
      proficiency = instrument.proficiency_level;
      instrument_icon_url = context.JK.getInstrumentIcon256(instrument.instrument_id);
      display_instruments.push(`<div className="profile-instrument" key={instrument.instrument_id}>
        <img src={instrument_icon_url} width="70" height="70"/><br />
        <span>{description}</span><br />
        <span className={proficiencyCssMap[proficiency]}>{proficiencyDescriptionMap[proficiency]}</span>
      </div>`)

    `<div className="section plays">
      <h3>{this.state.user.first_name} Plays {this.editMusicProfileLink('update instruments', 'experience')}</h3>

      <div className="section-content">
        {display_instruments}
        {gigTable}
      </div>
      <br className="clearall"/>
    </div>`

  createPresence: (className, url, img) ->
    `<div key={className} className={className + "-presence logo online-presence-option"}>
      <a href={url} rel="external"><img className="logo" src={img}/></a>
    </div>`


  onlinePresences: (user, teacher) ->
    online_presences = user.profile.online_presences

    presences = []

    if user.profile.website
      # make sure website is rooted
      website = user.profile.website
      if website.indexOf('http') == -1
        website = 'http://' + website
      presences.push(@createPresence("user-website", website, "/assets/content/website-logo.png"))

    matches = profileUtils.soundCloudPresences(online_presences)
    if matches.length > 0
      presences.push(@createPresence("soundcloud", "http://www.soundcloud.com/#{matches[0].username}",
        "/assets/content/soundcloud-logo.png"))

    matches = profileUtils.reverbNationPresences(online_presences)
    if matches.length > 0
      presences.push(@createPresence("reverbnation", "http://www.reverbnation.com/#{matches[0].username}",
        "/assets/content/reverbnation-logo.png"))

    matches = profileUtils.bandCampPresences(online_presences)
    if matches.length > 0
      presences.push(@createPresence("bandcamp", 'http://' + matches[0].username + '.bandcamp.com/',
        "/assets/content/bandcamp-logo.png"))

    matches = profileUtils.fandalismPresences(online_presences)
    if matches.length > 0
      presences.push(@createPresence("fandalism", 'http://www.fandalism.com/' + matches[0].username,
        "/assets/content/fandalism-logo.png"))

    matches = profileUtils.youTubePresences(online_presences)
    if matches.length > 0
      presences.push(@createPresence("youtube", 'http://www.youtube.com/' + matches[0].username,
        "/assets/content/youtube-logo.png"))

    matches = profileUtils.facebookPresences(online_presences)
    if matches.length > 0
      presences.push(@createPresence("facebook", 'http://www.facebook.com/' + matches[0].username,
        "/assets/content/facebook-logo.png"))

    matches = profileUtils.twitterPresences(online_presences)
    if matches.length > 0
      presences.push(@createPresence("twitter", 'http://www.twitter.com/' + matches[0].username,
        "/assets/content/twitter-logo.png"))

    if presences.length == 0
      presences = `<div className="no-online-presence">None specified</div>`


    `<div className="section plays">
      <h3>Online Presence {this.editMusicProfileLink('update presence', 'samples')}</h3>

      <div className="section-content">
        {presences}
      </div>
    </div>`

  about: () ->
    user = @state.user
    teacher = user.teacher

    `<div className="about-block info-block">
      {this.sampleVideo(user, teacher)}

      {this.teacherBio(user, teacher)}

      {this.teachesInfo(user, teacher)}

      {this.musicianBio(user, teacher)}

      {this.plays(user, teacher)}

      {this.onlinePresences(user, teacher)}
    </div>`

  experiences: (title, attr, update, user, teacher) ->
    teachingExperiences = []

    for teachingExperience, i in teacher['experiences_' + attr]
      years = ''
      if teachingExperience.start_year > 0
        if teachingExperience.end_year && teachingExperience.end_year > 0
          years = "#{teachingExperience.start_year} - #{teachingExperience.end_year}"
        else
          years = "#{teachingExperience.start_year} - Present"

      teachingExperiences.push(`<div key={i} className="experience">
        <div className="years">{years}</div>
        <h4>{teachingExperience.name}</h4>

        <div className="org">{teachingExperience.organization}</div>
      </div>`)

    if update?
      updateLink = this.editProfileLink('update ' + update, 'experience')

    if teachingExperiences.length == 0
      teachingExperiences = `<div>None specified</div>`
    `<div className="section teaching-experience">
      <h3>{title} {updateLink}</h3>

      <div className="section-content">
        {teachingExperiences}
      </div>
    </div>`

  sampleClicked: (e) ->
    e.preventDefault()
    context.JK.popExternalLink($(e.target).attr('href'))


  musicSamples: (user, teacher) ->
    performance_samples = user.profile.performance_samples

    jamkazamSamples = []
    samples = profileUtils.jamkazamSamples(performance_samples);
    for sample in samples
      jamkazamSamples.push(`<a key={sample.claimed_recording.id} className="jamkazam-playable playable" href={"/recordings/" + sample.claimed_recording.id} onClick={this.sampleClicked}>{sample.claimed_recording.name}</a>`)

    soundCloudSamples= []
    samples = profileUtils.soundCloudSamples(performance_samples);
    for sample in samples
      soundCloudSamples.push(`<a key={sample.url} className="sound-cloud-playable playable" href={sample.url} onClick={this.sampleClicked}>{sample.description}</a>`)

    youTubeSamples = []
    samples = profileUtils.youTubeSamples(performance_samples);
    for sample in samples
      youTubeSamples.push(`<a key={sample.url} className="youtube-playable playable" href={sample.url} onClick={this.sampleClicked}>{sample.description}</a>`)

    sampleJsx = []

    if jamkazamSamples.length > 0
      sampleJsx.push(`<div key="jamkazam-samples" className="jamkazam-samples logo performance-sample-option">
        <img className="logo" src="/assets/header/logo.png" />
        {jamkazamSamples}
      </div>`)

    if soundCloudSamples.length > 0
      sampleJsx.push(`<div key="soundcloud-samples" className="soundcloud-samples logo performance-sample-option">
        <img className="logo" src="/assets/content/soundcloud-logo.png" />
        {soundCloudSamples}
      </div>`)

    if youTubeSamples.length > 0
      sampleJsx.push(`<div key="youtube-samples" className="youtube-samples logo performance-sample-option">
        <img className="logo" src="/assets/content/youtube-logo.png" />
        {youTubeSamples}
      </div>`)


    `<div className="section samples">
        <h3>Performance Samples {this.editMusicProfileLink('update samples', 'samples')}</h3>

        <div className="section-content">
          {sampleJsx}
        </div>
      </div>`

  experience: () ->
    user = @state.user
    teacher = user.teacher

    `<div className="experience-block info-block">
      {this.experiences('Teaching Experience', 'teaching', 'experience', user, teacher)}

      {this.experiences('Music Education', 'education', null, user, teacher)}

      {this.experiences('Music Awards', 'award', null, user, teacher)}
    </div>`

  samples: () ->
    user = @state.user
    teacher = user.teacher

    `<div className="samples-block info-block">
      {this.musicSamples(user, teacher)}
    </div>`

  rateTeacher: (e) ->
    @app.layout.showDialog('rate-user-dialog', {d1: "teacher_#{@state.user.id}"}).one(EVENTS.DIALOG_CLOSED, (e, data) =>
      if !data.canceled
        @updateProfileInfo(@state.userId)
    )

  ratings: () ->
    user = @state.user
    teacher = user.teacher

    summary = teacher.review_summary || {avg_rating: 0, review_count: 0}

    if summary.review_count == 1
      reviewCount = '1 review'
    else
      reviewCount = summary.review_count + ' reviews'
    reviews = []

    for review in teacher.recent_reviews
      photo_url = review.user.photo_url
      if !photo_url?
        photo_url = '/assets/shared/avatar_generic.png'

      name = `<div key={review.id} className="reviewer-name">{review.user.name}</div>`
      reviews.push(`<div className="review">
        <div className="review-header">
          <div className="avatar small">
            <img src={photo_url} />
          </div>
          {name}
          <div className="ratings-box hidden" data-ratings={review.rating / 5 }/>
          <div className="review-time">{context.JK.formatDateShort(review.created_at)}</div>
        </div>
        <div className="review-content" dangerouslySetInnerHTML={{__html: review.description}}></div>
      </div>`)
    `<div className="ratings-block info-block">
      <h3>Ratings & Reviews</h3>

      <h4>{user.first_name} Summary Rating: <div data-ratings={summary.avg_rating / 5} className="ratings-box hidden"/> <div className="review-count">({reviewCount})</div> <a onClick={this.rateTeacher} className="button-orange rate-teacher-btn">RATE TEACHER</a></h4>


      {reviews}
    </div>`

  prices: () ->
    user = @state.user
    teacher = user.teacher

    rows = []

    for minutes in [30, 45, 60, 90, 120]
      lesson_price = teacher["price_per_lesson_#{minutes}_cents"]
      monthly_price = teacher["price_per_month_#{minutes}_cents"]
      duration_enabled = teacher["lesson_duration_#{minutes}"]

      if duration_enabled && teacher.prices_per_lesson && lesson_price? && lesson_price > 0
        lessonPriceFormatted = '$ ' + (lesson_price / 100).toFixed(2)
      else
        lessonPriceFormatted = 'N/A'

      if duration_enabled && teacher.prices_per_month && monthly_price? && monthly_price > 0
        monthlyPriceFormatted = '$ ' + (monthly_price / 100).toFixed(2)
      else
        monthlyPriceFormatted = 'N/A'

      rows.push(`<tr key={minutes} ><td>{minutes + " Minutes"}</td><td>{lessonPriceFormatted}</td><td>{monthlyPriceFormatted}</td></tr>`)

    `<div className="prices-block info-block">
      <h3>Lesson Prices {this.editProfileLink('update prices', 'pricing')}</h3>

      <div className="section-content">
        <table className="jamtable price-table">
          <thead>
            <tr><th>LESSON LENGTH</th><th>PRICE PER LESSON</th><th>PRICE PER MONTH</th></tr>
          </thead>
          <tbody>
          {rows}
          </tbody>
        </table>
      </div>
    </div>`

  mainContent: () ->
    if @state.selected == @TILE_ABOUT
      @about()
    else if @state.selected == @TILE_EXPERIENCE
      @experience()
    else if @state.selected == @TILE_SAMPLES
      @samples()
    else if @state.selected == @TILE_RATINGS
      @ratings()
    else if @state.selected == @TILE_PRICES
      @prices()

  profileLeft: () ->

    if this.state.user.age?
      age = `<div className="age">{this.state.user.age} years old</div>`
    else
      age = null

    `<div className="profile-about-left">
      <div className="left-content">
        <div className="location">
          <div className="city">{this.state.user.city}</div>
          <div className="state">{this.state.user.state}</div>
          <div className="country">{this.state.user.country}</div>
          {age}
        </div>

        <div className="activity">
          <div className="last-signed-in">Last Signed In:</div>
          <div>{"very recently"}</div>
        </div>
      </div>
    </div>`

  selectionMade: (selection, e) ->
    e.preventDefault()

    @setState({selected: selection})

  createTileLink: (i, tile) ->
    active = this.state.selected == tile
    classes = classNames({last: i == @TILES.length - 1, activeTile: active})

    return `<div key={i} className="profile-tile"><a className={classes} onClick={this.selectionMade.bind(this, tile)}>{tile}</a></div>`

  onCustomBack: (customBack, e) ->
    e.preventDefault()
    context.location = customBack

  render: () ->
    if @state.user?
      avatar = context.JK.resolveAvatarUrl(@state.user.photo_url);
    if @state.user?
      if @state.user.teacher?
        mainContent = @mainContent()
        profileLeft = @profileLeft()
      else
        if context.JK.currentUserId? && @state.user?.id == context.JK.currentUserId
          noTeacherProfile = `<div className="no-teacher-profile">You have no teacher profile defined yet. <a onClick={this.editTeacherProfile}>Start making one now.</a></div>`
        else
          noTeacherProfile = `<div className="no-teacher-profile">This user has no teacher profile.</div>`

        mainContent = `<div className="">
          {noTeacherProfile}
        </div>`
    else
      noTeacherProfile = `<div><div className="loading-profile">Loading profile...</div><div className="spinner spinner-large"></div></div>`
      mainContent = `<div className="">
        {noTeacherProfile}
      </div>`

    if ProfileStore.customBack
      actionButtons = `<div className="right profileNavActions">
        <a className="button-orange" onClick={this.onCustomBack.bind(this, ProfileStore.customBack)}>{ProfileStore.customBackDisplay}</a>
      </div>`

    profileSelections = []
    for tile, i in @TILES
      profileSelections.push(@createTileLink(i, tile, profileSelections))

    profileNav = `<div className="profile-nav">
      {profileSelections}
    </div>`
    `<div className="content-body-scroller">
      <div className="profile-header profile-head">
        <JamClassSearchHeader teacher={this.state.user}/>

        {actionButtons}
        <br clear="all"/><br />

        <div className="profile-photo">
          <div className="avatar-profile">
            <img width="200" height="200" src={avatar}/>
          </div>
        </div>

        {profileNav}
        <div className="clearall"></div>
      </div>

      <div className="profile-body">
        <div className="profile-wrapper">
          {profileLeft}
          <div className="main-content">
            {mainContent}
          </div>

        </div>
      </div>
    </div>`
})