Skip to content

Instantly share code, notes, and snippets.

@chintanparikh
Created June 22, 2015 05:37
Show Gist options
  • Save chintanparikh/3145439119fcff4e1f92 to your computer and use it in GitHub Desktop.
Save chintanparikh/3145439119fcff4e1f92 to your computer and use it in GitHub Desktop.
<%= react_component 'VideoListWithSearch', videoURL: videos_path(format: :json),
searchURL: videos_search_path(format: :json) %>
window.Search = React.createClass
componentWillMount: ->
console.log('Will Mount')
render: ->
<div className="full-width search">
<div className="container">
<form>
<input type="text" onChange={this.props.handleChange}/>
<a href="" className="glyphicon glyphicon-search submit button"></a>
<a href="" className="glyphicon glyphicon-plus add-filter button"></a>
</form>
</div>
</div>
window.Video = React.createClass
render: ->
<a className="col-md-4 card-wrapper">
<div className="card" style={{background: 'url(' + this.props.video.thumbnail + ') center'}}>
<div className="info-wrapper">
<span className="info">
{this.props.video.team}
</span>
<span className="info event">
{this.props.video.event} {this.props.video.season}
</span>
</div>
</div>
</a>
window.VideoList = React.createClass
propTypes:
videoURL: React.PropTypes.string
getInitialProps: ->
videos: []
hasVideos: ->
this.props.videos.length != 0
renderNoVideoFoundMessage: ->
if not this.hasVideos()
<div className="message">
<p>No videos</p>
<p>Try searching for something else</p>
</div>
renderVideoComponents: ->
this.props.videos.map (video, i) ->
<Video video={video} key={i} />
render: ->
<div className="container">
<div className="row cards video-list">
{this.renderNoVideoFoundMessage()}
{this.renderVideoComponents()}
</div>
</div>
window.VideoListWithSearch = React.createClass
getInitialState: ->
{
query: null,
videos: []
}
componentWillMount: ->
that = this
$.get this.props.videoURL, (data) ->
that.setState({videos: data})
search: ->
that = this
$.get this.props.searchURL, (data) ->
that.setState({videos: data})
handleChange: (event) ->
this.setState({query: event.target.value});
render: ->
<Search onChange={this.handleChange} />
<VideoList videos={this.state.videos} />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment