ArticleScreen

ArticleScreen.js

import React, { Component } from 'react';

import { Container } from 'reactstrap';

import { fetchArticle } from '../api';
import ArticleFull from '../components/ArticleFull';

class ArticleScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      article: null
    };
  }
  componentDidMount() {
    const { uuid } = this.props.match.params;
    this.loadArticle(uuid);
  }

  render() {
    const { error, errorMessage, article } = this.state;

    return (
      <Container>
        {error && <h2>{errorMessage}</h2>}
        {article && <ArticleFull article={article} />}
      </Container>
    );
  }

  loadArticle = uuid => {
    fetchArticle(uuid)
      .then(response => {
        const body = response.body;
        const article = body.data;
        this.setState({
          error: false,
          article: article
        });
      })
      .catch(error => {
        this.setState({
          error: true,
          errorMessage: `Error fetching article: '${error.message}'`
        });
      });
  };
}

export default ArticleScreen;