Home screen

HomeScreen.js

import React, { Component } from 'react';

import { Container, Row, Col } from 'reactstrap';

import { fetchArticles } from '../api';
import ArticleList from '../components/ArticleList';
import SimplePager from '../components/SimplePager';

class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      articles: null,
      page: 1,
      more: false
    };
  }

  componentDidMount() {
    this.loadArticles();
  }

  render() {
    const { page, more, error, errorMessage, articles } = this.state;

    return (
      <Container>
        <Row>
          <Col>
            {error && <h2>{errorMessage}</h2>}
            {articles && (
              <div>
                <SimplePager
                  page={page}
                  hasNext={more}
                  onChange={this.handlePagerChange}
                />
                <ArticleList articles={articles} />
                <SimplePager
                  page={page}
                  hasNext={more}
                  onChange={this.handlePagerChange}
                />
              </div>
            )}
          </Col>
        </Row>
      </Container>
    );
  }

  loadArticles = () => {
    const { page } = this.state;
    fetchArticles(page)
      .then(response => {
        const body = response.body;
        const articles = body.data;
        const more = body.links.hasOwnProperty('next');
        this.setState({
          error: false,
          articles: articles,
          more: more
        });
        window.scrollTo(0, 0);
      })
      .catch(error => {
        this.setState({
          error: true,
          errorMessage: `Error fetching articles: '${error.message}'`
        });
      });
  };

  handlePagerChange = newPage => {
    this.setState(
      {
        page: newPage
      },
      this.loadArticles
    );
  };
}

export default HomeScreen;