Created
July 12, 2016 01:17
-
-
Save EFox2413/2eb24101640757e21a38734a803a46c4 to your computer and use it in GitHub Desktop.
React leaderboard component of Rails webapp designed for FCC React leaderboard project, uses bootstrap for some CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var userData = []; | |
| var userData2 = []; | |
| var reverseBool = false; | |
| var Leaderboard = React.createClass({ | |
| getInitialState: function() { | |
| return {data: [], sortBy: '', | |
| url: 'https://fcctop100.herokuapp.com/api/fccusers/top/recent'}; | |
| }, | |
| componentDidMount: function() { | |
| this.serverRequest = $.get(this.state.url, function (result) { | |
| userData = result; | |
| this.setState({ | |
| data: result, | |
| sortBy: '' | |
| }); | |
| }.bind(this)); | |
| }, | |
| componentWillUnmount: function() { | |
| this.serverRequest.abort(); | |
| }, | |
| // sets the sort state, sorting is handled in the render method of UserTable | |
| handleClick: function(sortBy) { | |
| this.setState({ | |
| sortBy: sortBy | |
| }); | |
| }, | |
| // this changes where we fetch the data | |
| changeReq: function() { | |
| url = 'https://fcctop100.herokuapp.com/api/fccusers/top/alltime'; | |
| if (userData2.length < 1) { | |
| this.serverRequest = $.get(url, function (result) { | |
| userData2 = result; | |
| this.setState({ | |
| data: result, | |
| sortBy: '', | |
| url: url | |
| }); | |
| }.bind(this)); | |
| } else if( this.state.url === url) { | |
| this.setState({ | |
| data: userData, | |
| sortBy: '', | |
| url: 'https://fcctop100.herokuapp.com/api/fccusers/top/recent' | |
| }); | |
| } else { | |
| this.setState({ | |
| data: userData2, | |
| sortBy: '', | |
| url: url | |
| }); | |
| } | |
| }, | |
| render: function() { | |
| return ( | |
| <div className="leaderboard"> | |
| <Title | |
| changeReq={this.changeReq} /> | |
| <HeadRow | |
| onChange={this.handleClick} | |
| sortBy={this.state.sortBy} /> | |
| <UserTable | |
| data={this.state.data} | |
| sortBy={this.state.sortBy} /> | |
| </div> | |
| ); | |
| } | |
| }); | |
| var Title = React.createClass({ | |
| handleClick: function() { | |
| this.props.changeReq(); | |
| }, | |
| render: function() { | |
| return ( | |
| <h2 className="title" onClick={this.handleClick}> | |
| Leaderboard | |
| <small>Last 30</small> | |
| <small>All time</small> | |
| </h2> | |
| ); | |
| } | |
| }); | |
| var HeadRow = React.createClass({ | |
| render: function() { | |
| return ( | |
| <div className="row" > | |
| <div className="col-xs-1"> Avatar </div> | |
| <NameButton | |
| sortBy={this.props.sortBy} | |
| onChange={this.props.onChange} /> | |
| <ScoreButton | |
| sortBy={this.props.sortBy} | |
| onChange={this.props.onChange} /> | |
| <RecentButton | |
| sortBy={this.props.sortBy} | |
| onChange={this.props.onChange} /> | |
| <ActivityButton | |
| sortBy={this.props.sortBy} | |
| onChange={this.props.onChange} /> | |
| </div> | |
| ); | |
| } | |
| }); | |
| var UserRow = React.createClass({ | |
| render: function() { | |
| var imageStyle = { 'marginTop': '10px'}; | |
| return ( | |
| <div className="row" key={ this.props.index }> | |
| <img className="img-fluid img-circle col-xs-1" style={imageStyle} src={ this.props.img }/> | |
| <div className="col-xs-2">{this.props.username}</div> | |
| <div className="col-xs-1">{this.props.alltime}</div> | |
| <div className="col-xs-1">{this.props.recent}</div> | |
| <div className="col-xs-1">{this.props.lastUpdate}</div> | |
| </div> | |
| ); | |
| } | |
| }); | |
| var UserTable = React.createClass({ | |
| render: function() { | |
| var rows = []; | |
| var sortStr = this.props.sortBy; | |
| // sort function, sort by property sortBy | |
| rows = this.props.data.sort(function(a, b) { | |
| if (sortStr != '') { | |
| if (typeof a[sortStr] === 'number') { | |
| if (a[sortStr] > b[sortStr] ) {return 1;} else { return -1;} | |
| } else { | |
| if (a[sortStr].toLowerCase() > b[sortStr].toLowerCase() ) {return 1;} else { return -1;} | |
| } | |
| } | |
| }); | |
| if (reverseBool) { | |
| rows = rows.reverse(); | |
| } | |
| // map each entry to html | |
| rows = rows.map(function(entry, index) { | |
| return <UserRow key={index} img={entry.img} username={entry.username} alltime={entry.alltime} recent={entry.recent} lastUpdate={entry.lastUpdate} />; | |
| }); | |
| return ( | |
| <div> | |
| {rows} | |
| </div> | |
| ); | |
| } | |
| }); | |
| var NameButton = React.createClass({ | |
| // bubbles up to leaderboard handleClick function | |
| handleClick: function() { | |
| // if already sorted reverse sorting | |
| var prop = this.props.sortBy; | |
| if (prop === 'username') { | |
| reverseBool = !reverseBool; | |
| } else { reverseBool = false; } | |
| this.props.onChange('username'); | |
| }, | |
| render: function() { | |
| return ( <div className="col-xs-2" onClick={this.handleClick}> Username </div> ); | |
| } | |
| }); | |
| var ScoreButton = React.createClass({ | |
| handleClick: function() { | |
| var prop = this.props.sortBy; | |
| if (prop === 'alltime') { | |
| reverseBool = !reverseBool; | |
| } else { reverseBool = false; } | |
| this.props.onChange('alltime'); | |
| }, | |
| render: function() { | |
| return ( <div className="col-xs-1" onClick={this.handleClick}> Score </div> ); | |
| } | |
| }); | |
| var RecentButton = React.createClass({ | |
| handleClick: function() { | |
| var prop = this.props.sortBy; | |
| if (prop === 'recent') { | |
| reverseBool = !reverseBool; | |
| } else { reverseBool = false; } | |
| this.props.onChange('recent'); | |
| }, | |
| render: function() { | |
| return ( <div className="col-xs-1" onClick={this.handleClick}> Recent </div> ); | |
| } | |
| }); | |
| var ActivityButton = React.createClass({ | |
| handleClick: function() { | |
| var prop = this.props.sortBy; | |
| if (prop === 'lastUpdate') { | |
| reverseBool = !reverseBool; | |
| } else { reverseBool = false; } | |
| this.props.onChange('lastUpdate'); | |
| }, | |
| render: function() { | |
| return ( <div className="col-xs-1" onClick={this.handleClick}> Activity </div> ); | |
| } | |
| }); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment