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

context = window

@FindSessionFriends = React.createClass({

  mixins: [Reflux.listenTo(@AppStore, "onAppInit")]

  getInitialState: () ->
    {sessions: [], currentPage: 0, next: null, searching: false, count: 0}


  search: () ->
    return if @state.searching

    $root = $(@getDOMNode())
    # disable scroll watching now that we've started a new search
    $root.find('.content-body-scroller').off('scroll')
    $root.find('.end-of-sessions-list').hide()


    # we have to make sure the query starts from page 1, and no 'next' from previous causes a 'since' to show up
    query = @defaultQuery({page: 0})
    delete query.since
    @rest.findFriendSessions(query)
    .done((response) =>
      @setState({sessions: response.sessions, searching: false, first_search: false, currentPage: 1})
    )
    .fail((jqXHR) =>
      @app.notifyServerError jqXHR, 'Search Unavailable'
      @setState({searching: false, first_search: false})
    )

    @setState({currentPage: 0, sessions:[], searching: true})

  sessionResults: () ->
    results = []
    for session in @state.sessions
        results.push(`<FindSessionRow session={session} />`)
    results

  render: () ->
    results = @sessionResults()

    className = "sessions-for-me"

    if(@props.active)
      className = className + " active"

    `<div className={className}>
        <div className="content-body-scroller">
            <div className="content-wrapper">
                <div id="sessions-active" className="session-container">
                    <h2>sessions for me</h2>
                    <br/>

                    <div className="findsession-container">
                        <table id="sessions-active" className="findsession-table" cellspacing="0"
                               cellpadding="0" border="0">
                            <tr>
                                <th align="left" width="30%">SESSION</th>
                                <th align="left" width="35%">MUSICIANS</th>
                                <th align="left" width="30%" style={{textAlign:'center'}}>ACTIONS</th>
                            </tr>
                            {results}
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>`


  defaultQuery: (extra) ->
    query =
      limit: @LIMIT
      offset: @state.currentPage * @LIMIT

    $.extend(query, extra)

  componentDidMount: () ->
    @EVENTS = context.JK.EVENTS
    @rest = context.JK.Rest()
    @logger = context.JK.logger

    @search()

  componentDidUpdate: () ->
    $root = $(this.getDOMNode())
    $scroller = $root.find('.content-body-scroller')

    if @state.next == null
      $scroller = $root.find('.content-body-scroller')
      # if we less results than asked for, end searching
      #$scroller.infinitescroll 'pause'
      $scroller.off('scroll')
      if @state.currentPage == 1 and @state.sessions.length == 0
        $root.find('.end-of-sessions-list').text('No friend sessions found').show()
        @logger.debug("FindSessions: empty search")
      else if @state.currentPage > 0
        $noMoreSessions = $root.find('.end-of-sessions-list').text('No more sessions').show()
      # there are bugs with infinitescroll not removing the 'loading'.
      # it's most noticeable at the end of the list, so whack all such entries
    else
      @registerInfiniteScroll($scroller)

  registerInfiniteScroll: ($scroller) ->
    $scroller.off('scroll')
    $scroller.on('scroll', () =>

      # be sure to not fire off many refreshes when user hits the bottom
      return if @refreshing

      if $scroller.scrollTop() + $scroller.innerHeight() + 100 >= $scroller[0].scrollHeight
        $scroller.append('<div class="infinite-scroll-loader-2">... Loading more Sessions ...</div>')
        @refreshing = true
        @logger.debug("refreshing more sessions for infinite scroll")
        @setState({searching: true})
        @rest.findFriendSessions(@defaultQuery())
        .done((json) =>
          @setState({
            sessions: @state.sessions.concat(json.sessions),
            currentPage: @state.currentPage + 1
          })
        )
        .always(() =>
          $scroller.find('.infinite-scroll-loader-2').remove()
          @refreshing = false
          @setState({searching: false})
        )
    )

  onAppInit: (@app) ->
    return
})