From 9a375a8d7fdef7f80430a247e15f5e518d9e3a65 Mon Sep 17 00:00:00 2001
From: Diz00 <valkinvalero@gmail.com>
Date: Thu, 16 Nov 2017 14:36:50 +0200
Subject: [PATCH 1/9] modified gitignore file

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index d41d351f8..6ab7cf84b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ public/*
 dist
 coverage/
 .nyc_output/
+yarn.lock
\ No newline at end of file

From 8b681eff165b56af84a25e8f21333bf1d2c1fb20 Mon Sep 17 00:00:00 2001
From: Diz00 <valkinvalero@gmail.com>
Date: Thu, 16 Nov 2017 17:49:30 +0200
Subject: [PATCH 2/9] added comment element

---
 package.json | 54 +++++++++++++++++++++-------------------------------
 1 file changed, 22 insertions(+), 32 deletions(-)

diff --git a/package.json b/package.json
index 861cb82e6..71d00fa99 100644
--- a/package.json
+++ b/package.json
@@ -1,25 +1,29 @@
 {
   "name": "mern-starter",
   "version": "2.0.0",
-  "description": "Boilerplate project for building Isomorphic apps using React and Redux",
+  "description":
+    "Boilerplate project for building Isomorphic apps using React and Redux",
   "scripts": {
-    "test": "cross-env NODE_ENV=test PORT=8080 MONGO_URL=mongodb://localhost:27017/mern-test node_modules/.bin/nyc node --harmony-proxies node_modules/.bin/ava",
+    "test":
+      "cross-env NODE_ENV=test PORT=8080 MONGO_URL=mongodb://localhost:27017/mern-test node_modules/.bin/nyc node --harmony-proxies node_modules/.bin/ava",
     "watch:test": "npm run test -- --watch",
     "cover": "nyc npm run test",
-    "check-coverage": "nyc check-coverage --statements 100 --branches 100 --functions 100 --lines 100",
-    "start": "cross-env BABEL_DISABLE_CACHE=1 NODE_ENV=development nodemon index.js",
+    "check-coverage":
+      "nyc check-coverage --statements 100 --branches 100 --functions 100 --lines 100",
+    "start":
+      "cross-env BABEL_DISABLE_CACHE=1 NODE_ENV=development nodemon index.js",
     "start:prod": "cross-env NODE_ENV=production node index.js",
-    "bs": "npm run clean && npm run build && npm run build:server && npm run start:prod",
-    "build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
-    "build:server": "cross-env NODE_ENV=production webpack --config webpack.config.server.js",
+    "bs":
+      "npm run clean && npm run build && npm run build:server && npm run start:prod",
+    "build":
+      "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
+    "build:server":
+      "cross-env NODE_ENV=production webpack --config webpack.config.server.js",
     "clean": "rimraf dist",
     "slate": "rimraf node_modules && npm install",
     "lint": "eslint client server"
   },
-  "pre-commit": [
-    "lint",
-    "test"
-  ],
+  "pre-commit": ["lint", "test"],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Hashnode/mern-starter.git"
@@ -28,7 +32,8 @@
     "url": "https://github.com/Hashnode/mern-starter/issues"
   },
   "homepage": "https://github.com/Hashnode/mern-starter#readme",
-  "author": "Prashant Abhishek <prashant.abhishek7g@gmail.com>, Mayank Chandola <imayankchd@gmail.com>, Sandeep Panda <sandeep@hashnode.com>, Syed Fazle Rahman <fazle@hashnode.com>, Alkshendra Maurya <alkshendra@hashnode.com>",
+  "author":
+    "Prashant Abhishek <prashant.abhishek7g@gmail.com>, Mayank Chandola <imayankchd@gmail.com>, Sandeep Panda <sandeep@hashnode.com>, Syed Fazle Rahman <fazle@hashnode.com>, Alkshendra Maurya <alkshendra@hashnode.com>",
   "license": "MIT",
   "dependencies": {
     "babel-core": "^6.9.1",
@@ -115,25 +120,14 @@
     "node": ">=4"
   },
   "ava": {
-    "files": [
-      "client/**/*.spec.js",
-      "server/**/*.spec.js"
-    ],
-    "source": [
-      "client/**/*.js",
-      "server/**/*.js"
-    ],
+    "files": ["client/**/*.spec.js", "server/**/*.spec.js"],
+    "source": ["client/**/*.js", "server/**/*.js"],
     "failFast": true,
     "babel": "inherit",
-    "require": [
-      "./server/util/setup-test-env.js"
-    ]
+    "require": ["./server/util/setup-test-env.js"]
   },
   "nyc": {
-    "include": [
-      "client/**/*.js",
-      "server/**/*.js"
-    ],
+    "include": ["client/**/*.js", "server/**/*.js"],
     "exclude": [
       "**/*.spec.js",
       "client/reducers.js",
@@ -144,10 +138,6 @@
       "server/config.js",
       "server/dummyData.js"
     ],
-    "reporter": [
-      "lcov",
-      "text",
-      "html"
-    ]
+    "reporter": ["lcov", "text", "html"]
   }
 }

From a12714efbedaec732f565e5ef69bdef054d4fe30 Mon Sep 17 00:00:00 2001
From: Diz00 <valkinvalero@gmail.com>
Date: Thu, 16 Nov 2017 19:25:36 +0200
Subject: [PATCH 3/9] implemented CommentReducer

---
 client/modules/Post/CommentActions.js         | 23 +++++
 client/modules/Post/CommentReducer.js         | 57 ++++++++++++
 .../Comments/CommentCreateWidget.css          | 51 +++++++++++
 .../Comments/CommentCreateWidget.js           | 45 ++++++++++
 .../Post/components/Comments/CommentList.css  |  4 +
 .../Post/components/Comments/CommentList.js   | 30 +++++++
 .../components/Comments/CommentListItem.css   | 43 +++++++++
 .../components/Comments/CommentListItem.js    | 51 +++++++++++
 .../pages/PostDetailPage/PostDetailPage.js    | 90 ++++++++++++++-----
 client/reducers.js                            | 10 ++-
 package.json                                  | 54 ++++++-----
 11 files changed, 409 insertions(+), 49 deletions(-)
 create mode 100644 client/modules/Post/CommentActions.js
 create mode 100644 client/modules/Post/CommentReducer.js
 create mode 100644 client/modules/Post/components/Comments/CommentCreateWidget.css
 create mode 100644 client/modules/Post/components/Comments/CommentCreateWidget.js
 create mode 100644 client/modules/Post/components/Comments/CommentList.css
 create mode 100644 client/modules/Post/components/Comments/CommentList.js
 create mode 100644 client/modules/Post/components/Comments/CommentListItem.css
 create mode 100644 client/modules/Post/components/Comments/CommentListItem.js

