content: // @flow
  
  import React from 'react';
  import { Container } from 'reactstrap';
  
  import config from '../../config';
  
  import CommentsComponent from '../Comments';
  
  import type { Post, User } from '../WP-API-types.js';
  
  import styles from '../styles';
  
  type State = {
    post: ?Post,
    user: ?User,
  };
  
  type Props = {
    match: {
      params: {
        slug: string,
      },
    },
  };
  
  class PostComponent extends React.Component<Props, State> {
    constructor() {
      super();
      this.state = {
        post: null,
        user: null,
      };
    }
  
    componentDidMount() {
      const slug: string = this.props.match.params.slug;
  
      fetch(`${config.API_URLS.v2}/posts?slug=${slug}`)
        .then(response => response.json())
        .then((posts: Post[]) => {
          const post = posts[0];
  
          this.setState({ post });
  
          return fetch(`${config.API_URLS.v2}/users/${post.author}`);
        })
        .then(response => response.json())
        .then((user: User) => {
          this.setState({ user });
        })
        .catch((e: Error) =>
          console.error(`Failed to recover post data: ${e.message}`)
        );
    }
  
    render() {
      const post: ?Post = this.state.post;
      const user: ?User = this.state.user;
  
      return (
        post &&
        user &&
        <Container>
          <header style={styles.marginTopHuge}>
            <div className="text-muted">
              {post.date} by {user.name}
            </div>
            <h1>
              {post.title.rendered}
            </h1>
          </header>
          <div
            style={styles.marginTopBig}
            dangerouslySetInnerHTML={{
              __html: post.content.rendered,
            }}
          />
          <footer style={styles.marginTopHuge}>
            <CommentsComponent postId={post.id} postTitle={post.title} />
          </footer>
        </Container>
      );
    }
  }
  
  export default PostComponent;
  