Simple react component to produce a list of Articles from a medium user account.

Articles.jsx

/**********
Articles.jsx
---------------
Simple react component to produce a list of Articles from a medium user account.
---------------
Requires you to develop an Article component.
**********/

import style from './style.scss'
import helpers from '/helpers';

import ArticlesModel from '/models/ArticlesModel';
import Article from '/components/Article';

class Articles extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      isArticleActive: false
    };

    this.articles = new ArticlesModel(new Array(), '@mediumUser')
  }

  // Download articles
  componentWillMount = async () => {
    var articles = await this.articles.getArticles().then((res) => {
      return res;
    });

    if (articles.length == 0 || (articles[0] && new Date().getTime() - articles[0].fetchedAt > 900000)) //reload every 15 minutes
      articles = await this.articles.fetchArticles().then((res) => {
        this.articles.setArticles(res);
        return res
      }).catch(() => {return new Array()});

    this.setState({articles: articles})
  }

  // Build articles rows. Rows contains alternatively 2 or 3 articles.
  buildArticleRows(articles) {
    var articleRows = new Array();
    var lateFactor = 0;
    var i = 0;

    while(articles[i] && i <= (this.props.limit || 10)) {
      // Row with 3 articles
      if (i % 3 == 0 && (i + 1) % 2 == 0 && i % 5 != 0)
        articleRows.push(
          <div key={i} className={`articles`}>{articles[i - lateFactor]}{articles[i - lateFactor + 1]}{articles[i - lateFactor + 2]}</div>
        )

      // Row with 2 articles
      else if (i % 3 == 0 && (i + 1) % 2 != 0) {
        articleRows.push(
          <div key={i} className={`articles`}>{articles[i - lateFactor]}{articles[i - lateFactor + 1]}</div>
        )
        // 3 - 2... Hm... OMG, We forgot one article!
        lateFactor++;
      }

      i++;
    }

    return articleRows
  }

  onArticleActive() {
    this.setState({isArticleActive: true})
  }

  onArticleInactive() {
    this.setState({isArticleActive: false})
  }

  renderArticles(articles) {
    if (articles && articles.length > 0) {
      articles = articles.map((article, index) => (
        <Article onMouseOver={this.onArticleActive.bind(this)}
                 onMouseLeave={this.onArticleInactive.bind(this)}
                 key={index}
                 article={article} />
      ));

      return this.buildArticleRows(articles);
    }
    else return [];
  }

  render() {
    const articles = this.renderArticles(this.state.articles);

    return (
      <div className={`articles-wrapper ${this.state.isArticleActive ? `active` : ``}`}>
        {articles}
        <style dangerouslySetInnerHTML={{ __html: style }} />
      </div>
    );
  }
}

export default Articles