class PostsLazyScroll extends Component {
 
  constructor(props) {
    super(props);
    this.loadPosts = this.loadPosts.bind(this);
  }
 
  loadPosts() {
    const {skip, limit} = this.props.postEntity;
    this.props.postsActions.fetchPosts(skip, limit);
  }
 
  render() {
    const {posts, isFetching, errorMessage, hasMore} = this.props.postEntity;
    return (
      <div className="container posts-lazy-scroll">
        <ReduxLazyScroll
          isFetching={isFetching}
          errorMessage={errorMessage}
          loadMore={this.loadPosts}
          hasMore={hasMore}
        >
          {posts.map(post => (
            <Post
              key={post._id}
              post={post}
            />
            ))
          }
        </ReduxLazyScroll>
        <div className="row posts-lazy-scroll__messages">
          {isFetching && <div className="alert alert-info"> Loading more posts... </div>}
 
          {!hasMore && !errorMessage &&
            <div className="alert alert-success">All the posts has been loaded successfully.</div>
          }
 
          {errorMessage && <div className="alert alert-danger">{errorMessage}</div>}
        </div>
      </div>
    );
  }
}