From 48b8e58de6b6e7d6d0a0ea78c7e72ca3f868dc4f Mon Sep 17 00:00:00 2001
From: sleepymoonlight <lyinginmysky@gmail.com>
Date: Tue, 11 Aug 2020 23:34:12 +0300
Subject: [PATCH 01/10] Add commentSchema to server

---
 server/models/comment.js | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 server/models/comment.js

diff --git a/server/models/comment.js b/server/models/comment.js
new file mode 100644
index 000000000..0ec510ad4
--- /dev/null
+++ b/server/models/comment.js
@@ -0,0 +1,11 @@
+import mongoose from 'mongoose';
+const Schema = mongoose.Schema;
+
+const commentSchema = new Schema({
+  content: { type: 'String', required: true },
+  postId: { type: 'String' },
+  createdBy: { type: 'String', required: true },
+  dateAdded: { type: 'Date', default: Date.now, required: true },
+});
+
+export default mongoose.model('Comment', commentSchema);

From 93ae4b093c4aab089b74123143f1a43271e001cc Mon Sep 17 00:00:00 2001
From: sleepymoonlight <lyinginmysky@gmail.com>
Date: Tue, 11 Aug 2020 23:38:03 +0300
Subject: [PATCH 02/10] Add comment controllers to server(partly)

---
 server/controllers/comment.controller.js | 82 ++++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 server/controllers/comment.controller.js

diff --git a/server/controllers/comment.controller.js b/server/controllers/comment.controller.js
new file mode 100644
index 000000000..08c86be5e
--- /dev/null
+++ b/server/controllers/comment.controller.js
@@ -0,0 +1,82 @@
+import sanitizeHtml from 'sanitize-html';
+
+import Comment from '../models/comment';
+
+/**
+ * Get all comments for some post
+ * @param req
+ * @param res
+ * @returns void
+ */
+export const getComments = (req, res) => {
+  Comment.find({ postId: req.params.id })
+    .exec((err, comments) => {
+      if (err) {
+        res.status(500)
+          .send(err);
+      }
+      res.json({ comments });
+    });
+};
+
+/**
+ * Save a comment
+ * @param req
+ * @param res
+ * @returns void
+ */
+export const addComment = (req, res) => {
+  if (!req.body.comment || !req.body.comment.content || !req.body.comment.createdBy) {
+    res.status(403).send();
+  }
+  const newComment = new Comment(req.body.comment);
+
+  newComment.content = sanitizeHtml(newComment.content);
+  newComment.createdBy = sanitizeHtml(newComment.createdBy);
+  newComment.postId = req.params.id;
+
+  newComment.save((error, saved) => {
+    if (error) {
+      res.status(500).send(error);
+    }
+    res.json({ comment: saved });
+  });
+};
+
+/**
+ * Get a single comment
+ * @param req
+ * @param res
+ * @returns void
+ */
+export const getComment = (req, res) => {
+  Comment.findOne({ postId: req.params.id })
+    .exec((err, comment) => {
+      if (err) {
+        res.status(500)
+          .send(err);
+      }
+      res.json({ comment });
+    });
+};
+
+/**
+ * Delete a post
+ * @param req
+ * @param res
+ * @returns void
+ */
+export function deleteComment(req, res) {
+  Comment.findOne({ postId: req.params.id })
+    .exec((err, comment) => {
+      if (err || !comment) {
+        res.status(500)
+          .send(err);
+      }
+
+      comment.remove(() => {
+        res.status(200)
+          .end();
+      });
+    });
+}

From a42c0e3813708c463825d494df3cef06b0c31a20 Mon Sep 17 00:00:00 2001
From: sleepymoonlight <lyinginmysky@gmail.com>
Date: Tue, 11 Aug 2020 23:39:36 +0300
Subject: [PATCH 03/10] Add comment routes and use it in server

---
 server/routes/comment.routes.js | 17 +++++++++++++++++
 server/server.js                |  3 +++
 2 files changed, 20 insertions(+)
 create mode 100644 server/routes/comment.routes.js

diff --git a/server/routes/comment.routes.js b/server/routes/comment.routes.js
new file mode 100644
index 000000000..885374fef
--- /dev/null
+++ b/server/routes/comment.routes.js
@@ -0,0 +1,17 @@
+import { Router } from 'express';
+import * as CommentController from '../controllers/comment.controller';
+const router = new Router();
+
+// Get all Comments for current post
+router.route('/posts/:id/comments').get(CommentController.getComments);
+
+// Add a new Comment
+router.route('/posts/:id/comment').post(CommentController.addComment);
+
+// Get one Comment
+router.route('/comment/:id').get(CommentController.getComment);
+
+// Delete a Comment
+router.route('/comment/:id').delete(CommentController.deleteComment);
+
+export default router;
diff --git a/server/server.js b/server/server.js
index 382249c91..34f1b613a 100644
--- a/server/server.js
+++ b/server/server.js
@@ -46,6 +46,7 @@ import Helmet from 'react-helmet';
 import routes from '../client/routes';
 import { fetchComponentData } from './util/fetchData';
 import posts from './routes/post.routes';
+import comments from './routes/comment.routes';
 import dummyData from './dummyData';
 import serverConfig from './config';
 
@@ -71,6 +72,8 @@ app.use(bodyParser.json({ limit: '20mb' }));
 app.use(bodyParser.urlencoded({ limit: '20mb', extended: false }));
 app.use(Express.static(path.resolve(__dirname, '../dist/client')));
 app.use('/api', posts);
