133 lines
4.3 KiB
CoffeeScript
133 lines
4.3 KiB
CoffeeScript
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
|
|
}) |