/*Downloaded from https://www.codeseek.co/0damian/fcc-leaderboard-xEbLJr */
var RankingContainer = React.createClass({
displayName: 'RankingContainer',
getInitialState: function getInitialState() {
return {
latestData: '[]',
allTimeData: '[]',
view: 'latest'
};
},
componentDidMount: function componentDidMount() {
this.getData(this.props.latestUrl).then(function (resp) {
this.setState({
latestData: JSON.stringify(resp.data)
});
}.bind(this)).catch(function (err) {
console.log('Latest data error: ' + err);
}.bind(this));
this.getData(this.props.allTimeUrl).then(function (resp) {
this.setState({
allTimeData: JSON.stringify(resp.data)
});
}.bind(this)).catch(function (err) {
console.log('All time data error: ' + err);
}.bind(this));
},
getData: function getData(source) {
return axios.get(source);
},
handleClick: function handleClick(e) {
e.preventDefault();
if (e.target.className == 'latest') {
if (this.state.view != 'latest') {
this.setState({
view: 'latest'
});
}
} else {
if (this.state.view == 'latest') {
this.setState({
view: 'alltime'
});
}
}
},
render: function render() {
return React.createElement(
'table',
null,
React.createElement(
'caption',
null,
React.createElement('img', { src: 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg', alt: 'FreeCodeCamp', className: 'logo' }),
'Top 100'
),
React.createElement(
'thead',
null,
React.createElement(
'tr',
null,
React.createElement(
'th',
{ rowSpan: '2' },
'#'
),
React.createElement('th', { rowSpan: '2' }),
React.createElement(
'th',
{ rowSpan: '2' },
'camper'
),
React.createElement(
'th',
{
colSpan: '2',
className: 'points'
},
'points'
)
),
React.createElement(
'tr',
null,
React.createElement(
'th',
{
onClick: this.handleClick,
className: 'latest' },
'last 30 days\xA0',
this.state.view == 'latest' ? String.fromCharCode(9660) : ''
),
React.createElement(
'th',
{
onClick: this.handleClick,
className: 'alltime' },
'all time\xA0',
this.state.view == 'alltime' ? String.fromCharCode(9660) : ''
)
)
),
React.createElement(TableBody, {
data: this.state.view == 'latest' ? this.state.latestData : this.state.allTimeData
})
);
}
});
var TableBody = React.createClass({
displayName: 'TableBody',
render: function render() {
var count = 0;
var body = JSON.parse(this.props.data).map(function (user) {
count++;
return React.createElement(
'tr',
null,
React.createElement(
'td',
null,
count
),
React.createElement(
'td',
null,
React.createElement('img', { src: user.img, alt: 'Avatar for ' + user.username, className: 'avatar-img' })
),
React.createElement(
'td',
null,
user.username
),
React.createElement(
'td',
null,
user.recent
),
React.createElement(
'td',
null,
user.alltime
)
);
});
return React.createElement(
'tbody',
null,
body
);
}
});
ReactDOM.render(React.createElement(RankingContainer, {
latestUrl: 'https://fcctop100.herokuapp.com/api/fccusers/top/recent',
allTimeUrl: 'https://fcctop100.herokuapp.com/api/fccusers/top/alltime'
}), document.getElementById('app'));