+app.use('/api', comments);
+
 
 // Render Initial HTML
 const renderFullPage = (html, initialState) => {

From 53a0390d0c3e6be4333e7c86a8cc8969805dc107 Mon Sep 17 00:00:00 2001
From: sleepymoonlight <lyinginmysky@gmail.com>
Date: Tue, 11 Aug 2020 23:41:40 +0300
Subject: [PATCH 04/10] upgrade react version

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index f0fa1f581..38e382cc0 100644
--- a/package.json
+++ b/package.json
@@ -43,8 +43,8 @@
     "limax": "^1.3.0",
     "mongoose": "^4.4.20",
     "prop-types": "^15.6.2",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
+    "react": "16.7.0-alpha.0",
+    "react-dom": "16.7.0-alpha.0",
     "react-helmet": "^5.2.0",
     "react-intl": "^2.1.2",
     "react-redux": "^4.4.5",

From e78be3e9159495e22a8ad08ed3fe448109630dd3 Mon Sep 17 00:00:00 2001
From: sleepymoonlight <lyinginmysky@gmail.com>
Date: Tue, 11 Aug 2020 23:45:54 +0300
Subject: [PATCH 05/10] create getAll and add comment actions and reducer

---
 client/modules/Comment/CommentActions.js | 40 ++++++++++++++++++++++++
 client/modules/Comment/CommentReducer.js | 24 ++++++++++++++
 client/reducers.js                       |  2 ++
 3 files changed, 66 insertions(+)
 create mode 100644 client/modules/Comment/CommentActions.js
 create mode 100644 client/modules/Comment/CommentReducer.js

diff --git a/client/modules/Comment/CommentActions.js b/client/modules/Comment/CommentActions.js
new file mode 100644
index 000000000..bf35eef14
--- /dev/null
+++ b/client/modules/Comment/CommentActions.js
@@ -0,0 +1,40 @@
+import callApi from '../../util/apiCaller';
+
+// Export Constants
+export const GET_COMMENTS = 'GET_COMMENTS';
+export const ADD_COMMENT = 'ADD_COMMENT';
+
+// Export Actions
+
+export function getComments(comments) {
+  return {
+    type: GET_COMMENTS,
+    comments,
+  };
+}
+
+export function fetchComments(id) {
+  return (dispatch) => {
+    return callApi(`/posts/${id}/comments`).then(res => {
+      dispatch(getComments(res.comments));
+    });
+  };
+}
+
+export function addComment(comment) {
+  return {
+    type: ADD_COMMENT,
+    comment,
+  };
+}
+
+export function addCommentRequest(comment, id) {
+  return (dispatch) => {
+    return callApi(`posts/${id}/comment`, 'post', {
+      comment: {
+        content: comment.content,
+        createdBy: comment.createdBy,
+      },
+    }).then(res => dispatch(addComment(res.comment)));
+  };
+}
diff --git a/client/modules/Comment/CommentReducer.js b/client/modules/Comment/CommentReducer.js
new file mode 100644
index 000000000..20d3ed305
--- /dev/null
+++ b/client/modules/Comment/CommentReducer.js
@@ -0,0 +1,24 @@
+import { GET_COMMENTS, ADD_COMMENT } from './CommentActions';
+
+// Initial State
+const initialState = { comments: [] };
+
+const CommentReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case GET_COMMENTS :
+      return {
+        comments: [action.comments, ...state.comments],
+      };
+
+    case ADD_COMMENT :
+      return {
+        comments: [action.comment, ...state.comments],
+      };
+
+    default:
+      return state;
+  }
+};
+
+// Export Reducer
+export default CommentReducer;
diff --git a/client/reducers.js b/client/reducers.js
index 2aa143142..9aadfe79d 100644
--- a/client/reducers.js
+++ b/client/reducers.js
@@ -7,10 +7,12 @@ import { combineReducers } from 'redux';
 import app from './modules/App/AppReducer';
 import posts from './modules/Post/PostReducer';
 import intl from './modules/Intl/IntlReducer';
+import comments from './modules/Comment/CommentReducer';
 
 // Combine all reducers into one root reducer
 export default combineReducers({
   app,
   posts,
   intl,
+  comments,
 });

From 734019675f2114206b12ee7d88129b0eefdd39ab Mon Sep 17 00:00:00 2001
From: sleepymoonlight <lyinginmysky@gmail.com>
Date: Tue, 11 Aug 2020 23:48:42 +0300
Subject: [PATCH 06/10] add comment components and use it with add and getAll
 actions

---
 .../CommentCreateWidget.css                   | 55 +++++++++++++
 .../CommentCreateWidget.js                    | 49 +++++++++++
 .../CommentListItem/CommentListItem.css       | 81 +++++++++++++++++++
 .../CommentListItem/CommentListItem.js        | 80 ++++++++++++++++++
 .../Comment/components/CommentsList.js        | 30 +++++++
 client/modules/Post/components/PostList.js    |  9 +++
 .../components/PostListItem/PostListItem.css  | 24 ++++++
 .../components/PostListItem/PostListItem.js   | 65 +++++++++++++--
 .../Post/pages/PostListPage/PostListPage.js   | 22 ++++-
 9 files changed, 408 insertions(+), 7 deletions(-)
 create mode 100644 client/modules/Comment/components/CommentCreateWidget/CommentCreateWidget.css
 create mode 100644 client/modules/Comment/components/CommentCreateWidget/CommentCreateWidget.js
 create mode 100644 client/modules/Comment/components/CommentListItem/CommentListItem.css
 create mode 100644 client/modules/Comment/components/CommentListItem/CommentListItem.js
 create mode 100644 client/modules/Comment/components/CommentsList.js

