text: import React from 'react';
  import { connect } from 'react-redux';
  import { Link } from 'react-router-dom';
  import PropTypes from 'prop-types';
  import PostItem from '../posts/PostItem';
  import CommentForm from './CommentForm';
  import CommentFeed from './CommentFeed';
  import Spinner from '../common/Spinner';
  import { getPost } from "../../actions/postActions";
  
  class Post extends React.Component{
  
      componentDidMount() {
          this.props.getPost(this.props.match.params.id);
      }
  
      render() {
          const { post, loading } = this.props.post;
  
          let postContent;
  
          if(post === null || loading || Object.keys(post).length === 0) {
              postContent = <Spinner />
          } else {
              postContent = (
                  <div>
                      <PostItem post={post} showActions={false}/>
                      <CommentForm postId={post._id}/>
                      <CommentFeed postId={post._id} comments={post.comments} />
                  </div>
              )
          }
  
          return (
              <div className="post">
                  <div className="container">
                      <div className="row">
                          <div className="col-md-12">
                              <Link to="/feed" className="btn btn-light mb-3">
                                  Back To Feed
                              </Link>
                              {postContent}
                          </div>
                      </div>
                  </div>
              </div>
          )
      }
  
  }
  
  Post.propTypes = {
      getPost: PropTypes.func.isRequired,
      post: PropTypes.object.isRequired
  };
  
  const mapStateToProps = (state) => ({
      post: state.post
  });
  
  export default connect(mapStateToProps, { getPost })(Post);
  