content: import React from 'react';
  import propTypes from 'prop-types';
  import { connect } from 'react-redux';
  import Helmet from 'react-helmet';
  import { FormattedMessage } from 'react-intl';
  
  // Import Style
  import styles from '../../components/PostListItem/PostListItem.css';
  
  // Import Actions
  import { fetchPost } from '../../PostActions';
  
  // Import Selectors
  import { getPost } from '../../PostReducer';
  
  export function PostDetailPage(props) {
    return (
      <div>
        <Helmet title={props.post.title} />
        <div className={`${styles['single-post']} ${styles['post-detail']}`}>
          <h3 className={styles['post-title']}>{props.post.title}</h3>
          <p className={styles['author-name']}><FormattedMessage id="by" /> {props.post.name}</p>
          <p className={styles['post-desc']}>{props.post.content}</p>
        </div>
      </div>
    );
  }
  
  // Actions required to provide data for this component to render in sever side.
  PostDetailPage.need = [params => {
    return fetchPost(params.cuid);
  }];
  
  // Retrieve data from store as props
  function mapStateToProps(state, props) {
    return {
      post: getPost(state, props.params.cuid),
    };
  }
  
  PostDetailPage.propTypes = {
    post: propTypes.shape({
      name: propTypes.string.isRequired,
      title: propTypes.string.isRequired,
      content: propTypes.string.isRequired,
      slug: propTypes.string.isRequired,
      cuid: propTypes.string.isRequired,
    }).isRequired,
  };
  
  export default connect(mapStateToProps)(PostDetailPage);
  