diff --git a/client/modules/Comment/components/CommentCreateWidget/CommentCreateWidget.css b/client/modules/Comment/components/CommentCreateWidget/CommentCreateWidget.css
new file mode 100644
index 000000000..7d6c370ff
--- /dev/null
+++ b/client/modules/Comment/components/CommentCreateWidget/CommentCreateWidget.css
@@ -0,0 +1,55 @@
+.form {
+  display: block;
+  background: #FAFAFA;
+  padding: 32px 0;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+
+.form-content{
+  width: 100%;
+  margin: auto;
+  font-size: 14px;
+}
+
+.form-title{
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 16px;
+  color: #757575;
+}
+
+.form-field{
+  width: 100%;
+  margin-bottom: 12px;
+  font-family: 'Lato', sans-serif;
+  font-size: 13px;
+  line-height: normal;
+  padding: 6px 10px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  outline: none;
+  color: #212121;
+}
+
+.form-field-large {
+  min-height: 120px;
+}
+
+.comment-button {
+  display: inline-block;
+  padding: 6px 10px;
+  margin-left: 10px;
+  font-size: 14px;
+  color: #FFF;
+  text-decoration: none;
+  border-radius: 4px;
+}
+
+.comment-submit-button {
+  background: #03A9F4;
+}
+
+.comment-cancel-button {
+  background: #9a533c;
+}
diff --git a/client/modules/Comment/components/CommentCreateWidget/CommentCreateWidget.js b/client/modules/Comment/components/CommentCreateWidget/CommentCreateWidget.js
new file mode 100644
index 000000000..db886b959
--- /dev/null
+++ b/client/modules/Comment/components/CommentCreateWidget/CommentCreateWidget.js
@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+// Import Style
+import styles from './CommentCreateWidget.css';
+
+const CommentCreateWidget = ({ addComment, closeForm }) => {
+  const [authorName, changeAuthor] = useState('');
+  const [content, changeContent] = useState('');
+
+  const addNewComment = () => {
+    addComment(authorName, content);
+    closeForm();
+  };
+
+  return (
+    <div className={styles.form}>
+      <div className={styles['form-content']}>
+        <h2 className={styles['form-title']}><FormattedMessage id="createNewComment" /></h2>
+        <input placeholder="Author Name" className={styles['form-field']} value={authorName} onChange={e => changeAuthor(e.target.value)} />
+        <textarea placeholder="Content" className={`${styles['form-field']} ${styles['form-field-large']}`} value={content} onChange={e => changeContent(e.target.value)} />
+        <div className={styles['comment-actions']}>
+          <a
+            className={`${styles['comment-button']} ${styles['comment-cancel-button']}`}
+            href="#"
+            onClick={() => closeForm()}
+          >
+            <FormattedMessage id="cancel" />
+          </a>
+          <a
+            className={`${styles['comment-button']} ${styles['comment-submit-button']}`}
+            href="#"
+            onClick={() => addNewComment()}
+          >
+            <FormattedMessage id="submit" />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+CommentCreateWidget.propTypes = {
+  addComment: PropTypes.func.isRequired,
+  closeForm: PropTypes.func.isRequired,
+};
+
+export default CommentCreateWidget;
diff --git a/client/modules/Comment/components/CommentListItem/CommentListItem.css b/client/modules/Comment/components/CommentListItem/CommentListItem.css
new file mode 100644
index 000000000..a6ef8f005
--- /dev/null
+++ b/client/modules/Comment/components/CommentListItem/CommentListItem.css
@@ -0,0 +1,81 @@
+.single-comment {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin: 20px 0;
+  padding: 10px 25px;
+  border-radius: 2px;
+  color: #757575;
+}
+
+.single-comment div {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.comment-date {
+  font-size: 16px;
+}
+
+.author-name {
+  font-size: 16px;
+  margin-bottom: 16px;
+}
+
+.form-field{
+  width: 100%;
+  min-height: 120px;
+  margin-bottom: 12px;
+  font-family: 'Lato', sans-serif;
+  font-size: 13px;
+  line-height: normal;
+  padding: 6px 10px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  outline: none;
+  color: #212121;
+}
+
+.comment-button {
+  display: inline-block;
+  padding: 6px 10px;
+  font-size: 14px;
+  color: #FFF;
+  text-decoration: none;
+  border-radius: 4px;
+}
+
+.comment-submit-button {
+  background: #03A9F4;
+}
+
+.comment-cancel-button {
+  background: #9a533c;
+}
+
+.comment-desc {
+  font-size: 14px;
+  color: #888;
+  margin-bottom: 8px;
+}
+
+.post-actions {
+  display: flex;
+  justify-content: space-between;
+}
+
+.comment-action a{
+  color: #555;
+  text-decoration: none;
+  font-size: 14px;
+  font-style: italic;
+}
+
+.comment-delete a:hover{
+  color: #EF5350;
+}
+
+.comment-edit a:hover{
+  color: #4db258;
+}
diff --git a/client/modules/Comment/components/CommentListItem/CommentListItem.js b/client/modules/Comment/components/CommentListItem/CommentListItem.js
new file mode 100644
index 000000000..2732902e8
--- /dev/null
+++ b/client/modules/Comment/components/CommentListItem/CommentListItem.js
@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+// Import Style
+import styles from './CommentListItem.css';
+
+const CommentListItem = props => {
+  const [isEdited, editComment] = useState(false);
+  const [comment, changeValue] = useState(props.comment.content);
+
+  const editCurrentComment = () => {
+    editComment(true);
+  };
+
+  return (
+    <div className={styles['single-comment']}>
+      <div>
+        <p className={styles['comment-date']}>{props.comment.dateAdded}</p>
+        <p className={styles['author-name']}>By {props.comment.createdBy}</p>
+      </div>
+      {
+        isEdited
+          ? (
+          <React.Fragment>
+            <textarea
+              className={styles['form-field']}
+              value={comment}
+              onChange={e => changeValue(e.target.value)}
+            />
+            <div className={styles['comment-actions']}>
+              <a
+                className={`${styles['comment-button']} ${styles['comment-cancel-button']}`}
+                href="#"
+                onClick={() => editComment(false)}
+              >
+                <FormattedMessage id="cancel" />
+              </a>
+              <a
+                className={`${styles['comment-button']} ${styles['comment-submit-button']}`}
+                href="#"
+                onClick={() => {}}
+              >
+                <FormattedMessage id="submit" />
+              </a>
+            </div>
+          </React.Fragment>
+          )
+        : (
+          <React.Fragment>
+            <p className={styles['comment-desc']}>{props.comment.content}</p>
+            <div className={styles['comment-actions']}>
+              <p className={`${styles['comment-action']} ${styles['comment-delete']}`}>
+                <a href="#" onClick={props.onDelete}>
+                  <FormattedMessage id="deleteComment" />
+                </a>
+              </p>
+              <p className={`${styles['comment-action']} ${styles['comment-edit']}`}>
+                <a href="#" onClick={() => editCurrentComment()}>
+                  <FormattedMessage id="editComment" />
+                </a>
+              </p>
+            </div>
+          </React.Fragment>
+          )
+      }
+    </div>
+  );
+};
+
+CommentListItem.propTypes = {
+  comment: PropTypes.shape({
+    content: PropTypes.string.isRequired,
+    createdBy: PropTypes.string.isRequired,
+    dateAdded: PropTypes.string.isRequired,
+  }).isRequired,
+  onDelete: PropTypes.func.isRequired,
+};
+
+export default CommentListItem;
diff --git a/client/modules/Comment/components/CommentsList.js b/client/modules/Comment/components/CommentsList.js
new file mode 100644
index 000000000..cf18483ec
--- /dev/null
+++ b/client/modules/Comment/components/CommentsList.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// Import Components
+import CommentListItem from './CommentListItem/CommentListItem';
+
+const CommentsList = props => {
+  return (
+    <div className="listView">
+      {
+        props.comments.map(comment => (
+          <CommentListItem
+            comment={comment}
+            key={comment.postId}
+            onDelete={() => {}}
+          />
+        ))
+      }
+    </div>
+  );
+};
+
+CommentsList.propTypes = {
+  comments: PropTypes.arrayOf(PropTypes.shape({
+    content: PropTypes.string.isRequired,
+    createdBy: PropTypes.string.isRequired,
+  })).isRequired,
+};
+
+export default CommentsList;
diff --git a/client/modules/Post/components/PostList.js b/client/modules/Post/components/PostList.js
index 6719b3124..15f740736 100644
--- a/client/modules/Post/components/PostList.js
+++ b/client/modules/Post/components/PostList.js
@@ -13,6 +13,9 @@ function PostList(props) {
             post={post}
             key={post.cuid}
             onDelete={() => props.handleDeletePost(post.cuid)}
+            handleAddComment={(authorName, content, id) => props.handleAddComment(authorName, content, id)}
+            handleFetchComments={id => props.handleFetchComments(id)}
+            comments={props.comments.filter(el => el.postId === post.cuid)}
           />
         ))
       }
@@ -28,7 +31,13 @@ PostList.propTypes = {
     slug: PropTypes.string.isRequired,
     cuid: PropTypes.string.isRequired,
   })).isRequired,
