2016-03-22 10:22:46 +09:00
|
|
|
import React, { PropTypes, Component } from 'react';
|
2016-03-28 11:43:42 +09:00
|
|
|
import { Button } from 'react-bootstrap';
|
2016-03-22 10:22:46 +09:00
|
|
|
|
2016-04-14 10:12:35 +09:00
|
|
|
class PostsDaily extends Component{
|
2016-03-22 10:22:46 +09:00
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.loadMoreDays = this.loadMoreDays.bind(this);
|
|
|
|
this.state = {days: props.days};
|
|
|
|
}
|
|
|
|
|
2016-05-03 12:44:50 +09:00
|
|
|
// for a number of days "n" return dates object for the past n days
|
|
|
|
getLastNDates(n) {
|
|
|
|
return _.range(n).map(
|
|
|
|
i => moment().subtract(i, 'days').startOf('day').toDate()
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-03-22 10:22:46 +09:00
|
|
|
loadMoreDays(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
this.setState({
|
2016-05-03 12:44:50 +09:00
|
|
|
days: this.state.days + this.props.increment
|
2016-03-22 10:22:46 +09:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
2016-04-19 15:45:36 +09:00
|
|
|
<div className="posts-daily">
|
2016-05-22 16:42:24 +09:00
|
|
|
<Telescope.components.PostsListHeader />
|
|
|
|
{this.getLastNDates(this.state.days).map((date, index) => <Telescope.components.PostsDay key={index} date={date} number={index}/>)}
|
2016-04-19 15:45:36 +09:00
|
|
|
<button className="posts-load-more" onClick={this.loadMoreDays}>Load More Days</button>
|
2016-03-22 10:22:46 +09:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-04-14 10:12:35 +09:00
|
|
|
PostsDaily.propTypes = {
|
2016-05-03 12:44:50 +09:00
|
|
|
days: React.PropTypes.number,
|
|
|
|
increment: React.PropTypes.number
|
2016-03-22 10:22:46 +09:00
|
|
|
}
|
|
|
|
|
2016-04-14 10:12:35 +09:00
|
|
|
PostsDaily.defaultProps = {
|
2016-05-03 12:44:50 +09:00
|
|
|
days: 5,
|
|
|
|
increment: 5
|
2016-03-22 10:22:46 +09:00
|
|
|
}
|
|
|
|
|
2016-04-14 10:12:35 +09:00
|
|
|
module.exports = PostsDaily;
|
|
|
|
export default PostsDaily;
|