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 {
    constructor(props){
        super(props)
        //this.onDeleteClick = this.onDeleteClick.bind(this);
    }
  
    componentDidMount () {
      if(!this.props.post) {
        const {id} = this.props.match.params;
        this.props.fetchPost(id);
      }
    }
  
    onDeleteClick(event){
        const {id} = this.props.match.params;
        console.log(event);
      this.props.deletePost(id, () => {
        this.props.history.push('/');
      });
    }
  
    render() {
      const {post} = this.props;
  
      if(!post) {
        return <div>Loading... </div>
      }
      return (
        <div>
          <Link className='' to='/'>
            Back To Index
          </Link>
          <button
            className='btn btn-danger pull-xs-right'
            onClick={this.onDeleteClick.bind(this)}>
            Delete Post
          </button>
           <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);
  