+  comments: PropTypes.arrayOf(PropTypes.shape({
+    content: PropTypes.string.isRequired,
+    createdBy: PropTypes.string.isRequired,
+  })),
   handleDeletePost: PropTypes.func.isRequired,
+  handleAddComment: PropTypes.func.isRequired,
+  handleFetchComments: PropTypes.func.isRequired,
 };
 
 export default PostList;
diff --git a/client/modules/Post/components/PostListItem/PostListItem.css b/client/modules/Post/components/PostListItem/PostListItem.css
index 49b3345f2..80f5a551e 100644
--- a/client/modules/Post/components/PostListItem/PostListItem.css
+++ b/client/modules/Post/components/PostListItem/PostListItem.css
@@ -16,6 +16,21 @@
   color: #616161;
 }
 
+.post-main-line {
+  display: flex;
+  justify-content: space-between;
+}
+
+.comment-create-button {
+  height: fit-content;
+  padding: 5px 10px;
+  font-size: 12px;
+  color: #FFF;
+  background: #03A9F4;
+  text-decoration: none;
+  border-radius: 4px;
+}
+
 .author-name{
   font-size: 16px;
   margin-bottom: 16px;
@@ -28,6 +43,11 @@
   margin-bottom: 8px;
 }
 
+.post-actions {
+  display: flex;
+  justify-content: space-between;
+}
+
 .post-action a{
   color: #555;
   text-decoration: none;
@@ -36,6 +56,10 @@
 }
 
 .post-action a:hover{
+  color: #03A9F4;
+}
+
+.post-delete a:hover{
   color: #EF5350;
 }
 
diff --git a/client/modules/Post/components/PostListItem/PostListItem.js b/client/modules/Post/components/PostListItem/PostListItem.js
index 2925e2199..2952a7769 100644
--- a/client/modules/Post/components/PostListItem/PostListItem.js
+++ b/client/modules/Post/components/PostListItem/PostListItem.js
@@ -1,26 +1,73 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router';
 import { FormattedMessage } from 'react-intl';
 
+import CommentsList from '../../../Comment/components/CommentsList';
+
 // Import Style
 import styles from './PostListItem.css';
