import React from 'react';

class ArticleList extends Component {
  constructor(props) {
    super(props);
  }

  renderArticles = () => {
    const { articles } = this.props;
    return articles.map((a) => {
      const {type} = a;
      if (type === 'FullArticle') {
        return (<FullArticle article={a} />)
      } else if (type === 'BreakingNews') {
        return (<BreakingNews article={a} />);
      } else if (type === 'HealthArticle') {
        return (<HealthArticle article={a} />)
      }
      return (<DefaultArticle article={a} />);
    });
  }

  render() {
    return (
      <div id="articles-list">
        { this.renderArticles() }
        {<ArticleListSideBar />}
      </div>
    );
  }
}

ArticleList.propTypes = {
  articles: PropTypes.arrayOf(PropTypes.articles),
};

export default ArticleList;