diff --git a/client/modules/Post/CommentActions.js b/client/modules/Post/CommentActions.js
new file mode 100644
index 000000000..1a41191e7
--- /dev/null
+++ b/client/modules/Post/CommentActions.js
@@ -0,0 +1,23 @@
+import callApi from "../../util/apiCaller";
+
+export const ADD_COMMENTS = "ADD_COMMENTS";
+export const ADD_COMMENT = "ADD_COMMENT";
+export const EDIT_COMMENT = "EDIT_COMMENT";
+export const EDIT_COMMENT_MODE = "EDIT_COMMENT_MODE";
+export const DELETE_COMMENT = "DELETE_COMMENT";
+export const CANCEL_EDIT_COMMENT = "CANCEL_EDIT_COMMENT";
+
+export function addComments(comments) {
+  return {
+    type: ADD_COMMENTS,
+    comments
+  };
+}
+
+export function fetchComments(cuid) {
+  return dispatch => {
+    return callApi(`posts/${cuid}/comments`).then(res => {
+      dispatch(addComments(res.comments));
+    });
+  };
+}
diff --git a/client/modules/Post/CommentReducer.js b/client/modules/Post/CommentReducer.js
new file mode 100644
index 000000000..63bd8a059
--- /dev/null
+++ b/client/modules/Post/CommentReducer.js
@@ -0,0 +1,57 @@
+import {
+  ADD_COMMENTS,
+  ADD_COMMENT,
+  EDIT_COMMENT,
+  EDIT_COMMENT_MODE,
+  CANCEL_EDIT_COMMENT,
+  DELETE_COMMENT
+} from "./CommentActions";
+
+const initialState = {
+  comments: [],
+  editComment: null
+};
+
+const CommentReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case ADD_COMMENTS:
+      return { ...state, comments: action.comments };
+    case ADD_COMMENT: {
+      return { ...state, comments: [...state.comments, action.comment] };
+    }
+    case EDIT_COMMENT: {
+      let index = state.comments.findIndex(comment => {
+        if (comment.cuid === action.comment.cuid) {
+          return true;
+        }
+        return false;
+      });
+
+      let startCommentArray = state.comments.slice(0, index);
+      let endCommentArray = state.comments.slice(
+        index + 1,
+        state.comments.length
+      );
+      return {
+        ...state,
+        comments: [...startCommentArray, action.comment, ...endCommentArray]
+      };
+    }
+    case EDIT_COMMENT_MODE:
+      return { ...state, editComment: action.cuid };
+    case CANCEL_EDIT_COMMENT:
+      return { ...state, editComment: null };
+    case DELETE_COMMENT:
+      return {
+        editComment: null,
+        comments: state.comments.filter(comment => comment.cuid !== action.cuid)
+      };
+    default:
+      return state;
+  }
+};
+
+/* Selectors */
+
+// Get corresponding comments
+export const getComments = state => state.comments;
diff --git a/client/modules/Post/components/Comments/CommentCreateWidget.css b/client/modules/Post/components/Comments/CommentCreateWidget.css
new file mode 100644
index 000000000..effce4ae6
--- /dev/null
+++ b/client/modules/Post/components/Comments/CommentCreateWidget.css
@@ -0,0 +1,51 @@
+.form {
+  background: #fafafa;
+  padding: 32px 0;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+
+.form-content {
+  width: 100%;
+  max-width: 600px;
+  margin: auto;
+  font-size: 14px;
+}
+
+.form-title {
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 16px;
+  color: #757575;
+}
+
+.form-field {
+  width: 100%;
+  margin-bottom: 16px;
+  font-family: "Lato", sans-serif;
+  font-size: 16px;
+  line-height: normal;
+  padding: 12px 16px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  outline: none;
+  color: #212121;
+}
+
+textarea {
+  min-height: 200px;
+}
+
+.post-submit-button {
+  display: inline-block;
+  padding: 8px 16px;
+  font-size: 18px;
+  color: #fff;
+  background: #03a9f4;
+  text-decoration: none;
+  border-radius: 4px;
+}
+
+.appear {
+  display: block;
+}
diff --git a/client/modules/Post/components/Comments/CommentCreateWidget.js b/client/modules/Post/components/Comments/CommentCreateWidget.js
new file mode 100644
index 000000000..fe97aee9d
--- /dev/null
+++ b/client/modules/Post/components/Comments/CommentCreateWidget.js
@@ -0,0 +1,45 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+
+import styles from "./CommentCreateWidget.css";
+
+class CommentCreateWidget extends Component {
+  createComment = e => {
+    e.preventDefault();
+    alert("hey");
+  };
+  render() {
+    return (
+      <div className={styles["form"]}>
+        <div className={styles["form-content"]}>
+          <h2 className={styles["form-title"]}>Write a new comment</h2>
+          <input placeholder="Author" className={styles["form-field"]} />
+
+          <textarea
+            placeholder="Write your comment here"
+            className={styles["form-field"]}
+          />
+          <a
+            className={styles["post-submit-button"]}
+            href="#"
+            onClick={this.createComment}
+          >
+            Save edit
+          </a>
+        </div>
+      </div>
+    );
+  }
+
+  componentWillUnmount() {
+    // clear edit component form
+  }
+}
+
+function mapStateToProps({ comments }) {
+  return {
+    editComment: comments.editComment
+  };
+}
+
+export default connect(mapStateToProps)(CommentCreateWidget);
diff --git a/client/modules/Post/components/Comments/CommentList.css b/client/modules/Post/components/Comments/CommentList.css
new file mode 100644
index 000000000..a7d8a93a0
--- /dev/null
+++ b/client/modules/Post/components/Comments/CommentList.css
@@ -0,0 +1,4 @@
+.comment-view {
+  width: 100%;
+  padding: 0 50px;
+}
diff --git a/client/modules/Post/components/Comments/CommentList.js b/client/modules/Post/components/Comments/CommentList.js
new file mode 100644
index 000000000..35d0bdc71
--- /dev/null
+++ b/client/modules/Post/components/Comments/CommentList.js
@@ -0,0 +1,30 @@
+import React, { PropTypes } from "react";
+
+import CommentListItem from "./CommentListItem";
+
+import styles from "./CommentList.css";
+
+function CommentList(props) {
+  if (props.comments.length === 0) {
+    return null;
+  }
+  return (
+    <div className={styles["comment-view"]}>
+      {props.comments.map(comment => (
+        <CommentListItem key={comment.cuid} comment={comment} />
+      ))}
+    </div>
+  );
+}
+
+CommentList.propTypes = {
+  comments: PropTypes.arrayOf(
+    PropTypes.shape({
+      author: PropTypes.string.isRequired,
+      body: PropTypes.string.isRequired,
+      cuid: PropTypes.string.isRequired
+    })
+  ).isRequired
+};
+
+export default CommentList;
diff --git a/client/modules/Post/components/Comments/CommentListItem.css b/client/modules/Post/components/Comments/CommentListItem.css
new file mode 100644
index 000000000..82c4e2444
--- /dev/null
+++ b/client/modules/Post/components/Comments/CommentListItem.css
@@ -0,0 +1,43 @@
+.single-comment {
+  border: 1px solid #616161;
+  border-radius: 10px;
+  padding: 15px;
+  margin-bottom: 15px;
+}
+
+.comment-author {
+  margin-bottom: 7px;
+}
+
+.comment-body {
+  margin-bottom: 10px;
+}
+
+.btn-group {
+  height: 30px;
+}
+
+.btn {
+  height: 100%;
+  width: 140px;
+  margin-right: 7px;
+  border: 1px solid #616161;
+  border-radius: 5px;
+  color: white;
+}
+
+.edit-btn {
+  background-color: blue;
+}
+
+.edit-btn:hover {
+  background-color: #001a66;
+}
+
+.delete-btn {
+  background-color: red;
+}
+
+.delete-btn:hover {
+  background-color: #b30000;
+}
diff --git a/client/modules/Post/components/Comments/CommentListItem.js b/client/modules/Post/components/Comments/CommentListItem.js
new file mode 100644
index 000000000..6edb5918c
--- /dev/null
+++ b/client/modules/Post/components/Comments/CommentListItem.js
@@ -0,0 +1,51 @@
+import React, { PropTypes, Component } from "react";
+import { connect } from "react-redux";
+
+import styles from "./CommentListItem.css";
+
+class CommentListItem extends Component {
+  editComment = () => {};
+
+  deleteComment = () => {
+    let confirmDelete = confirm(
+      "Are you sure you want to delete this comment?"
+    );
+    if (confirmDelete) {
+      // call api endpoint
+    }
+  };
+
+  render() {
+    const { author, body } = this.props.comment;
+    return (
+      <div className={styles["single-comment"]}>
+        <h3 className={styles["comment-author"]}>By {author}</h3>
+        <p className={styles["comment-body"]}>{body}</p>
+        <div className={styles["btn-group"]}>
+          <button
+            className={`${styles["btn"]} ${styles["edit-btn"]}`}
+            onClick={this.editComment}
+          >
+            Edit comment
+          </button>
+          <button
+            className={`${styles["btn"]} ${styles["delete-btn"]}`}
+            onClick={this.deleteComment}
+          >
+            Delete comment
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+
+CommentListItem.propTypes = {
+  comment: PropTypes.shape({
+    author: PropTypes.string.isRequired,
+    body: PropTypes.string.isRequired,
+    cuid: PropTypes.string.isRequired
+  }).isRequired
+};
+
+export default CommentListItem;
diff --git a/client/modules/Post/pages/PostDetailPage/PostDetailPage.js b/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
index f98eaca6d..d5bbafbb2 100644
--- a/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
+++ b/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
@@ -1,39 +1,83 @@
-import React, { PropTypes } from 'react';
-import { connect } from 'react-redux';
-import Helmet from 'react-helmet';
-import { FormattedMessage } from 'react-intl';
+import React, { PropTypes, Component } from "react";
+import { connect } from "react-redux";
+import Helmet from "react-helmet";
+import { FormattedMessage } from "react-intl";
 
 // Import Style
-import styles from '../../components/PostListItem/PostListItem.css';
+import styles from "../../components/PostListItem/PostListItem.css";
 
 // Import Actions
-import { fetchPost } from '../../PostActions';
+import { fetchPost } from "../../PostActions";
+import { fetchComments } from "../../CommentActions";
+
+import CommentList from "../../components/Comments/CommentList";
+import CommentCreateWidget from "../../components/Comments/CommentCreateWidget";
 
 // Import Selectors
-import { getPost } from '../../PostReducer';
-
-export function PostDetailPage(props) {
-  return (
-    <div>
-      <Helmet title={props.post.title} />
-      <div className={`${styles['single-post']} ${styles['post-detail']}`}>
-        <h3 className={styles['post-title']}>{props.post.title}</h3>
-        <p className={styles['author-name']}><FormattedMessage id="by" /> {props.post.name}</p>
-        <p className={styles['post-desc']}>{props.post.content}</p>
+import { getPost } from "../../PostReducer";
+import { getComments } from "../../CommentReducer";
+
+// test data, remove after implementing server side
+const comments = [
+  {
+    author: "Mr 1",
+    body:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi doloremque maxime quia excepturi autem ipsa reprehenderit.",
+    cuid: "1"
+  },
+  {
+    author: "Mr two",
+    body:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi doloremque maxime quia excepturi autem ipsa reprehenderit.",
+    cuid: "2"
+  },
+  {
+    author: "Mr 3(threeeeeeeee)",
+    body:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi doloremque maxime quia excepturi autem ipsa reprehenderit.",
+    cuid: "3"
+  }
+];
+/////// end
+
+export class PostDetailPage extends Component {
+  componentDidMount() {
+    // fetch comments
+    //this.props.dispatch(fetchComments());
+  }
+  render() {
+    return (
+      <div>
+        <Helmet title={this.props.post.title} />
+        <div className={`${styles["single-post"]} ${styles["post-detail"]}`}>
+          <h3 className={styles["post-title"]}>{this.props.post.title}</h3>
+          <p className={styles["author-name"]}>
+            <FormattedMessage id="by" /> {this.props.post.name}
+          </p>
+          <p className={styles["post-desc"]}>{this.props.post.content}</p>
+        </div>
+        <CommentList comments={comments} />
+        <CommentCreateWidget />
       </div>
-    </div>
-  );
+    );
+  }
 }
 
 // Actions required to provide data for this component to render in sever side.
-PostDetailPage.need = [params => {
-  return fetchPost(params.cuid);
-}];
+PostDetailPage.need = [
+  params => {
+    return fetchPost(params.cuid);
+  },
+  params => {
+    return fetchComments(params.cuid);
+  }
+];
 
 // Retrieve data from store as props
 function mapStateToProps(state, props) {
   return {
     post: getPost(state, props.params.cuid),
+    comments: getComments(state)
   };
 }
 
@@ -43,8 +87,8 @@ PostDetailPage.propTypes = {
     title: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired,
     slug: PropTypes.string.isRequired,
-    cuid: PropTypes.string.isRequired,
-  }).isRequired,
+    cuid: PropTypes.string.isRequired
+  }).isRequired
 };
 
 export default connect(mapStateToProps)(PostDetailPage);
diff --git a/client/reducers.js b/client/reducers.js
index 2aa143142..bcafb8d5e 100644
--- a/client/reducers.js
+++ b/client/reducers.js
@@ -1,16 +1,18 @@
 /**
  * Root Reducer
  */
-import { combineReducers } from 'redux';
+import { combineReducers } from "redux";
 
 // Import Reducers
-import app from './modules/App/AppReducer';
-import posts from './modules/Post/PostReducer';
-import intl from './modules/Intl/IntlReducer';
+import app from "./modules/App/AppReducer";
+import posts from "./modules/Post/PostReducer";
+import comments from "./modules/Post/CommentReducer";
+import intl from "./modules/Intl/IntlReducer";
 
 // Combine all reducers into one root reducer
 export default combineReducers({
   app,
   posts,
   intl,
+  comments
 });
diff --git a/package.json b/package.json
index 71d00fa99..861cb82e6 100644
--- a/package.json
+++ b/package.json
@@ -1,29 +1,25 @@
 {
   "name": "mern-starter",
   "version": "2.0.0",
-  "description":
-    "Boilerplate project for building Isomorphic apps using React and Redux",
+  "description": "Boilerplate project for building Isomorphic apps using React and Redux",
   "scripts": {
-    "test":
-      "cross-env NODE_ENV=test PORT=8080 MONGO_URL=mongodb://localhost:27017/mern-test node_modules/.bin/nyc node --harmony-proxies node_modules/.bin/ava",
+    "test": "cross-env NODE_ENV=test PORT=8080 MONGO_URL=mongodb://localhost:27017/mern-test node_modules/.bin/nyc node --harmony-proxies node_modules/.bin/ava",
     "watch:test": "npm run test -- --watch",
     "cover": "nyc npm run test",
-    "check-coverage":
-      "nyc check-coverage --statements 100 --branches 100 --functions 100 --lines 100",
-    "start":
-      "cross-env BABEL_DISABLE_CACHE=1 NODE_ENV=development nodemon index.js",
+    "check-coverage": "nyc check-coverage --statements 100 --branches 100 --functions 100 --lines 100",
+    "start": "cross-env BABEL_DISABLE_CACHE=1 NODE_ENV=development nodemon index.js",
     "start:prod": "cross-env NODE_ENV=production node index.js",
-    "bs":
-      "npm run clean && npm run build && npm run build:server && npm run start:prod",
-    "build":
-      "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
-    "build:server":
-      "cross-env NODE_ENV=production webpack --config webpack.config.server.js",
+    "bs": "npm run clean && npm run build && npm run build:server && npm run start:prod",
+    "build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
+    "build:server": "cross-env NODE_ENV=production webpack --config webpack.config.server.js",
     "clean": "rimraf dist",
     "slate": "rimraf node_modules && npm install",
     "lint": "eslint client server"
   },
-  "pre-commit": ["lint", "test"],
+  "pre-commit": [
+    "lint",
+    "test"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Hashnode/mern-starter.git"
@@ -32,8 +28,7 @@
     "url": "https://github.com/Hashnode/mern-starter/issues"
   },
   "homepage": "https://github.com/Hashnode/mern-starter#readme",
-  "author":
-    "Prashant Abhishek <prashant.abhishek7g@gmail.com>, Mayank Chandola <imayankchd@gmail.com>, Sandeep Panda <sandeep@hashnode.com>, Syed Fazle Rahman <fazle@hashnode.com>, Alkshendra Maurya <alkshendra@hashnode.com>",
+  "author": "Prashant Abhishek <prashant.abhishek7g@gmail.com>, Mayank Chandola <imayankchd@gmail.com>, Sandeep Panda <sandeep@hashnode.com>, Syed Fazle Rahman <fazle@hashnode.com>, Alkshendra Maurya <alkshendra@hashnode.com>",
   "license": "MIT",
   "dependencies": {
     "babel-core": "^6.9.1",
@@ -120,14 +115,25 @@
     "node": ">=4"
   },
   "ava": {
-    "files": ["client/**/*.spec.js", "server/**/*.spec.js"],
-    "source": ["client/**/*.js", "server/**/*.js"],
+    "files": [
+      "client/**/*.spec.js",
+      "server/**/*.spec.js"
+    ],
+    "source": [
+      "client/**/*.js",
+      "server/**/*.js"
+    ],
     "failFast": true,
     "babel": "inherit",
-    "require": ["./server/util/setup-test-env.js"]
+    "require": [
+      "./server/util/setup-test-env.js"
+    ]
   },
   "nyc": {
-    "include": ["client/**/*.js", "server/**/*.js"],
+    "include": [
+      "client/**/*.js",
+      "server/**/*.js"
+    ],
     "exclude": [
       "**/*.spec.js",
       "client/reducers.js",
@@ -138,6 +144,10 @@
       "server/config.js",
       "server/dummyData.js"
     ],
-    "reporter": ["lcov", "text", "html"]
+    "reporter": [
+      "lcov",
+      "text",
+      "html"
+    ]
   }
 }

From ba698ccf8fb300b6bee777056e76bf174f734040 Mon Sep 17 00:00:00 2001
From: Diz00 <valkinvalero@gmail.com>
Date: Thu, 16 Nov 2017 19:48:40 +0200
Subject: [PATCH 4/9] implemented comment model and comment routes

---
 server/models/post.js |  22 +++++---
 server/server.js      | 117 ++++++++++++++++++++++++++----------------
 2 files changed, 86 insertions(+), 53 deletions(-)

diff --git a/server/models/post.js b/server/models/post.js
index e781bf7db..21d6a4f16 100644
--- a/server/models/post.js
+++ b/server/models/post.js
@@ -1,13 +1,19 @@
-import mongoose from 'mongoose';
+import mongoose from "mongoose";
 const Schema = mongoose.Schema;
 
 const postSchema = new Schema({
-  name: { type: 'String', required: true },
-  title: { type: 'String', required: true },
-  content: { type: 'String', required: true },
-  slug: { type: 'String', required: true },
-  cuid: { type: 'String', required: true },
-  dateAdded: { type: 'Date', default: Date.now, required: true },
+  name: { type: "String", required: true },
+  title: { type: "String", required: true },
+  content: { type: "String", required: true },
+  slug: { type: "String", required: true },
+  cuid: { type: "String", required: true, unique: true },
+  dateAdded: { type: "Date", default: Date.now, required: true }
 });
 
-export default mongoose.model('Post', postSchema);
+postSchema.virtual("comments", {
+  ref: "Comment",
+  localField: "_id",
+  foreignField: "owner"
+});
+
+export default mongoose.model("Post", postSchema);
diff --git a/server/server.js b/server/server.js
index ea3330200..81b6c9eef 100644
--- a/server/server.js
+++ b/server/server.js
@@ -1,48 +1,54 @@
-import Express from 'express';
-import compression from 'compression';
-import mongoose from 'mongoose';
-import bodyParser from 'body-parser';
-import path from 'path';
-import IntlWrapper from '../client/modules/Intl/IntlWrapper';
+import Express from "express";
+import compression from "compression";
+import mongoose from "mongoose";
+import bodyParser from "body-parser";
+import path from "path";
+import IntlWrapper from "../client/modules/Intl/IntlWrapper";
 
 // Webpack Requirements
-import webpack from 'webpack';
-import config from '../webpack.config.dev';
-import webpackDevMiddleware from 'webpack-dev-middleware';
-import webpackHotMiddleware from 'webpack-hot-middleware';
+import webpack from "webpack";
+import config from "../webpack.config.dev";
+import webpackDevMiddleware from "webpack-dev-middleware";
+import webpackHotMiddleware from "webpack-hot-middleware";
 
 // Initialize the Express App
 const app = new Express();
 
 // Run Webpack dev server in development mode
-if (process.env.NODE_ENV === 'development') {
+if (process.env.NODE_ENV === "development") {
   const compiler = webpack(config);
-  app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
+  app.use(
+    webpackDevMiddleware(compiler, {
+      noInfo: true,
+      publicPath: config.output.publicPath
+    })
+  );
   app.use(webpackHotMiddleware(compiler));
 }
 
 // React And Redux Setup
-import { configureStore } from '../client/store';
-import { Provider } from 'react-redux';
-import React from 'react';
-import { renderToString } from 'react-dom/server';
-import { match, RouterContext } from 'react-router';
-import Helmet from 'react-helmet';
+import { configureStore } from "../client/store";
+import { Provider } from "react-redux";
+import React from "react";
+import { renderToString } from "react-dom/server";
+import { match, RouterContext } from "react-router";
+import Helmet from "react-helmet";
 
 // Import required modules
-import routes from '../client/routes';
-import { fetchComponentData } from './util/fetchData';
-import posts from './routes/post.routes';
-import dummyData from './dummyData';
-import serverConfig from './config';
+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";
 
 // Set native promises as mongoose promise
 mongoose.Promise = global.Promise;
 
 // MongoDB Connection
-mongoose.connect(serverConfig.mongoURL, (error) => {
+mongoose.connect(serverConfig.mongoURL, error => {
   if (error) {
-    console.error('Please make sure Mongodb is installed and running!'); // eslint-disable-line no-console
+    console.error("Please make sure Mongodb is installed and running!"); // eslint-disable-line no-console
     throw error;
   }
 
@@ -52,18 +58,22 @@ mongoose.connect(serverConfig.mongoURL, (error) => {
 
 // Apply body Parser and server public assets and routes
 app.use(compression());
-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(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) => {
   const head = Helmet.rewind();
 
   // Import Manifests
-  const assetsManifest = process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
-  const chunkManifest = process.env.webpackChunkAssets && JSON.parse(process.env.webpackChunkAssets);
+  const assetsManifest =
+    process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
+  const chunkManifest =
+    process.env.webpackChunkAssets &&
+    JSON.parse(process.env.webpackChunkAssets);
 
   return `
     <!doctype html>
@@ -75,7 +85,9 @@ const renderFullPage = (html, initialState) => {
         ${head.link.toString()}
         ${head.script.toString()}
 
-        ${process.env.NODE_ENV === 'production' ? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />` : ''}
+        ${process.env.NODE_ENV === "production"
+          ? `<link rel='stylesheet' href='${assetsManifest["/app.css"]}' />`
+          : ""}
         <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'/>
         <link rel="shortcut icon" href="http://res.cloudinary.com/hashnode/image/upload/v1455629445/static_imgs/mern/mern-favicon-circle-fill.png" type="image/png" />
       </head>
@@ -83,22 +95,32 @@ const renderFullPage = (html, initialState) => {
         <div id="root">${html}</div>
         <script>
           window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
-          ${process.env.NODE_ENV === 'production' ?
-          `//<![CDATA[
+          ${process.env.NODE_ENV === "production"
+            ? `//<![CDATA[
           window.webpackManifest = ${JSON.stringify(chunkManifest)};
-          //]]>` : ''}
+          //]]>`
+            : ""}
         </script>
-        <script src='${process.env.NODE_ENV === 'production' ? assetsManifest['/vendor.js'] : '/vendor.js'}'></script>
-        <script src='${process.env.NODE_ENV === 'production' ? assetsManifest['/app.js'] : '/app.js'}'></script>
+        <script src='${process.env.NODE_ENV === "production"
+          ? assetsManifest["/vendor.js"]
+          : "/vendor.js"}'></script>
+        <script src='${process.env.NODE_ENV === "production"
+          ? assetsManifest["/app.js"]
+          : "/app.js"}'></script>
       </body>
     </html>
   `;
 };
 
 const renderError = err => {
-  const softTab = '&#32;&#32;&#32;&#32;';
-  const errTrace = process.env.NODE_ENV !== 'production' ?
-    `:<br><br><pre style="color:red">${softTab}${err.stack.replace(/\n/g, `<br>${softTab}`)}</pre>` : '';
+  const softTab = "&#32;&#32;&#32;&#32;";
+  const errTrace =
+    process.env.NODE_ENV !== "production"
+      ? `:<br><br><pre style="color:red">${softTab}${err.stack.replace(
+          /\n/g,
+          `<br>${softTab}`
+        )}</pre>`
+      : "";
   return renderFullPage(`Server Error${errTrace}`, {});
 };
 
@@ -110,7 +132,10 @@ app.use((req, res, next) => {
     }
 
     if (redirectLocation) {
-      return res.redirect(302, redirectLocation.pathname + redirectLocation.search);
+      return res.redirect(
+        302,
+        redirectLocation.pathname + redirectLocation.search
+      );
     }
 
     if (!renderProps) {
@@ -131,18 +156,20 @@ app.use((req, res, next) => {
         const finalState = store.getState();
 
         res
-          .set('Content-Type', 'text/html')
+          .set("Content-Type", "text/html")
           .status(200)
           .end(renderFullPage(initialView, finalState));
       })
-      .catch((error) => next(error));
+      .catch(error => next(error));
   });
 });
 
 // start app
-app.listen(serverConfig.port, (error) => {
+app.listen(serverConfig.port, error => {
   if (!error) {
-    console.log(`MERN is running on port: ${serverConfig.port}! Build something amazing!`); // eslint-disable-line
+    console.log(
+      `MERN is running on port: ${serverConfig.port}! Build something amazing!`
+    ); // eslint-disable-line
   }
 });
 

From 9e047394a727ff9394911eb284c9152b1fbc9d6f Mon Sep 17 00:00:00 2001
From: Diz00 <valkinvalero@gmail.com>
Date: Thu, 16 Nov 2017 19:49:17 +0200
Subject: [PATCH 5/9] implemented comment model and comment routes

---
 server/controllers/comment.controller.js |  0
 server/models/comment.js                 | 12 ++++++++++++
 server/routes/comment.routes.js          | 16 ++++++++++++++++
 3 files changed, 28 insertions(+)
 create mode 100644 server/controllers/comment.controller.js
 create mode 100644 server/models/comment.js
 create mode 100644 server/routes/comment.routes.js

diff --git a/server/controllers/comment.controller.js b/server/controllers/comment.controller.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/server/models/comment.js b/server/models/comment.js
new file mode 100644
index 000000000..d07650c15
--- /dev/null
+++ b/server/models/comment.js
@@ -0,0 +1,12 @@
+import mongoose from "mongoose";
+const Schema = mongoose.Schema;
+
+const commentSchema = new Schema({
+  author: { type: "String", required: true },
+  body: { type: "String", required: true },
+  cuid: { type: "String", required: true, unique: true },
+  owner: { type: mongoose.Schema.Types.ObjectId, ref: "Post", required: true },
+  dateAdded: { type: "Date", default: Date.now, required: true }
+});
+
+export default mongoose.model("Comment", commentSchema);
diff --git a/server/routes/comment.routes.js b/server/routes/comment.routes.js
new file mode 100644
index 000000000..83eec1368
--- /dev/null
+++ b/server/routes/comment.routes.js
@@ -0,0 +1,16 @@
+import { Router } from "express";
+import * as CommentController from "../controllers/comment.controller";
+const router = new Router();
+
+// Get all Comments
+router.route("/posts/:cuid/comments").get(CommentController.getComments);
+
+// Add a new Post
+router.route("/posts/:cuid/comments").post(CommentController.addComment);
+
+// Delete a post by cuid
+router
+  .route("/posts/:cuid/comments/:cuid")
+  .delete(CommentController.deleteComment);
+
+export default router;

From 7b612daf2962805ed838f26dc0a3e68e96ac1bef Mon Sep 17 00:00:00 2001
From: Diz00 <valkinvalero@gmail.com>
Date: Fri, 17 Nov 2017 11:02:49 +0200
Subject: [PATCH 6/9] implemented comment deletion client side

---
 client/modules/Post/CommentActions.js         | 15 ++++
 client/modules/Post/CommentReducer.js         |  6 +-
 .../Post/components/Comments/CommentList.js   | 43 +++++++---
 .../components/Comments/CommentListItem.js    | 21 ++---
 .../pages/PostDetailPage/PostDetailPage.js    | 39 +++------
 server/controllers/comment.controller.js      | 84 +++++++++++++++++++
 server/dummyData.js                           | 52 ++++++++++--
 server/routes/comment.routes.js               | 11 +--
 server/server.js                              |  1 -
 9 files changed, 207 insertions(+), 65 deletions(-)

diff --git a/client/modules/Post/CommentActions.js b/client/modules/Post/CommentActions.js
index 1a41191e7..c46411f8a 100644
--- a/client/modules/Post/CommentActions.js
+++ b/client/modules/Post/CommentActions.js
@@ -21,3 +21,18 @@ export function fetchComments(cuid) {
     });
   };
 }
+
+export function deleteComment(cuid) {
+  return {
+    type: DELETE_COMMENT,
+    cuid
+  };
+}
+
+export function deleteCommentRequest(cuid) {
+  return dispatch => {
+    return callApi(`comments/${cuid}`, "delete").then(() =>
+      dispatch(deleteComment(cuid))
+    );
+  };
+}
diff --git a/client/modules/Post/CommentReducer.js b/client/modules/Post/CommentReducer.js
index 63bd8a059..bf43fd658 100644
--- a/client/modules/Post/CommentReducer.js
+++ b/client/modules/Post/CommentReducer.js
@@ -16,9 +16,11 @@ const CommentReducer = (state = initialState, action) => {
   switch (action.type) {
     case ADD_COMMENTS:
       return { ...state, comments: action.comments };
+
     case ADD_COMMENT: {
       return { ...state, comments: [...state.comments, action.comment] };
     }
+
     case EDIT_COMMENT: {
       let index = state.comments.findIndex(comment => {
         if (comment.cuid === action.comment.cuid) {
@@ -54,4 +56,6 @@ const CommentReducer = (state = initialState, action) => {
 /* Selectors */
 
 // Get corresponding comments
-export const getComments = state => state.comments;
+export const getComments = state => state.comments.comments;
+
+export default CommentReducer;
diff --git a/client/modules/Post/components/Comments/CommentList.js b/client/modules/Post/components/Comments/CommentList.js
index 35d0bdc71..df4214abf 100644
--- a/client/modules/Post/components/Comments/CommentList.js
+++ b/client/modules/Post/components/Comments/CommentList.js
@@ -1,20 +1,36 @@
-import React, { PropTypes } from "react";
+import React, { PropTypes, Component } from "react";
+import { connect } from "react-redux";
 
 import CommentListItem from "./CommentListItem";
+import { deleteCommentRequest } from "../../CommentActions";
 
 import styles from "./CommentList.css";
 
-function CommentList(props) {
-  if (props.comments.length === 0) {
-    return null;
+class CommentList extends Component {
+  handleDeleteComment = cuid => {
+    if (confirm("Do you want to delete this post")) {
+      // eslint-disable-line
+      this.props.dispatch(deleteCommentRequest(cuid));
+    }
+  };
+
+  handleEditComment = comment => {
+    // handle edit
+  };
+  render() {
+    return (
+      <div className={styles["comment-view"]}>
+        {this.props.comments.map(comment => (
+          <CommentListItem
+            key={comment.cuid}
+            comment={comment}
+            handleDeleteComment={this.handleDeleteComment}
+            handleEditComment={this.handleEditComment}
+          />
+        ))}
+      </div>
+    );
   }
-  return (
-    <div className={styles["comment-view"]}>
-      {props.comments.map(comment => (
-        <CommentListItem key={comment.cuid} comment={comment} />
-      ))}
-    </div>
-  );
 }
 
 CommentList.propTypes = {
@@ -24,7 +40,8 @@ CommentList.propTypes = {
       body: PropTypes.string.isRequired,
       cuid: PropTypes.string.isRequired
     })
-  ).isRequired
+  ).isRequired,
+  dispatch: PropTypes.func.isRequired
 };
 
-export default CommentList;
+export default connect()(CommentList);
diff --git a/client/modules/Post/components/Comments/CommentListItem.js b/client/modules/Post/components/Comments/CommentListItem.js
index 6edb5918c..4607557fe 100644
--- a/client/modules/Post/components/Comments/CommentListItem.js
+++ b/client/modules/Post/components/Comments/CommentListItem.js
@@ -6,17 +6,10 @@ import styles from "./CommentListItem.css";
 class CommentListItem extends Component {
   editComment = () => {};
 
-  deleteComment = () => {
-    let confirmDelete = confirm(
-      "Are you sure you want to delete this comment?"
-    );
-    if (confirmDelete) {
-      // call api endpoint
-    }
-  };
+  deleteComment = () => {};
 
   render() {
-    const { author, body } = this.props.comment;
+    const { author, body, cuid } = this.props.comment;
     return (
       <div className={styles["single-comment"]}>
         <h3 className={styles["comment-author"]}>By {author}</h3>
@@ -24,13 +17,13 @@ class CommentListItem extends Component {
         <div className={styles["btn-group"]}>
           <button
             className={`${styles["btn"]} ${styles["edit-btn"]}`}
-            onClick={this.editComment}
+            onClick={() => this.props.handleEditComment(null)}
           >
             Edit comment
           </button>
           <button
             className={`${styles["btn"]} ${styles["delete-btn"]}`}
-            onClick={this.deleteComment}
+            onClick={() => this.props.handleDeleteComment(cuid)}
           >
             Delete comment
           </button>
@@ -45,7 +38,9 @@ CommentListItem.propTypes = {
     author: PropTypes.string.isRequired,
     body: PropTypes.string.isRequired,
     cuid: PropTypes.string.isRequired
-  }).isRequired
+  }).isRequired,
+  handleEditComment: PropTypes.func.isRequired,
+  handleDeleteComment: PropTypes.func.isRequired
 };
 
-export default CommentListItem;
+export default connect()(CommentListItem);
diff --git a/client/modules/Post/pages/PostDetailPage/PostDetailPage.js b/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
index d5bbafbb2..c6a532a25 100644
--- a/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
+++ b/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
@@ -17,33 +17,10 @@ import CommentCreateWidget from "../../components/Comments/CommentCreateWidget";
 import { getPost } from "../../PostReducer";
 import { getComments } from "../../CommentReducer";
 
-// test data, remove after implementing server side
-const comments = [
-  {
-    author: "Mr 1",
-    body:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi doloremque maxime quia excepturi autem ipsa reprehenderit.",
-    cuid: "1"
-  },
-  {
-    author: "Mr two",
-    body:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi doloremque maxime quia excepturi autem ipsa reprehenderit.",
-    cuid: "2"
-  },
-  {
-    author: "Mr 3(threeeeeeeee)",
-    body:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi doloremque maxime quia excepturi autem ipsa reprehenderit.",
-    cuid: "3"
-  }
-];
-/////// end
-
 export class PostDetailPage extends Component {
   componentDidMount() {
     // fetch comments
-    //this.props.dispatch(fetchComments());
+    this.props.dispatch(fetchComments(this.props.post.cuid));
   }
   render() {
     return (
@@ -56,7 +33,9 @@ export class PostDetailPage extends Component {
           </p>
           <p className={styles["post-desc"]}>{this.props.post.content}</p>
         </div>
-        <CommentList comments={comments} />
+        {this.props.comments ? (
+          <CommentList comments={this.props.comments} />
+        ) : null}
         <CommentCreateWidget />
       </div>
     );
@@ -88,7 +67,15 @@ PostDetailPage.propTypes = {
     content: PropTypes.string.isRequired,
     slug: PropTypes.string.isRequired,
     cuid: PropTypes.string.isRequired
-  }).isRequired
+  }).isRequired,
+  dispatch: PropTypes.func.isRequired,
+  comments: PropTypes.arrayOf(
+    PropTypes.shape({
+      author: PropTypes.string.isRequired,
+      cuid: PropTypes.string.isRequired,
+      body: PropTypes.string.isRequired
+    })
+  )
 };
 
 export default connect(mapStateToProps)(PostDetailPage);
diff --git a/server/controllers/comment.controller.js b/server/controllers/comment.controller.js
index e69de29bb..c40f1856a 100644
--- a/server/controllers/comment.controller.js
+++ b/server/controllers/comment.controller.js
@@ -0,0 +1,84 @@
+import Comment from "../models/comment";
+import Post from "../models/post";
+import cuid from "cuid";
+import sanitizeHtml from "sanitize-html";
+
+export function getComments(req, res) {
+  Post.findOne({ cuid: req.params.cuid }).exec((err, post) => {
+    if (err) {
+      res.status(500).send(err);
+    }
+    Comment.find({ owner: post._id }).exec((commentErr, comments) => {
+      if (commentErr) {
+        res.status(500).send(commentErr);
+      }
+      res.json({ comments });
+    });
+  });
+}
+
+export function addComment(req, res) {
+  if (!req.body.comment.author || !req.body.comment.body) {
+    res.status(403).end();
+  }
+
+  Post.findOne({ cuid: req.params.cuid }).exec((err, post) => {
+    if (err) {
+      res.status(500).send(err);
+    }
+
+    // probably remove
+    if (!post) {
+      res.status(400).end();
+    }
+
+    const newComment = new Comment(req.body.comment);
+
+    newComment.author = sanitizeHtml(newComment.author);
+    newComment.body = sanitizeHtml(newComment.body);
+    newComment.cuid = cuid();
+    newComment.owner = post;
+    newComment.save((err, saved) => {
+      if (err) {
+        res.status(500).send(err);
+      }
+      res.json({ comment: saved });
+    });
+  });
+}
+
+export function deleteComment(req, res) {
+  Comment.findOne({ cuid: req.params.cuid }).exec((err, comment) => {
+    if (err) {
+      res.status(500).send(err);
+    }
+
+    comment.remove(() => {
+      res.status(200).end();
+    });
+  });
+}
+
+export function updateComment(req, res) {
+  if (!req.body.comment.body) {
+    res.status(403).end();
+  }
+  Comment.findOne({ cuid: req.params.cuid }).exec((err, comment) => {
+    if (err) {
+      res.status(500).send(err);
+    }
+
+    if (!comment) {
+      res.status(400).end();
+    }
+    comment.body = sanitizeHtml(req.body.comment.body);
+
+    comment.save((saveErr, saved) => {
+      if (saveErr) {
+        res.status(500).send(saveErr);
+      }
+
+      res.json({ comment: saved });
+    });
+  });
+}
diff --git a/server/dummyData.js b/server/dummyData.js
index 7749aa13f..39f83da2c 100644
--- a/server/dummyData.js
+++ b/server/dummyData.js
@@ -1,6 +1,7 @@
-import Post from './models/post';
+import Post from "./models/post";
+import Comment from "./models/comment";
 
-export default function () {
+export default function() {
   Post.count().exec((err, count) => {
     if (count > 0) {
       return;
@@ -34,13 +35,52 @@ export default function () {
       qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem
       ipsum quia dolor sit amet.`;
 
-    const post1 = new Post({ name: 'Admin', title: 'Hello MERN', slug: 'hello-mern', cuid: 'cikqgkv4q01ck7453ualdn3hd', content: content1 });
-    const post2 = new Post({ name: 'Admin', title: 'Lorem Ipsum', slug: 'lorem-ipsum', cuid: 'cikqgkv4q01ck7453ualdn3hf', content: content2 });
+    const commentBody = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod ea nam laboriosam nemo porro, perferendis,
+       et ex non expedita consequuntur sint reiciendis est ipsum libero recusandae. Architecto, nisi facilis? Corporis?`;
 
-    Post.create([post1, post2], (error) => {
+    const post1 = new Post({
+      name: "Admin",
+      title: "Hello MERN",
+      slug: "hello-mern",
+      cuid: "cikqgkv4q01ck7453ualdn3hd",
+      content: content1
+    });
+    const post2 = new Post({
+      name: "Admin",
+      title: "Lorem Ipsum",
+      slug: "lorem-ipsum",
+      cuid: "cikqgkv4q01ck7453ualdn3hf",
+      content: content2
+    });
+
+    const comment1 = new Comment({
+      author: "Mr. 1",
+      body: commentBody,
+      owner: post1,
+      cuid: "gadkgjfdalkgjdflkgjhdfjgkh324234"
+    });
+    const comment2 = new Comment({
+      author: "Mr. Two",
+      body: commentBody,
+      owner: post1,
+      cuid: "gadkgjfdalkgjdflkgjhdfsdf6534"
+    });
+    const comment3 = new Comment({
+      author: "Mr. 3(threeee)",
+      body: commentBody,
+      owner: post1,
+      cuid: "gadkgjfsdsfdfsddalsdfsdfvbkgjhdfsdf6534"
+    });
+
+    Post.create([post1, post2], error => {
       if (!error) {
-        // console.log('ready to go....');
+        console.log("Successfully created 2 posts");
       }
+      Comment.create([comment1, comment2, comment3], commentError => {
+        if (!commentError) {
+          console.log("Successfully created 3 comments");
+        }
+      });
     });
   });
 }
diff --git a/server/routes/comment.routes.js b/server/routes/comment.routes.js
index 83eec1368..dea5f5480 100644
--- a/server/routes/comment.routes.js
+++ b/server/routes/comment.routes.js
@@ -5,12 +5,13 @@ const router = new Router();
 // Get all Comments
 router.route("/posts/:cuid/comments").get(CommentController.getComments);
 
-// Add a new Post
+// Add a new Comment
 router.route("/posts/:cuid/comments").post(CommentController.addComment);
 
-// Delete a post by cuid
-router
-  .route("/posts/:cuid/comments/:cuid")
-  .delete(CommentController.deleteComment);
+// Update a Comment
+router.route("/comments/:cuid").put(CommentController.updateComment);
+
+// Delete a comment by cuid
+router.route("/comments/:cuid").delete(CommentController.deleteComment);
 
 export default router;
diff --git a/server/server.js b/server/server.js
index 81b6c9eef..079878dbc 100644
--- a/server/server.js
+++ b/server/server.js
@@ -51,7 +51,6 @@ mongoose.connect(serverConfig.mongoURL, error => {
     console.error("Please make sure Mongodb is installed and running!"); // eslint-disable-line no-console
     throw error;
   }
-
   // feed some dummy data in DB.
   dummyData();
 });

From 50729625e4c5003ae694ca03ae57cbcbff48fe9b Mon Sep 17 00:00:00 2001
From: Diz00 <valkinvalero@gmail.com>
Date: Fri, 17 Nov 2017 11:59:00 +0200
Subject: [PATCH 7/9] implemented comment creation

---
 client/modules/Post/CommentActions.js         | 18 ++++++
 .../Comments/CommentCreateWidget.js           | 46 ++++++++++++---
 .../Post/components/Comments/CommentList.js   |  4 +-
 .../components/Comments/CommentListItem.js    | 58 +++++++++----------
 .../pages/PostDetailPage/PostDetailPage.js    |  6 +-
 5 files changed, 91 insertions(+), 41 deletions(-)

diff --git a/client/modules/Post/CommentActions.js b/client/modules/Post/CommentActions.js
index c46411f8a..12858ba28 100644
--- a/client/modules/Post/CommentActions.js
+++ b/client/modules/Post/CommentActions.js
@@ -36,3 +36,21 @@ export function deleteCommentRequest(cuid) {
     );
   };
 }
+
+export function addComment(comment) {
+  return {
+    type: ADD_COMMENT,
+    comment
+  };
+}
+
+export function addCommentRequest(comment, ownerId) {
+  return dispatch => {
+    return callApi(`posts/${ownerId}/comments`, "post", {
+      comment: {
+        author: comment.author,
+        body: comment.body
+      }
+    }).then(res => dispatch(addComment(res.comment)));
+  };
+}
diff --git a/client/modules/Post/components/Comments/CommentCreateWidget.js b/client/modules/Post/components/Comments/CommentCreateWidget.js
index fe97aee9d..f1a0692f9 100644
--- a/client/modules/Post/components/Comments/CommentCreateWidget.js
+++ b/client/modules/Post/components/Comments/CommentCreateWidget.js
@@ -1,41 +1,71 @@
-import React, { Component } from "react";
+import React, { Component, PropTypes } from "react";
 import { connect } from "react-redux";
 
 import styles from "./CommentCreateWidget.css";
+import { addCommentRequest } from "../../CommentActions";
 
 class CommentCreateWidget extends Component {
+  state = {
+    author: "",
+    body: ""
+  };
+
   createComment = e => {
     e.preventDefault();
-    alert("hey");
+    if (this.state.author && this.state.body) {
+      this.props.dispatch(
+        addCommentRequest(
+          { author: this.state.author, body: this.state.body },
+          this.props.ownerId
+        )
+      );
+      this.setState({ author: "", body: "" });
+    }
   };
+
   render() {
     return (
       <div className={styles["form"]}>
         <div className={styles["form-content"]}>
           <h2 className={styles["form-title"]}>Write a new comment</h2>
-          <input placeholder="Author" className={styles["form-field"]} />
+          <input
+            placeholder="Author"
+            className={styles["form-field"]}
+            value={this.state.author}
+            onChange={e => this.setState({ author: e.target.value })}
+          />
 
           <textarea
             placeholder="Write your comment here"
             className={styles["form-field"]}
+            value={this.state.body}
+            onChange={e => this.setState({ body: e.target.value })}
           />
           <a
             className={styles["post-submit-button"]}
             href="#"
             onClick={this.createComment}
           >
-            Save edit
+            Create
           </a>
         </div>
       </div>
     );
   }
-
-  componentWillUnmount() {
-    // clear edit component form
-  }
 }
 
+CommentCreateWidget.propTypes = {
+  ownerId: PropTypes.string.isRequired,
+  editComment: PropTypes.shape({
+    author: PropTypes.string.isRequired,
+    body: PropTypes.string.isRequired,
+    cuid: PropTypes.string.isRequired,
+    owner: PropTypes.string.isRequired,
+    dataAdded: PropTypes.instanceOf(Date)
+  }),
+  dispatch: PropTypes.func.isRequired
+};
+
 function mapStateToProps({ comments }) {
   return {
     editComment: comments.editComment
diff --git a/client/modules/Post/components/Comments/CommentList.js b/client/modules/Post/components/Comments/CommentList.js
index df4214abf..9505b4edd 100644
--- a/client/modules/Post/components/Comments/CommentList.js
+++ b/client/modules/Post/components/Comments/CommentList.js
@@ -14,9 +14,7 @@ class CommentList extends Component {
     }
   };
 
-  handleEditComment = comment => {
-    // handle edit
-  };
+  handleEditComment = comment => {};
   render() {
     return (
       <div className={styles["comment-view"]}>
diff --git a/client/modules/Post/components/Comments/CommentListItem.js b/client/modules/Post/components/Comments/CommentListItem.js
index 4607557fe..3d18c0420 100644
--- a/client/modules/Post/components/Comments/CommentListItem.js
+++ b/client/modules/Post/components/Comments/CommentListItem.js
@@ -1,36 +1,36 @@
-import React, { PropTypes, Component } from "react";
+import React, { PropTypes } from "react";
 import { connect } from "react-redux";
 
 import styles from "./CommentListItem.css";
 
-class CommentListItem extends Component {
-  editComment = () => {};
-
-  deleteComment = () => {};
-
-  render() {
-    const { author, body, cuid } = this.props.comment;
-    return (
-      <div className={styles["single-comment"]}>
-        <h3 className={styles["comment-author"]}>By {author}</h3>
-        <p className={styles["comment-body"]}>{body}</p>
-        <div className={styles["btn-group"]}>
-          <button
-            className={`${styles["btn"]} ${styles["edit-btn"]}`}
-            onClick={() => this.props.handleEditComment(null)}
-          >
-            Edit comment
-          </button>
-          <button
-            className={`${styles["btn"]} ${styles["delete-btn"]}`}
-            onClick={() => this.props.handleDeleteComment(cuid)}
-          >
-            Delete comment
-          </button>
-        </div>
+function CommentListItem(props) {
+  const {
+    author,
+    body,
+    cuid,
+    handleEditComment,
+    handleDeleteComment
+  } = props.comment;
+  return (
+    <div className={styles["single-comment"]}>
+      <h3 className={styles["comment-author"]}>By {author}</h3>
+      <p className={styles["comment-body"]}>{body}</p>
+      <div className={styles["btn-group"]}>
+        <button
+          className={`${styles["btn"]} ${styles["edit-btn"]}`}
+          onClick={() => handleEditComment(null)}
+        >
+          Edit comment
+        </button>
+        <button
+          className={`${styles["btn"]} ${styles["delete-btn"]}`}
+          onClick={() => handleDeleteComment(cuid)}
+        >
+          Delete comment
+        </button>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 CommentListItem.propTypes = {
@@ -43,4 +43,4 @@ CommentListItem.propTypes = {
   handleDeleteComment: PropTypes.func.isRequired
 };
 
-export default connect()(CommentListItem);
+export default CommentListItem;
diff --git a/client/modules/Post/pages/PostDetailPage/PostDetailPage.js b/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
index c6a532a25..f34f15728 100644
--- a/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
+++ b/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
@@ -36,10 +36,14 @@ export class PostDetailPage extends Component {
         {this.props.comments ? (
           <CommentList comments={this.props.comments} />
         ) : null}
-        <CommentCreateWidget />
+        <CommentCreateWidget ownerId={this.props.post.cuid} />
       </div>
     );
   }
+
+  componentWillUnmount() {
+    // clear edit component form
+  }
 }
 
 // Actions required to provide data for this component to render in sever side.

From 95312ed2160355a53d5a84b1cc9e844541d3048d Mon Sep 17 00:00:00 2001
From: Diz00 <valkinvalero@gmail.com>
Date: Fri, 17 Nov 2017 13:12:41 +0200
Subject: [PATCH 8/9] finished client comment operations and fixed comment
 controller bugs

---
 client/modules/Post/CommentActions.js         | 30 +++++++
 client/modules/Post/CommentReducer.js         |  2 +-
 .../Comments/CommentCreateWidget.css          | 17 +++-
 .../Comments/CommentCreateWidget.js           | 80 ++++++++++++++++++-
 .../Post/components/Comments/CommentList.js   |  6 +-
 .../components/Comments/CommentListItem.js    | 11 +--
 server/controllers/comment.controller.js      | 42 ++++++----
 7 files changed, 156 insertions(+), 32 deletions(-)

diff --git a/client/modules/Post/CommentActions.js b/client/modules/Post/CommentActions.js
index 12858ba28..a593154cd 100644
--- a/client/modules/Post/CommentActions.js
+++ b/client/modules/Post/CommentActions.js
@@ -54,3 +54,33 @@ export function addCommentRequest(comment, ownerId) {
     }).then(res => dispatch(addComment(res.comment)));
   };
 }
+
+export function enableEditMode(comment) {
+  return {
+    type: EDIT_COMMENT_MODE,
+    comment
+  };
+}
+
+export function cancelEditMode() {
+  return {
+    type: CANCEL_EDIT_COMMENT
+  };
+}
+
+export function saveEdit(comment) {
+  return {
+    type: EDIT_COMMENT,
+    comment
+  };
+}
+
+export function updateCommentRequest(commentBody, cuid) {
+  return dispatch => {
+    return callApi(`comments/${cuid}`, "put", {
+      comment: {
+        body: commentBody
+      }
+    }).then(res => dispatch(saveEdit(res.comment)));
+  };
+}
diff --git a/client/modules/Post/CommentReducer.js b/client/modules/Post/CommentReducer.js
index bf43fd658..c51f52c8a 100644
--- a/client/modules/Post/CommentReducer.js
+++ b/client/modules/Post/CommentReducer.js
@@ -40,7 +40,7 @@ const CommentReducer = (state = initialState, action) => {
       };
     }
     case EDIT_COMMENT_MODE:
-      return { ...state, editComment: action.cuid };
+      return { ...state, editComment: action.comment };
     case CANCEL_EDIT_COMMENT:
       return { ...state, editComment: null };
     case DELETE_COMMENT:
diff --git a/client/modules/Post/components/Comments/CommentCreateWidget.css b/client/modules/Post/components/Comments/CommentCreateWidget.css
index effce4ae6..02cd84e18 100644
--- a/client/modules/Post/components/Comments/CommentCreateWidget.css
+++ b/client/modules/Post/components/Comments/CommentCreateWidget.css
@@ -36,16 +36,31 @@ textarea {
   min-height: 200px;
 }
 
-.post-submit-button {
+.comment-cancel-button {
   display: inline-block;
   padding: 8px 16px;
   font-size: 18px;
   color: #fff;
+  background: #f4c842;
+  text-decoration: none;
+  border-radius: 4px;
+}
+
+.comment-submit-button {
+  display: inline-block;
+  padding: 8px 16px;
+  margin-right: 10px;
+  font-size: 18px;
+  color: #fff;
   background: #03a9f4;
   text-decoration: none;
   border-radius: 4px;
 }
 
+.comment-author {
+  margin-bottom: 20px;
+}
+
 .appear {
   display: block;
 }
diff --git a/client/modules/Post/components/Comments/CommentCreateWidget.js b/client/modules/Post/components/Comments/CommentCreateWidget.js
index f1a0692f9..2a8658c20 100644
--- a/client/modules/Post/components/Comments/CommentCreateWidget.js
+++ b/client/modules/Post/components/Comments/CommentCreateWidget.js
@@ -2,7 +2,11 @@ import React, { Component, PropTypes } from "react";
 import { connect } from "react-redux";
 
 import styles from "./CommentCreateWidget.css";
-import { addCommentRequest } from "../../CommentActions";
+import {
+  addCommentRequest,
+  cancelEditMode,
+  updateCommentRequest
+} from "../../CommentActions";
 
 class CommentCreateWidget extends Component {
   state = {
@@ -10,6 +14,15 @@ class CommentCreateWidget extends Component {
     body: ""
   };
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.editComment) {
+      this.setState({
+        author: nextProps.editComment.author,
+        body: nextProps.editComment.body
+      });
+    }
+  }
+
   createComment = e => {
     e.preventDefault();
     if (this.state.author && this.state.body) {
@@ -23,7 +36,29 @@ class CommentCreateWidget extends Component {
     }
   };
 
-  render() {
+  saveEditComment = e => {
+    e.preventDefault();
+    if (!this.state.body) {
+      return;
+    }
+    if (this.props.editComment.body === this.state.body) {
+      this.cancelEditComment(e);
+      return;
+    }
+
+    this.props.dispatch(
+      updateCommentRequest(this.state.body, this.props.editComment.cuid)
+    );
+    this.cancelEditComment(e);
+  };
+
+  cancelEditComment = e => {
+    e.preventDefault();
+    this.props.dispatch(cancelEditMode());
+    this.setState({ author: "", body: "" });
+  };
+
+  renderCreateForm() {
     return (
       <div className={styles["form"]}>
         <div className={styles["form-content"]}>
@@ -42,7 +77,7 @@ class CommentCreateWidget extends Component {
             onChange={e => this.setState({ body: e.target.value })}
           />
           <a
-            className={styles["post-submit-button"]}
+            className={styles["comment-submit-button"]}
             href="#"
             onClick={this.createComment}
           >
@@ -52,6 +87,45 @@ class CommentCreateWidget extends Component {
       </div>
     );
   }
+
+  renderEditForm = () => {
+    return (
+      <div className={styles["form"]}>
+        <div className={styles["form-content"]}>
+          <h2 className={styles["form-title"]}>Edit existing comment</h2>
+          <h3 className={styles["comment-author"]}>By {this.state.author}</h3>
+
+          <textarea
+            placeholder="Write your comment here"
+            className={styles["form-field"]}
+            value={this.state.body}
+            onChange={e => this.setState({ body: e.target.value })}
+          />
+          <a
+            className={styles["comment-submit-button"]}
+            href="#"
+            onClick={this.saveEditComment}
+          >
+            Save Edit
+          </a>
+          <a
+            className={styles["comment-cancel-button"]}
+            href="#"
+            onClick={this.cancelEditComment}
+          >
+            Cancel
+          </a>
+        </div>
+      </div>
+    );
+  };
+
+  render() {
+    if (this.props.editComment) {
+      return this.renderEditForm();
+    }
+    return this.renderCreateForm();
+  }
 }
 
 CommentCreateWidget.propTypes = {
diff --git a/client/modules/Post/components/Comments/CommentList.js b/client/modules/Post/components/Comments/CommentList.js
index 9505b4edd..828ecf1a1 100644
--- a/client/modules/Post/components/Comments/CommentList.js
+++ b/client/modules/Post/components/Comments/CommentList.js
@@ -2,7 +2,7 @@ import React, { PropTypes, Component } from "react";
 import { connect } from "react-redux";
 
 import CommentListItem from "./CommentListItem";
-import { deleteCommentRequest } from "../../CommentActions";
+import { deleteCommentRequest, enableEditMode } from "../../CommentActions";
 
 import styles from "./CommentList.css";
 
@@ -14,7 +14,9 @@ class CommentList extends Component {
     }
   };
 
-  handleEditComment = comment => {};
+  handleEditComment = comment => {
+    this.props.dispatch(enableEditMode(comment));
+  };
   render() {
     return (
       <div className={styles["comment-view"]}>
diff --git a/client/modules/Post/components/Comments/CommentListItem.js b/client/modules/Post/components/Comments/CommentListItem.js
index 3d18c0420..b6464a371 100644
--- a/client/modules/Post/components/Comments/CommentListItem.js
+++ b/client/modules/Post/components/Comments/CommentListItem.js
@@ -4,13 +4,8 @@ import { connect } from "react-redux";
 import styles from "./CommentListItem.css";
 
 function CommentListItem(props) {
-  const {
-    author,
-    body,
-    cuid,
-    handleEditComment,
-    handleDeleteComment
-  } = props.comment;
+  const { author, body, cuid } = props.comment;
+  const { handleEditComment, handleDeleteComment } = props;
   return (
     <div className={styles["single-comment"]}>
       <h3 className={styles["comment-author"]}>By {author}</h3>
@@ -18,7 +13,7 @@ function CommentListItem(props) {
       <div className={styles["btn-group"]}>
         <button
           className={`${styles["btn"]} ${styles["edit-btn"]}`}
-          onClick={() => handleEditComment(null)}
+          onClick={() => handleEditComment(props.comment)}
         >
           Edit comment
         </button>
diff --git a/server/controllers/comment.controller.js b/server/controllers/comment.controller.js
index c40f1856a..fe270a2f5 100644
--- a/server/controllers/comment.controller.js
+++ b/server/controllers/comment.controller.js
@@ -6,30 +6,34 @@ import sanitizeHtml from "sanitize-html";
 export function getComments(req, res) {
   Post.findOne({ cuid: req.params.cuid }).exec((err, post) => {
     if (err) {
-      res.status(500).send(err);
+      return res.status(500).send(err);
     }
+
+    if (!post) {
+      return res.status(400).end();
+    }
+
     Comment.find({ owner: post._id }).exec((commentErr, comments) => {
       if (commentErr) {
-        res.status(500).send(commentErr);
+        return res.status(500).send(commentErr);
       }
-      res.json({ comments });
+      return res.json({ comments });
     });
   });
 }
 
 export function addComment(req, res) {
-  if (!req.body.comment.author || !req.body.comment.body) {
-    res.status(403).end();
+  if (!req.body.comment || !req.body.comment.author || !req.body.comment.body) {
+    return res.status(403).end();
   }
 
   Post.findOne({ cuid: req.params.cuid }).exec((err, post) => {
     if (err) {
-      res.status(500).send(err);
+      return res.status(500).send(err);
     }
 
-    // probably remove
     if (!post) {
-      res.status(400).end();
+      return res.status(400).end();
     }
 
     const newComment = new Comment(req.body.comment);
@@ -40,9 +44,9 @@ export function addComment(req, res) {
     newComment.owner = post;
     newComment.save((err, saved) => {
       if (err) {
-        res.status(500).send(err);
+        return res.status(500).send(err);
       }
-      res.json({ comment: saved });
+      return res.json({ comment: saved });
     });
   });
 }
@@ -50,32 +54,36 @@ export function addComment(req, res) {
 export function deleteComment(req, res) {
   Comment.findOne({ cuid: req.params.cuid }).exec((err, comment) => {
     if (err) {
-      res.status(500).send(err);
+      return res.status(500).send(err);
+    }
+
+    if (!comment) {
+      return res.status(400).end();
     }
 
     comment.remove(() => {
-      res.status(200).end();
+      return res.status(200).end();
     });
   });
 }
 
 export function updateComment(req, res) {
-  if (!req.body.comment.body) {
-    res.status(403).end();
+  if (!req.body.comment || !req.body.comment.body) {
+    return res.status(403).end();
   }
   Comment.findOne({ cuid: req.params.cuid }).exec((err, comment) => {
     if (err) {
-      res.status(500).send(err);
+      return res.status(500).send(err);
     }
 
     if (!comment) {
-      res.status(400).end();
+      return res.status(400).end();
     }
     comment.body = sanitizeHtml(req.body.comment.body);
 
     comment.save((saveErr, saved) => {
       if (saveErr) {
-        res.status(500).send(saveErr);
+        return res.status(500).send(saveErr);
       }
 
       res.json({ comment: saved });

From e2740167e0d7b79266b7e30e7cb33b018f977fbc Mon Sep 17 00:00:00 2001
From: Diz00 <valkinvalero@gmail.com>
Date: Fri, 17 Nov 2017 13:18:52 +0200
Subject: [PATCH 9/9] added clear comment functionality on navigating off post
 details page

---
 client/modules/Post/CommentActions.js                      | 7 +++++++
 client/modules/Post/CommentReducer.js                      | 5 ++++-
 client/modules/Post/pages/PostDetailPage/PostDetailPage.js | 5 +++--
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/client/modules/Post/CommentActions.js b/client/modules/Post/CommentActions.js
index a593154cd..b585dc192 100644
--- a/client/modules/Post/CommentActions.js
+++ b/client/modules/Post/CommentActions.js
@@ -6,6 +6,7 @@ export const EDIT_COMMENT = "EDIT_COMMENT";
 export const EDIT_COMMENT_MODE = "EDIT_COMMENT_MODE";
 export const DELETE_COMMENT = "DELETE_COMMENT";
 export const CANCEL_EDIT_COMMENT = "CANCEL_EDIT_COMMENT";
+export const CLEAR_COMMENTS = "CLEAR_COMMENTS";
 
 export function addComments(comments) {
   return {
@@ -84,3 +85,9 @@ export function updateCommentRequest(commentBody, cuid) {
     }).then(res => dispatch(saveEdit(res.comment)));
   };
 }
+
+export function clearComments() {
+  return {
+    type: CLEAR_COMMENTS
+  };
+}
diff --git a/client/modules/Post/CommentReducer.js b/client/modules/Post/CommentReducer.js
index c51f52c8a..fafc6d0ad 100644
--- a/client/modules/Post/CommentReducer.js
+++ b/client/modules/Post/CommentReducer.js
@@ -4,7 +4,8 @@ import {
   EDIT_COMMENT,
   EDIT_COMMENT_MODE,
   CANCEL_EDIT_COMMENT,
-  DELETE_COMMENT
+  DELETE_COMMENT,
+  CLEAR_COMMENTS
 } from "./CommentActions";
 
 const initialState = {
@@ -48,6 +49,8 @@ const CommentReducer = (state = initialState, action) => {
         editComment: null,
         comments: state.comments.filter(comment => comment.cuid !== action.cuid)
       };
+    case CLEAR_COMMENTS:
+      return initialState;
     default:
       return state;
   }
diff --git a/client/modules/Post/pages/PostDetailPage/PostDetailPage.js b/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
index f34f15728..293ddc5c4 100644
--- a/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
+++ b/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
@@ -8,7 +8,7 @@ import styles from "../../components/PostListItem/PostListItem.css";
 
 // Import Actions
 import { fetchPost } from "../../PostActions";
-import { fetchComments } from "../../CommentActions";
+import { fetchComments, clearComments } from "../../CommentActions";
 
 import CommentList from "../../components/Comments/CommentList";
 import CommentCreateWidget from "../../components/Comments/CommentCreateWidget";
@@ -42,7 +42,8 @@ export class PostDetailPage extends Component {
   }
 
   componentWillUnmount() {
-    // clear edit component form
+    // clear comment
+    this.props.dispatch(clearComments());
   }
 }