+import CommentCreateWidget from '../../../Comment/components/CommentCreateWidget/CommentCreateWidget';
+
+const PostListItem = props => {
+  const [openedCommentId, openComments] = useState(null);
+  const [isCommentAddingFormOpen, openCommentsForm] = useState(false);
+
+  const showComments = id => {
+    props.handleFetchComments(id);
+
+    if (openedCommentId === id) {
+      openComments(null);
+    } else {
+      openComments(id);
+    }
+  };
 
-function PostListItem(props) {
   return (
     <div className={styles['single-post']}>
       <h3 className={styles['post-title']}>
-        <Link to={`/posts/${props.post.slug}-${props.post.cuid}`} >
+        <Link to={`/posts/${props.post.slug}-${props.post.cuid}`}>
           {props.post.title}
         </Link>
       </h3>
-      <p className={styles['author-name']}><FormattedMessage id="by" /> {props.post.name}</p>
+      <div className={styles['post-main-line']}>
+        <p className={styles['author-name']}>
+          <FormattedMessage id="by" /> {props.post.name}
+        </p>
+        <a
+          className={styles['comment-create-button']}
+          href="#"
+          onClick={() => openCommentsForm(true)}
+        >
+          <FormattedMessage id="createNewComment" />
+        </a>
+      </div>
       <p className={styles['post-desc']}>{props.post.content}</p>
-      <p className={styles['post-action']}><a href="#" onClick={props.onDelete}><FormattedMessage id="deletePost" /></a></p>
+      <div className={styles['post-actions']}>
+        <p className={`${styles['post-action']} ${styles['post-delete']}`}>
+          <a href="#" onClick={props.onDelete}>
+            <FormattedMessage id="deletePost" />
+          </a>
+        </p>
+        <p className={styles['post-action']}>
+          <a href="#" onClick={() => showComments(props.post.cuid)}>
+            <FormattedMessage id={props.post.cuid === openedCommentId ? 'hideComments' : 'showComments'} />
+          </a>
+        </p>
+      </div>
+      {
+        isCommentAddingFormOpen === true && <CommentCreateWidget
+          addComment={(authorName, content) => props.handleAddComment(authorName, content, props.post.cuid)}
+          closeForm={() => openCommentsForm(false)}
+        />
+      }
+      {
+        props.post.cuid === openedCommentId && <CommentsList comments={props.comments} />
+      }
       <hr className={styles.divider} />
     </div>
   );
-}
+};
 
 PostListItem.propTypes = {
   post: PropTypes.shape({
@@ -30,7 +77,13 @@ PostListItem.propTypes = {
     slug: PropTypes.string.isRequired,
     cuid: PropTypes.string.isRequired,
   }).isRequired,
+  comments: PropTypes.arrayOf(PropTypes.shape({
+    content: PropTypes.string.isRequired,
+    createdBy: PropTypes.string.isRequired,
+  })).isRequired,
   onDelete: PropTypes.func.isRequired,
+  handleAddComment: PropTypes.func.isRequired,
+  handleFetchComments: PropTypes.func.isRequired,
 };
 
 export default PostListItem;
diff --git a/client/modules/Post/pages/PostListPage/PostListPage.js b/client/modules/Post/pages/PostListPage/PostListPage.js
index 7c31229e6..e27ecdf89 100644
--- a/client/modules/Post/pages/PostListPage/PostListPage.js
+++ b/client/modules/Post/pages/PostListPage/PostListPage.js
@@ -8,6 +8,7 @@ import PostCreateWidget from '../../components/PostCreateWidget/PostCreateWidget
 
 // Import Actions
 import { addPostRequest, fetchPosts, deletePostRequest } from '../../PostActions';
+import { addCommentRequest, fetchComments } from '../../../Comment/CommentActions';
 import { toggleAddPost } from '../../../App/AppActions';
 
 // Import Selectors
@@ -30,11 +31,25 @@ class PostListPage extends Component {
     this.props.dispatch(addPostRequest({ name, title, content }));
   };
 
+  handleFetchComments = (id) => {
+    this.props.dispatch(fetchComments(id));
+  };
+
+  handleAddComment = (authorName, content, id) => {
+    this.props.dispatch(addCommentRequest({ createdBy: authorName, content }, id));
+  };
+
   render() {
     return (
       <div>
         <PostCreateWidget addPost={this.handleAddPost} showAddPost={this.props.showAddPost} />
-        <PostList handleDeletePost={this.handleDeletePost} posts={this.props.posts} />
+        <PostList
+          handleDeletePost={this.handleDeletePost}
+          posts={this.props.posts}
+          handleAddComment={(authorName, content, id) => this.handleAddComment(authorName, content, id)}
+          handleFetchComments={id => this.handleFetchComments(id)}
+          comments={this.props.comments}
+        />
       </div>
     );
   }
@@ -48,6 +63,7 @@ function mapStateToProps(state) {
   return {
     showAddPost: getShowAddPost(state),
     posts: getPosts(state),
+    comments: state.comments.comments,
   };
 }
 
@@ -57,6 +73,10 @@ PostListPage.propTypes = {
     title: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired,
   })).isRequired,
+  comments: PropTypes.arrayOf(PropTypes.shape({
+    content: PropTypes.string.isRequired,
+    createdBy: PropTypes.string.isRequired,
+  })).isRequired,
   showAddPost: PropTypes.bool.isRequired,
   dispatch: PropTypes.func.isRequired,
 };

From 61256bbe841d0f242463fa16c72cecbe03d2dde9 Mon Sep 17 00:00:00 2001
From: sleepymoonlight <lyinginmysky@gmail.com>
Date: Tue, 11 Aug 2020 23:49:19 +0300
Subject: [PATCH 07/10] add some en local variables

---
 Intl/localizationData/en.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/Intl/localizationData/en.js b/Intl/localizationData/en.js
