project done

client/src/components/post/CommentItem.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import formatDate from '../../utils/formatDate';
+import { deleteComment } from '../../actions/post';
+
+const CommentItem = ({
+  postId,
+  comment: { _id, text, name, avatar, user, date },
+  auth,
+  deleteComment
+}) => (
+  <div className="post bg-white p-1 my-1">
+    <div>
+      <Link to={`/profile/${user}`}>
+        <img className="round-img" src={avatar} alt="" />
+        <h4>{name}</h4>
+      </Link>
+    </div>
+    <div>
+      <p className="my-1">{text}</p>
+      <p className="post-date">Posted on {formatDate(date)}</p>
+      {!auth.loading && user === auth.user._id && (
+        <button
+          onClick={() => deleteComment(postId, _id)}
+          type="button"
+          className="btn btn-danger"
+        >
+          <i className="fas fa-times" />
+        </button>
+      )}
+    </div>
+  </div>
+);
+
+CommentItem.propTypes = {
+  postId: PropTypes.string.isRequired,
+  comment: PropTypes.object.isRequired,
+  auth: PropTypes.object.isRequired,
+  deleteComment: PropTypes.func.isRequired
+};
+
+const mapStateToProps = (state) => ({
+  auth: state.auth
+});
+
+export default connect(mapStateToProps, { deleteComment })(CommentItem);