162 lines
4.9 KiB
CoffeeScript
162 lines
4.9 KiB
CoffeeScript
context = window
|
|
|
|
SessionsActions = @SessionsActions
|
|
|
|
@FindSessionFriends = React.createClass({
|
|
|
|
mixins: [Reflux.listenTo(@AppStore, "onAppInit")
|
|
Reflux.listenTo(@SessionsStore, "onSessionsChanged")]
|
|
|
|
TYPE_SESSION: 'my'
|
|
searched_ever: false
|
|
registeredInfiniteScroll: false
|
|
|
|
getInitialState: () ->
|
|
{active: false, sessions: [], searching: false, count: 0, currentPage: 0, end:false}
|
|
|
|
sessionResults: () ->
|
|
results = []
|
|
for session in @state.sessions
|
|
results.push(`<FindSessionRow session={session} />`)
|
|
results
|
|
|
|
help: () ->
|
|
`<div className="find-session-help">
|
|
<h3>How This Page Works</h3>
|
|
<p>This page will show sessions tailored for you:</p>
|
|
<ul>
|
|
<li>sessions created by a friend (<a href='#' onClick={this.inviteFriends.bind(this)}>invite others to JamKazam!</a>)</li>
|
|
<li>sessions for which you have an invitation</li>
|
|
<li>sessions for which you have a RSVP</li>
|
|
</ul>
|
|
<br/>
|
|
<h3>Sit Back and Relax</h3>
|
|
<p>This page will automatically update when a friend creates a session, or you are invited to one.</p>
|
|
<p>So if your friend is creating a session soon, just sit tight and watch for sessions to show up!</p>
|
|
</div>`
|
|
|
|
refresh: () ->
|
|
if @state.searching
|
|
return
|
|
|
|
SessionsActions.clearSessions.trigger(@TYPE_SESSION, @query())
|
|
|
|
render: () ->
|
|
results = @sessionResults()
|
|
|
|
className = "content-body-scroller sessions-for-me"
|
|
|
|
if(@props.active)
|
|
className = className + " active"
|
|
|
|
firstTime = null
|
|
if results.length == 0
|
|
if @state.searching
|
|
results = `<tr key="single"><td colSpan="3" className="none-found">... Searching ...</td></tr>`
|
|
else
|
|
# help = @help()
|
|
results = `<tr key="single"><td colSpan="3" className="none-found">None Found</td></tr>`
|
|
|
|
help = @help()
|
|
|
|
refreshButtonClasses = "button-grey btn-refresh"
|
|
|
|
if @state.searching
|
|
refreshButtonClasses = refreshButtonClasses += " disabled"
|
|
|
|
`<div className={className}>
|
|
<div className="content-wrapper">
|
|
<div id="sessions-active" className="session-container">
|
|
<div className="header-zone">
|
|
<h2>sessions for me</h2>
|
|
|
|
|
|
<div className="refresh-btn">
|
|
<a href="/client#/findSession" style={{textDecoration:'none'}} disabled={this.state.searching}
|
|
className={refreshButtonClasses} onClick={this.refresh.bind(this)}>REFRESH<span class="extra"></span></a>
|
|
</div>
|
|
<div className="search-box">
|
|
<input className="session-keyword-srch" type="text" name="search"
|
|
placeholder="Search by Keyword"/>
|
|
</div>
|
|
</div>
|
|
|
|
<br/>
|
|
|
|
<div className="findsession-container">
|
|
<table id="sessions-active" className="findsession-table" cellspacing="0"
|
|
cellpadding="0" border="0">
|
|
<thead>
|
|
<tr>
|
|
<th align="left" width="40%">SESSION</th>
|
|
<th align="left" width="45%">MUSICIANS</th>
|
|
<th align="left" width="10%" style={{textAlign:'center'}}>ACTIONS</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{results}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{help}
|
|
</div>
|
|
</div>
|
|
</div>`
|
|
|
|
query: () ->
|
|
|
|
$root = $(this.getDOMNode())
|
|
keyword = $root.find('input.session-keyword-srch').val()
|
|
if keyword == ''
|
|
keyword = undefined
|
|
query =
|
|
keyword: keyword
|
|
|
|
query
|
|
|
|
|
|
componentDidMount: () ->
|
|
@EVENTS = context.JK.EVENTS
|
|
@rest = context.JK.Rest()
|
|
@logger = context.JK.logger
|
|
|
|
|
|
componentDidUpdate: (prevProps, prevState) ->
|
|
|
|
if @props.active && !prevProps.active && !@searched_ever
|
|
SessionsActions.updateSessions.trigger('my')
|
|
@searched_ever = true
|
|
|
|
$root = $(this.getDOMNode())
|
|
$scroller = $root
|
|
|
|
if !@registeredInfiniteScroll
|
|
@registerInfiniteScroll($scroller)
|
|
|
|
registerInfiniteScroll: ($scroller) ->
|
|
@registeredInfiniteScroll = true
|
|
|
|
$scroller.off('scroll')
|
|
$scroller.on('scroll', () =>
|
|
|
|
# be sure to not fire off many refreshes when user hits the bottom
|
|
return if @state.searching
|
|
|
|
if @state.end
|
|
return
|
|
|
|
if $scroller.scrollTop() + $scroller.innerHeight() + 100 >= $scroller[0].scrollHeight
|
|
SessionsActions.updateSessions.trigger(@TYPE_SESSION, @query())
|
|
)
|
|
|
|
inviteFriends:() ->
|
|
JK.InvitationDialogInstance.showEmailDialog();
|
|
|
|
onAppInit: (@app) ->
|
|
return
|
|
|
|
onSessionsChanged: (sessionsChanged) ->
|
|
if sessionsChanged.type == @TYPE_SESSION
|
|
@setState(sessionsChanged)
|
|
|
|
}) |