text: import React, {Component} from 'react';
  import {connect} from 'react-redux';
  import {fetchPost, deletePost} from "../actions";
  import {Link} from 'react-router-dom';
  
  class PostsShow extends Component {
      componentWillMount() {
          const {id} = this.props.match.params;
          this.props.fetchPost(id);
      }
  
      onDeleteClick() {
          const {id} = this.props.match.params;
          this.props.deletePost(id, () => {
              this.props.history.push('/');
          });
      }
  
      render() {
          const {post} = this.props;
  
          if(!post) {
              return <div>Loading...</div>
          }
  
          return (
              <div>
                  <Link to={"/"} className={'btn btn-success'}>Back To Index</Link>
  
                  <button
                      className={"btn btn-danger pull-xs-right"}
                      onClick={this.onDeleteClick.bind(this)}
                      >
                      Delete Post
                  </button>
                  <p></p>
                  <h3>{post.title}</h3>
                  <h6>Categories: {post.categories}</h6>
                  <p>{post.content}</p>
              </div>
          );
      }
  }
  
  function mapStateToProps({posts}, ownProps) {
      return {post: posts[ownProps.match.params.id]};
  }
  
  
  export default connect(mapStateToProps, {fetchPost, deletePost})(PostsShow);