index 79b481d3c..8018a7560 100644
--- a/Intl/localizationData/en.js
+++ b/Intl/localizationData/en.js
@@ -12,6 +12,12 @@ export default {
     postTitle: 'Post Title',
     postContent: 'Post Content',
     submit: 'Submit',
+    cancel: 'Cancel',
+    deleteComment: 'Delete Comment',
+    showComments: 'Show Comments',
+    hideComments: 'Hide Comments',
+    editComment: 'Edit Comment',
+    createNewComment: 'Create New Comment',
     comment: `user {name} {value, plural,
     	  =0 {does not have any comments}
     	  =1 {has # comment}

From 85f48f46006adea22737381a2a339effc85de8f5 Mon Sep 17 00:00:00 2001
From: sleepymoonlight <lyinginmysky@gmail.com>
Date: Wed, 12 Aug 2020 14:40:59 +0300
Subject: [PATCH 08/10] add edit and delete feature to server

---
 server/controllers/comment.controller.js | 37 ++++++++++++------------
 server/routes/comment.routes.js          |  6 ++--
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/server/controllers/comment.controller.js b/server/controllers/comment.controller.js
index 08c86be5e..31006192d 100644
--- a/server/controllers/comment.controller.js
+++ b/server/controllers/comment.controller.js
@@ -44,39 +44,40 @@ export const addComment = (req, res) => {
 };
 
 /**
- * Get a single comment
+ * Delete a post
  * @param req
  * @param res
  * @returns void
  */
-export const getComment = (req, res) => {
-  Comment.findOne({ postId: req.params.id })
+export function deleteComment(req, res) {
+  Comment.findOne({ _id: req.params.id })
     .exec((err, comment) => {
-      if (err) {
-        res.status(500)
-          .send(err);
+      if (err || !comment) {
+        res.status(500).send(err);
       }
-      res.json({ comment });
+
+      comment.remove(() => {
+        res.status(200).end();
+      });
     });
-};
+}
 
 /**
- * Delete a post
+ * Edit a post
  * @param req
  * @param res
  * @returns void
  */
-export function deleteComment(req, res) {
-  Comment.findOne({ postId: req.params.id })
+export function editComment(req, res) {
+  if (!req.body.content) {
+    res.status(403).send();
+  }
+
+  Comment.updateOne({ _id: req.params.id }, { content: sanitizeHtml(req.body.content) })
     .exec((err, comment) => {
       if (err || !comment) {
-        res.status(500)
-          .send(err);
+        res.status(500).send(err);
       }
-
-      comment.remove(() => {
-        res.status(200)
-          .end();
-      });
+      res.status(200).end();
     });
 }
diff --git a/server/routes/comment.routes.js b/server/routes/comment.routes.js
index 885374fef..2b5f4a31d 100644
--- a/server/routes/comment.routes.js
+++ b/server/routes/comment.routes.js
@@ -8,10 +8,10 @@ router.route('/posts/:id/comments').get(CommentController.getComments);
 // Add a new Comment
 router.route('/posts/:id/comment').post(CommentController.addComment);
 
-// Get one Comment
-router.route('/comment/:id').get(CommentController.getComment);
-
 // Delete a Comment
 router.route('/comment/:id').delete(CommentController.deleteComment);
 
+// Edit a Comment
+router.route('/comment/:id').put(CommentController.editComment);
+
 export default router;

From 435568e4a33401b7851383caad6f9aa6ac934657 Mon Sep 17 00:00:00 2001
From: sleepymoonlight <lyinginmysky@gmail.com>
Date: Wed, 12 Aug 2020 14:44:27 +0300
Subject: [PATCH 09/10] fix get reducer and add edit and delete actions and
 reducers

---
 client/modules/Comment/CommentActions.js | 30 ++++++++++++++++++++++++
 client/modules/Comment/CommentReducer.js | 26 ++++++++++++++++++--
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/client/modules/Comment/CommentActions.js b/client/modules/Comment/CommentActions.js
index bf35eef14..93a3354bc 100644
--- a/client/modules/Comment/CommentActions.js
+++ b/client/modules/Comment/CommentActions.js
@@ -3,6 +3,8 @@ import callApi from '../../util/apiCaller';
 // Export Constants
 export const GET_COMMENTS = 'GET_COMMENTS';
 export const ADD_COMMENT = 'ADD_COMMENT';
+export const DELETE_COMMENT = 'DELETE_COMMENT';
+export const EDIT_COMMENT = 'EDIT_COMMENT';
 
 // Export Actions
 
@@ -38,3 +40,31 @@ export function addCommentRequest(comment, id) {
     }).then(res => dispatch(addComment(res.comment)));
   };
 }
+
+
+export function editComment(id, content) {
+  return {
+    type: EDIT_COMMENT,
+    id,
+    content,
+  };
+}
+
+export function editCommentRequest(id, content) {
+  return (dispatch) => {
+    return callApi(`comment/${id}`, 'put', { content }).then(() => dispatch(editComment(id, content)));
+  };
+}
+
+export function deleteComment(id) {
+  return {
+    type: DELETE_COMMENT,
+    id,
+  };
+}
+
+export function deleteCommentRequest(id) {
+  return (dispatch) => {
+    return callApi(`comment/${id}`, 'delete').then(() => dispatch(deleteComment(id)));
+  };
+}
diff --git a/client/modules/Comment/CommentReducer.js b/client/modules/Comment/CommentReducer.js
index 20d3ed305..609b89c6e 100644
--- a/client/modules/Comment/CommentReducer.js
+++ b/client/modules/Comment/CommentReducer.js
@@ -1,4 +1,4 @@
-import { GET_COMMENTS, ADD_COMMENT } from './CommentActions';
+import { GET_COMMENTS, ADD_COMMENT, DELETE_COMMENT, EDIT_COMMENT } from './CommentActions';
 
 // Initial State
 const initialState = { comments: [] };
@@ -7,7 +7,7 @@ const CommentReducer = (state = initialState, action) => {
   switch (action.type) {
     case GET_COMMENTS :
       return {
-        comments: [action.comments, ...state.comments],
+        comments: action.comments,
       };
 
     case ADD_COMMENT :
@@ -15,6 +15,28 @@ const CommentReducer = (state = initialState, action) => {
         comments: [action.comment, ...state.comments],
       };
 
+    case EDIT_COMMENT :
+      return {
+        comments: state.comments.map(comment => {
+          if (comment._id === action.id) {
+            const newComment = {
+              content: action.content,
+              postId: comment.postId,
+              createdBy: comment.createdBy,
+              dateAdded: comment.dateAdded,
+            };
+
+            return newComment;
+          }
+          return comment;
+        }),
+      };
+
+    case DELETE_COMMENT :
+      return {
+        comments: state.comments.filter(comment => comment._id !== action.id),
+      };
+
     default:
       return state;
   }

From 38c5da894789b5f74e2fbf02e10621114da15094 Mon Sep 17 00:00:00 2001
From: sleepymoonlight <lyinginmysky@gmail.com>
Date: Wed, 12 Aug 2020 15:07:33 +0300
Subject: [PATCH 10/10] fix components and add edit and delete comment actions
 to them

---
 .../CommentListItem/CommentListItem.js        | 18 +++++----
 .../Comment/components/CommentsList.js        | 11 ++++--
 client/modules/Post/components/PostList.js    | 23 +++++++++--
 .../components/PostListItem/PostListItem.js   | 38 ++++++++++---------
 .../Post/pages/PostListPage/PostListPage.js   | 12 +++++-
 5 files changed, 69 insertions(+), 33 deletions(-)

diff --git a/client/modules/Comment/components/CommentListItem/CommentListItem.js b/client/modules/Comment/components/CommentListItem/CommentListItem.js
index 2732902e8..14466d31c 100644
--- a/client/modules/Comment/components/CommentListItem/CommentListItem.js
+++ b/client/modules/Comment/components/CommentListItem/CommentListItem.js
@@ -9,14 +9,17 @@ const CommentListItem = props => {
   const [isEdited, editComment] = useState(false);
   const [comment, changeValue] = useState(props.comment.content);
 
-  const editCurrentComment = () => {
-    editComment(true);
+  const editCurrentComment = (id, content) => {
+    props.handleEditComment(id, content);
+    editComment(false);
   };
 
+  const dateFormatted = `${props.comment.dateAdded.slice(11, 16)}  ${props.comment.dateAdded.slice(0, 10)}`;
+
   return (
     <div className={styles['single-comment']}>
       <div>
-        <p className={styles['comment-date']}>{props.comment.dateAdded}</p>
+        <p className={styles['comment-date']}>{dateFormatted}</p>
         <p className={styles['author-name']}>By {props.comment.createdBy}</p>
       </div>
       {
@@ -31,15 +34,15 @@ const CommentListItem = props => {
             <div className={styles['comment-actions']}>
               <a
                 className={`${styles['comment-button']} ${styles['comment-cancel-button']}`}
-                href="#"
                 onClick={() => editComment(false)}
+                href="#"
               >
                 <FormattedMessage id="cancel" />
               </a>
               <a
                 className={`${styles['comment-button']} ${styles['comment-submit-button']}`}
+                onClick={() => editCurrentComment(props.comment._id, comment)}
                 href="#"
-                onClick={() => {}}
               >
                 <FormattedMessage id="submit" />
               </a>
@@ -51,12 +54,12 @@ const CommentListItem = props => {
             <p className={styles['comment-desc']}>{props.comment.content}</p>
             <div className={styles['comment-actions']}>
               <p className={`${styles['comment-action']} ${styles['comment-delete']}`}>
-                <a href="#" onClick={props.onDelete}>
+                <a href="#" onClick={() => props.onDelete(props.comment._id)}>
                   <FormattedMessage id="deleteComment" />
                 </a>
               </p>
               <p className={`${styles['comment-action']} ${styles['comment-edit']}`}>
-                <a href="#" onClick={() => editCurrentComment()}>
+                <a href="#" onClick={() => editComment(true)}>
                   <FormattedMessage id="editComment" />
                 </a>
               </p>
@@ -75,6 +78,7 @@ CommentListItem.propTypes = {
     dateAdded: PropTypes.string.isRequired,
   }).isRequired,
   onDelete: PropTypes.func.isRequired,
+  handleEditComment: PropTypes.func.isRequired,
 };
 
 export default CommentListItem;
diff --git a/client/modules/Comment/components/CommentsList.js b/client/modules/Comment/components/CommentsList.js
index cf18483ec..90145e55b 100644
--- a/client/modules/Comment/components/CommentsList.js
+++ b/client/modules/Comment/components/CommentsList.js
@@ -8,11 +8,12 @@ const CommentsList = props => {
   return (
     <div className="listView">
       {
-        props.comments.map(comment => (
+        props.comments && props.comments.map(comment => (
           <CommentListItem
             comment={comment}
-            key={comment.postId}
-            onDelete={() => {}}
+            key={comment._id}
+            onDelete={id => props.handleDeleteComment(id)}
+            handleEditComment={(id, content) => props.handleEditComment(id, content)}
           />
         ))
       }
@@ -24,7 +25,9 @@ CommentsList.propTypes = {
   comments: PropTypes.arrayOf(PropTypes.shape({
     content: PropTypes.string.isRequired,
     createdBy: PropTypes.string.isRequired,
-  })).isRequired,
+  })),
+  handleDeleteComment: PropTypes.func.isRequired,
+  handleEditComment: PropTypes.func.isRequired,
 };
 
 export default CommentsList;
diff --git a/client/modules/Post/components/PostList.js b/client/modules/Post/components/PostList.js
index 15f740736..93cef0bb3 100644
--- a/client/modules/Post/components/PostList.js
+++ b/client/modules/Post/components/PostList.js
@@ -1,10 +1,21 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
 // Import Components
 import PostListItem from './PostListItem/PostListItem';
 
-function PostList(props) {
+const PostList = props => {
+  const [openedCommentId, openComments] = useState(null);
+
+  const showComments = id => {
+    if (openedCommentId === id) {
+      openComments(null);
+    } else {
+      props.handleFetchComments(id);
+      openComments(id);
+    }
+  };
+
   return (
     <div className="listView">
       {
@@ -15,7 +26,11 @@ function PostList(props) {
             onDelete={() => props.handleDeletePost(post.cuid)}
             handleAddComment={(authorName, content, id) => props.handleAddComment(authorName, content, id)}
             handleFetchComments={id => props.handleFetchComments(id)}
-            comments={props.comments.filter(el => el.postId === post.cuid)}
+            comments={props.comments}
+            showComments={id => showComments(id)}
+            isCommentsOpened={post.cuid === openedCommentId}
+            handleDeleteComment={id => props.handleDeleteComment(id)}
+            handleEditComment={(id, content) => props.handleEditComment(id, content)}
           />
         ))
       }
@@ -38,6 +53,8 @@ PostList.propTypes = {
   handleDeletePost: PropTypes.func.isRequired,
   handleAddComment: PropTypes.func.isRequired,
   handleFetchComments: PropTypes.func.isRequired,
+  handleDeleteComment: PropTypes.func.isRequired,
+  handleEditComment: PropTypes.func.isRequired,
 };
 
 export default PostList;
diff --git a/client/modules/Post/components/PostListItem/PostListItem.js b/client/modules/Post/components/PostListItem/PostListItem.js
index 2952a7769..8e6b2b9bc 100644
--- a/client/modules/Post/components/PostListItem/PostListItem.js
+++ b/client/modules/Post/components/PostListItem/PostListItem.js
@@ -10,18 +10,8 @@ import styles from './PostListItem.css';
 import CommentCreateWidget from '../../../Comment/components/CommentCreateWidget/CommentCreateWidget';
 
 const PostListItem = props => {
-  const [openedCommentId, openComments] = useState(null);
   const [isCommentAddingFormOpen, openCommentsForm] = useState(false);
-
-  const showComments = id => {
-    props.handleFetchComments(id);
-
-    if (openedCommentId === id) {
-      openComments(null);
-    } else {
-      openComments(id);
-    }
-  };
+  const currentComments = props.comments && props.comments.filter(el => el.postId === props.post.cuid);
 
   return (
     <div className={styles['single-post']}>
@@ -50,19 +40,27 @@ const PostListItem = props => {
           </a>
         </p>
         <p className={styles['post-action']}>
-          <a href="#" onClick={() => showComments(props.post.cuid)}>
-            <FormattedMessage id={props.post.cuid === openedCommentId ? 'hideComments' : 'showComments'} />
+          <a href="#" onClick={() => props.showComments(props.post.cuid)}>
+            <FormattedMessage id={props.isCommentsOpened ? 'hideComments' : 'showComments'} />
           </a>
         </p>
       </div>
       {
-        isCommentAddingFormOpen === true && <CommentCreateWidget
-          addComment={(authorName, content) => props.handleAddComment(authorName, content, props.post.cuid)}
-          closeForm={() => openCommentsForm(false)}
-        />
+        isCommentAddingFormOpen === true && (
+          <CommentCreateWidget
+            addComment={(authorName, content) => props.handleAddComment(authorName, content, props.post.cuid)}
+            closeForm={() => openCommentsForm(false)}
+          />
+        )
       }
       {
-        props.post.cuid === openedCommentId && <CommentsList comments={props.comments} />
+        props.isCommentsOpened && (
+          <CommentsList
+            comments={currentComments}
+            handleDeleteComment={id => props.handleDeleteComment(id)}
+            handleEditComment={(id, content) => props.handleEditComment(id, content)}
+          />
+        )
       }
       <hr className={styles.divider} />
     </div>
@@ -84,6 +82,10 @@ PostListItem.propTypes = {
   onDelete: PropTypes.func.isRequired,
   handleAddComment: PropTypes.func.isRequired,
   handleFetchComments: PropTypes.func.isRequired,
+  showComments: PropTypes.func.isRequired,
+  isCommentsOpened: PropTypes.bool.isRequired,
+  handleDeleteComment: PropTypes.func.isRequired,
+  handleEditComment: PropTypes.func.isRequired,
 };
 
 export default PostListItem;
diff --git a/client/modules/Post/pages/PostListPage/PostListPage.js b/client/modules/Post/pages/PostListPage/PostListPage.js
index e27ecdf89..00750d986 100644
--- a/client/modules/Post/pages/PostListPage/PostListPage.js
+++ b/client/modules/Post/pages/PostListPage/PostListPage.js
@@ -8,7 +8,7 @@ import PostCreateWidget from '../../components/PostCreateWidget/PostCreateWidget
 
 // Import Actions
 import { addPostRequest, fetchPosts, deletePostRequest } from '../../PostActions';
-import { addCommentRequest, fetchComments } from '../../../Comment/CommentActions';
+import { addCommentRequest, deleteCommentRequest, editCommentRequest, fetchComments } from '../../../Comment/CommentActions';
 import { toggleAddPost } from '../../../App/AppActions';
 
 // Import Selectors
@@ -39,6 +39,14 @@ class PostListPage extends Component {
     this.props.dispatch(addCommentRequest({ createdBy: authorName, content }, id));
   };
 
+  handleDeleteComment = id => {
+    this.props.dispatch(deleteCommentRequest(id));
+  };
+
+  handleEditComment = (id, content) => {
+    this.props.dispatch(editCommentRequest(id, content));
+  };
+
   render() {
     return (
       <div>
@@ -48,6 +56,8 @@ class PostListPage extends Component {
           posts={this.props.posts}
           handleAddComment={(authorName, content, id) => this.handleAddComment(authorName, content, id)}
           handleFetchComments={id => this.handleFetchComments(id)}
+          handleDeleteComment={id => this.handleDeleteComment(id)}
+          handleEditComment={(id, content) => this.handleEditComment(id, content)}
           comments={this.props.comments}
         />
       </div>