From 873dfa4ae8da56e050974d54f555fbf1558eba0e Mon Sep 17 00:00:00 2001
From: Victor Gonchar <crook0309@gmail.com>
Date: Sat, 2 Feb 2019 23:45:02 +0200
Subject: [PATCH] 'add comments without css'

---
 .eslintrc                                     |  2 +-
 Intl/localizationData/en.js                   |  5 ++
 Intl/localizationData/fr.js                   |  5 ++
 client/modules/App/App.js                     |  2 +-
 client/modules/App/AppActions.js              |  7 ++
 client/modules/App/AppReducer.js              | 13 +++-
 client/modules/Post/CommentActions.js         | 18 ++++++
 .../modules/Post/CommentEdit/CommentEdit.css  | 59 +++++++++++++++++
 .../modules/Post/CommentEdit/CommentEdit.js   | 62 ++++++++++++++++++
 client/modules/Post/CommentReducer.js         | 34 ++++++++++
 client/modules/Post/PostReducer.js            |  3 +-
 .../CommentCreate/CommentCreate.css           | 52 +++++++++++++++
 .../components/CommentCreate/CommentCreate.js | 64 +++++++++++++++++++
 client/modules/Post/components/CommentList.js | 32 ++++++++++
 .../CommentListItem/CommentListItem.css       | 62 ++++++++++++++++++
 .../CommentListItem/CommentListItem.js        | 49 ++++++++++++++
 client/modules/Post/components/PostList.js    |  3 +
 .../components/PostListItem/PostListItem.js   | 10 +++
 .../pages/PostDetailPage/PostDetailPage.js    |  1 +
 client/reducers.js                            |  2 +
 package-lock.json                             | 41 ++++++++----
 server/controllers/post.controller.js         |  3 +-
 server/dummyData.js                           |  4 +-
 23 files changed, 512 insertions(+), 21 deletions(-)
 create mode 100644 client/modules/Post/CommentActions.js
 create mode 100644 client/modules/Post/CommentEdit/CommentEdit.css
 create mode 100644 client/modules/Post/CommentEdit/CommentEdit.js
 create mode 100644 client/modules/Post/CommentReducer.js
 create mode 100644 client/modules/Post/components/CommentCreate/CommentCreate.css
 create mode 100644 client/modules/Post/components/CommentCreate/CommentCreate.js
 create mode 100644 client/modules/Post/components/CommentList.js
 create mode 100644 client/modules/Post/components/CommentListItem/CommentListItem.css
 create mode 100644 client/modules/Post/components/CommentListItem/CommentListItem.js

diff --git a/.eslintrc b/.eslintrc
index 1e68f4e8c..c8f3bae20 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -22,7 +22,7 @@
      "no-underscore-dangle" : 0,
      "max-len": [1, 180, 4],
      "arrow-body-style": [0],
-     "react/jsx-no-bind": [0],
+     "react/prefer-stateless-function": "off",
      "import/no-unresolved": [0] // Until import plugin supports webpack 2 resolveModules
   }
 }
diff --git a/Intl/localizationData/en.js b/Intl/localizationData/en.js
index 79b481d3c..6d94766eb 100644
--- a/Intl/localizationData/en.js
+++ b/Intl/localizationData/en.js
@@ -7,6 +7,11 @@ export default {
     twitterMessage: 'We are on Twitter',
     by: 'By',
     deletePost: 'Delete Post',
+    deleteComment:'Delete Comment',
+    addComment: 'Add Comment',
+    editComment: 'Edit Comment',
+    createComment: 'Create comment',
+    commentContent: 'Comment Content', 
     createNewPost: 'Create new post',
     authorName: 'Author\'s Name',
     postTitle: 'Post Title',
diff --git a/Intl/localizationData/fr.js b/Intl/localizationData/fr.js
index 7e5b81b3f..14d83105b 100644
--- a/Intl/localizationData/fr.js
+++ b/Intl/localizationData/fr.js
@@ -7,6 +7,11 @@ export default {
     twitterMessage: 'Nous sommes sur Twitter',
     by: 'Par',
     deletePost: 'Supprimer le message',
+    deleteComment: 'Supprimer le commentaire',
+    addComment: 'Ajouter un commentaire',
+    editComment: 'Modifier le commentaire',
+    createComment: 'Créer un commentaire',
+    commentContent: 'Comment Content',
     createNewPost: 'Créer un nouveau message',
     authorName: 'Nom de l\'auteur',
     postTitle: 'Titre de l\'article',
diff --git a/client/modules/App/App.js b/client/modules/App/App.js
index 269df3d08..40cf5fbc5 100644
--- a/client/modules/App/App.js
+++ b/client/modules/App/App.js
@@ -32,7 +32,7 @@ export class App extends Component {
 
   toggleAddPostSection = () => {
     this.props.dispatch(toggleAddPost());
-  };
+  }
 
   render() {
     return (
diff --git a/client/modules/App/AppActions.js b/client/modules/App/AppActions.js
index d4b7020a3..80594bb1f 100644
--- a/client/modules/App/AppActions.js
+++ b/client/modules/App/AppActions.js
@@ -1,5 +1,6 @@
 // Export Constants
 export const TOGGLE_ADD_POST = 'TOGGLE_ADD_POST';
+export const TOGGLE_ADD_COMMENT = 'TOGGLE_ADD_COMMENT';
 
 // Export Actions
 export function toggleAddPost() {
@@ -7,3 +8,9 @@ export function toggleAddPost() {
     type: TOGGLE_ADD_POST,
   };
 }
+
+export function toggleAddComment() {
+  return {
+    type: TOGGLE_ADD_COMMENT,
+  };
+}
diff --git a/client/modules/App/AppReducer.js b/client/modules/App/AppReducer.js
index ed3cf4827..295a9e46c 100644
--- a/client/modules/App/AppReducer.js
+++ b/client/modules/App/AppReducer.js
@@ -1,9 +1,10 @@
 // Import Actions
-import { TOGGLE_ADD_POST } from './AppActions';
+import { TOGGLE_ADD_POST, TOGGLE_ADD_COMMENT } from './AppActions';
 
 // Initial State
 const initialState = {
   showAddPost: false,
+  showAddComment: false,
 };
 
 const AppReducer = (state = initialState, action) => {
@@ -11,8 +12,13 @@ const AppReducer = (state = initialState, action) => {
     case TOGGLE_ADD_POST:
       return {
         showAddPost: !state.showAddPost,
+        showAddComment: state.showAddComment,
+      };
+    case TOGGLE_ADD_COMMENT:
+      return {
+        showAddPost: state.showAddPost,
+        showAddComment: !state.showAddComment,
       };
-
     default:
       return state;
   }
@@ -22,6 +28,7 @@ const AppReducer = (state = initialState, action) => {
 
 // Get showAddPost
 export const getShowAddPost = state => state.app.showAddPost;
-
+// Get showAddComment
+export const getShowAddComment = state => state.app.showAddComment;
 // Export Reducer
 export default AppReducer;
diff --git a/client/modules/Post/CommentActions.js b/client/modules/Post/CommentActions.js
new file mode 100644
index 000000000..c1c5165cf
--- /dev/null
+++ b/client/modules/Post/CommentActions.js
@@ -0,0 +1,18 @@
+// Export Constants
+export const ADD_COMMENT = 'ADD_COMMENT';
+export const DELETE_COMMENT = 'DELETE_COMMENT';
+
+// Export Actions
+export function addComment(comment) {
+  return {
+    type: ADD_COMMENT,
+    comment,
+  };
+}
+
+export function deleteComment(commentId) {
+  return {
+    type: DELETE_COMMENT,
+    commentId,
+  };
+}
diff --git a/client/modules/Post/CommentEdit/CommentEdit.css b/client/modules/Post/CommentEdit/CommentEdit.css
new file mode 100644
index 000000000..781d2a26a
--- /dev/null
+++ b/client/modules/Post/CommentEdit/CommentEdit.css
@@ -0,0 +1,59 @@
+.form {
+  display: none;
+  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;
+}
+
+.comment-edit {
+  color: #555;
+  text-decoration: none;
+  font-size: 14px;
+  font-style: italic;
+}
\ No newline at end of file
diff --git a/client/modules/Post/CommentEdit/CommentEdit.js b/client/modules/Post/CommentEdit/CommentEdit.js
new file mode 100644
index 000000000..8b40f3975
--- /dev/null
+++ b/client/modules/Post/CommentEdit/CommentEdit.js
@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+import { addComment, deleteComment } from '../CommentActions';
+import { toggleAddComment } from '../../App/AppActions';
+
+// Import Style
+import styles from './CommentEdit.css';
+
+export class CommentEditA extends Component {
+  editComment() {
+    this.props.toggleAddComment();
+    const nameRef = this.refs.name;
+    const contentRef = this.refs.content;
+    if (nameRef.value && contentRef.value && this.props.comment.commentId) {
+      const comment = { postId: this.props.comment.postId, name: nameRef.value, content: contentRef.value, commentId: this.props.comment.commentId };
+      this.props.deleteComment(this.props.comment.commentId);
+      this.props.addComment(comment);
+      nameRef.value = contentRef.value = '';
+    }
+  }
+
+  render() {
+    const cls = `${styles.form} ${(this.props.showAddComment ? styles.appear : '')}`;
+    if (this.props.showAddComment) {
+      this.refs.name.value = this.props.comment.name;
+      this.refs.content.value = this.props.comment.content;
+    }
+    return (
+      <div>
+        <div className={cls}>
+          <div className={styles['form-content']}>
+            <h2 className={styles['form-title']}><FormattedMessage id="editComment" /></h2>
+            <input className={styles['form-field']} ref="name" />
+            <textarea className={styles['form-field']} ref="content" />
+            <a className={styles['post-submit-button']} href="#" onClick={this.editComment()}><FormattedMessage id="submit" /></a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+CommentEditA.propTypes = {
+  comment: PropTypes.shape({
+    postId: PropTypes.string.isRequired,
+    commentId: PropTypes.number.isRequired,
+    content: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+  }).isRequired,
+  toggleAddComment: PropTypes.func.isRequired,
+  deleteComment: PropTypes.func.isRequired,
+  addComment: PropTypes.func.isRequired,
+  showAddComment: PropTypes.bool.isRequired,
+};
+
+
+const mapStateToProps = state => ({ showAddComment: state.app.showAddComment, messages: state.intl.messages });
+const mapDispatchToProps = { addComment, deleteComment, toggleAddComment };
+const CommentEdit = connect(mapStateToProps, mapDispatchToProps)(CommentEditA);
+export default CommentEdit;
diff --git a/client/modules/Post/CommentReducer.js b/client/modules/Post/CommentReducer.js
new file mode 100644
index 000000000..8b56e2945
--- /dev/null
+++ b/client/modules/Post/CommentReducer.js
@@ -0,0 +1,34 @@
+import { ADD_COMMENT, DELETE_COMMENT } from './CommentActions';
+
+// Initial State
+const initialState = { data: [] };
+
+const CommentReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case ADD_COMMENT :
+      return {
+        data: [action.comment, ...state.data],
+      };
+
+
+    case DELETE_COMMENT :
+
+      return {
+        data: state.data.filter(comment => comment.commentId !== action.commentId),
+      };
+
+    default:
+      return state;
+  }
+};
+
+/* Selectors */
+
+// Get all posts
+export const getComments = state => state.comments.data;
+
+// Get comment by cuid
+export const getComment = (state, cuid) => state.posts.data.filter(comment => comment.cuid === cuid)[0];
+
+// Export Reducer
+export default CommentReducer;
diff --git a/client/modules/Post/PostReducer.js b/client/modules/Post/PostReducer.js
index 5a5054369..806c5a07f 100644
--- a/client/modules/Post/PostReducer.js
+++ b/client/modules/Post/PostReducer.js
@@ -1,7 +1,7 @@
 import { ADD_POST, ADD_POSTS, DELETE_POST } from './PostActions';
 
 // Initial State
-const initialState = { data: [] };
+const initialState = { data: [], comments: [] };
 
 const PostReducer = (state = initialState, action) => {
   switch (action.type) {
@@ -19,7 +19,6 @@ const PostReducer = (state = initialState, action) => {
       return {
         data: state.data.filter(post => post.cuid !== action.cuid),
       };
-
     default:
       return state;
   }
diff --git a/client/modules/Post/components/CommentCreate/CommentCreate.css b/client/modules/Post/components/CommentCreate/CommentCreate.css
new file mode 100644
index 000000000..4ef44dfd2
--- /dev/null
+++ b/client/modules/Post/components/CommentCreate/CommentCreate.css
@@ -0,0 +1,52 @@
+.form {
+  display: none;
+  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;
+}
\ No newline at end of file
diff --git a/client/modules/Post/components/CommentCreate/CommentCreate.js b/client/modules/Post/components/CommentCreate/CommentCreate.js
new file mode 100644
index 000000000..94772e419
--- /dev/null
+++ b/client/modules/Post/components/CommentCreate/CommentCreate.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { addComment } from '../../CommentActions';
+
+
+// Import Style
+import styles from './CommentCreate.css';
+
+export class CommentCreateA extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      show: false,
+    };
+  }
+  changeShowBtn() {
+    this.setState({ show: true });
+  }
+  addComment() {
+    this.setState({ show: false });
+    const nameRef = this.refs.name;
+    const contentRef = this.refs.content;
+    if (nameRef.value && contentRef.value && this.props.postId) {
+      const comment = { postId: this.props.postId, name: nameRef.value, content: contentRef.value, commentId: Math.random() };
+      this.props.addComment(comment);
+      nameRef.value = contentRef.value = '';
+    }
+  }
+
+  render() {
+    const cls = `${styles.form} ${(this.state.show ? styles.appear : '')}`;
+    const viceVersa = `${styles.form} ${(!this.state.show ? styles.appear : '')}`;
+    return (
+      <div>
+        <div className={viceVersa}>
+          <a className={styles['add-post-button']} href="#" onClick={this.changeShowBtn()}><FormattedMessage id="addComment" /></a>
+        </div>
+        <div className={cls}>
+          <div className={styles['form-content']}>
+            <h2 className={styles['form-title']}><FormattedMessage id="createComment" /></h2>
+            <input placeholder={this.props.messages.authorName} className={styles['form-field']} ref="name" />
+            <textarea placeholder={this.props.messages.commentContent} className={styles['form-field']} ref="content" />
+            <a className={styles['post-submit-button']} href="#" onClick={this.addComment()}><FormattedMessage id="submit" /></a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+CommentCreateA.propTypes = {
+  postId: PropTypes.string.isRequired,
+  messages: PropTypes.shape({
+    authorName: PropTypes.string.isRequired,
+    commentContent: PropTypes.string.isRequired,
+  }).isRequired,
+  addComment: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = state => ({ messages: state.intl.messages });
+const mapDispatchToProps = { addComment };
+const CommentCreate = connect(mapStateToProps, mapDispatchToProps)(CommentCreateA);
+export default CommentCreate;
diff --git a/client/modules/Post/components/CommentList.js b/client/modules/Post/components/CommentList.js
new file mode 100644
index 000000000..843f716bf
--- /dev/null
+++ b/client/modules/Post/components/CommentList.js
@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+// Import Components
+import CommentListItem from './CommentListItem/CommentListItem';
+
+export class CommentListA extends Component {
+  render() {
+    const commentPost = this.props.comments.filter(comment => this.props.postId === comment.postId);
+    return (
+      <div className="listView">
+        {
+          commentPost.map(comment => (
+            <CommentListItem
+              comment={comment}
+              key={comment.commentId}
+            />
+          ))
+        }
+      </div>
+    );
+  }
+}
+CommentListA.propTypes = {
+  postId: PropTypes.string.isRequired,
+  comments: PropTypes.array,
+};
+
+const mapStateToProps = state => ({ comments: state.comments.data });
+const mapDispatchToProps = {};
+const CommentList = connect(mapStateToProps, mapDispatchToProps)(CommentListA);
+export default CommentList;
diff --git a/client/modules/Post/components/CommentListItem/CommentListItem.css b/client/modules/Post/components/CommentListItem/CommentListItem.css
new file mode 100644
index 000000000..0ac192707
--- /dev/null
+++ b/client/modules/Post/components/CommentListItem/CommentListItem.css
@@ -0,0 +1,62 @@
+.single-comment {
+  margin: 20px 0;
+  padding: 15px;
+  border-radius: 2px;
+}
+
+.comment-title{
+  font-size: 28px;
+  margin-bottom: 16px;
+  font-weight: 400;
+  color: #616161;
+}
+
+.comment-title a{
+  text-decoration: none;
+  color: #616161;
+}
+
+.author-name{
+  font-size: 16px;
+  margin-bottom: 16px;
+  color: #757575;
+}
+
+.comment-desc{
+  font-size: 14px;
+  color: #888;
+  margin-bottom: 8px;
+}
+
+.comment-action a{
+  color: #555;
+  text-decoration: none;
+  font-size: 14px;
+  font-style: italic;
+}
+
+.comment-action a:hover{
+  color: #EF5350;
+}
+
+.divider{
+  border: 0;
+  height: 1px;
+  background: #ccc;
+  width: 250px;
+  margin: 32px auto 0;
+}
+
+.comment-detail .comment-title{
+  font-size: 42px;
+  color: #454545;
+}
+
+.comment-detail .comment-desc{
+  font-size: 16px;
+  color: #555;
+}
+
+.appear {
+  display: block;
+}
diff --git a/client/modules/Post/components/CommentListItem/CommentListItem.js b/client/modules/Post/components/CommentListItem/CommentListItem.js
new file mode 100644
index 000000000..a3ef18c5b
--- /dev/null
+++ b/client/modules/Post/components/CommentListItem/CommentListItem.js
@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+import { deleteComment } from '../../CommentActions';
+import { toggleAddComment } from '../../../App/AppActions';
+import CommentEdit from '../../CommentEdit/CommentEdit';
+
+// Import Style
+import styles from './CommentListItem.css';
+
+export class CommentListItemA extends Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+  }
+  handleDeleteComment() {
+    if (confirm('Do you want to delete this comment')) { this.props.deleteComment(this.props.comment.commentId); }
+  }
+  handlechangeShowBtnt() { this.props.toggleAddComment(); }
+
+  render() {
+    return (
+      <div className={styles['single-comment']}>
+        <hr className={styles.divider} />
+        <p className={styles['author-name']}><FormattedMessage id="by" />{this.props.comment.name}</p>
+        <p className={styles['comment-desc']}>{this.props.comment.content}</p>
+        <p className={styles['comment-action']}><a href="#" onClick={this.handleDeleteComment()}><FormattedMessage id="deleteComment" /></a></p>
+        <p className={styles['comment-action']}><a href="#" onClick={this.handlechangeShowBtnt()}><FormattedMessage id="editComment" /></a></p>
+        <CommentEdit comment={this.props.comment} />
+      </div>
+		);
+  }
+}
+CommentListItemA.propTypes = {
+  comment: PropTypes.shape({
+    content: PropTypes.string.isRequired,
+    commentId: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+  }).isRequired,
+  toggleAddComment: PropTypes.func.isRequired,
+  deleteComment: PropTypes.func.isRequired,
+};
+
+
+const mapStateToProps = state => ({ showAddComment: state.app.showAddComment, messages: state.intl.messages });
+const mapDispatchToProps = { deleteComment, toggleAddComment };
+const CommentListItem = connect(mapStateToProps, mapDispatchToProps)(CommentListItemA);
+export default CommentListItem;
diff --git a/client/modules/Post/components/PostList.js b/client/modules/Post/components/PostList.js
index 6719b3124..ae311d049 100644
--- a/client/modules/Post/components/PostList.js
+++ b/client/modules/Post/components/PostList.js
@@ -4,6 +4,9 @@ import PropTypes from 'prop-types';
 // Import Components
 import PostListItem from './PostListItem/PostListItem';
 
+// Import Actions
+
+
 function PostList(props) {
   return (
     <div className="listView">
diff --git a/client/modules/Post/components/PostListItem/PostListItem.js b/client/modules/Post/components/PostListItem/PostListItem.js
index 2925e2199..1b6b822be 100644
--- a/client/modules/Post/components/PostListItem/PostListItem.js
+++ b/client/modules/Post/components/PostListItem/PostListItem.js
@@ -6,6 +6,11 @@ import { FormattedMessage } from 'react-intl';
 // Import Style
 import styles from './PostListItem.css';
 
+// Import Component
+import CommentCreate from '../CommentCreate/CommentCreate';
+import CommentList from '../CommentList';
+
+
 function PostListItem(props) {
   return (
     <div className={styles['single-post']}>
@@ -18,10 +23,14 @@ function PostListItem(props) {
       <p className={styles['post-desc']}>{props.post.content}</p>
       <p className={styles['post-action']}><a href="#" onClick={props.onDelete}><FormattedMessage id="deletePost" /></a></p>
       <hr className={styles.divider} />
+      <CommentCreate postId={props.post._id} />
+      <CommentList postId={props.post._id} />
+      <hr className={styles.divider} />
     </div>
   );
 }
 
+
 PostListItem.propTypes = {
   post: PropTypes.shape({
     name: PropTypes.string.isRequired,
@@ -29,6 +38,7 @@ PostListItem.propTypes = {
     content: PropTypes.string.isRequired,
     slug: PropTypes.string.isRequired,
     cuid: PropTypes.string.isRequired,
+    _id: PropTypes.string.isRequired,
   }).isRequired,
   onDelete: PropTypes.func.isRequired,
 };
diff --git a/client/modules/Post/pages/PostDetailPage/PostDetailPage.js b/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
index 32c1e1c11..f43d6f764 100644
--- a/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
+++ b/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
@@ -22,6 +22,7 @@ export function PostDetailPage(props) {
         <p className={styles['author-name']}><FormattedMessage id="by" /> {props.post.name}</p>
         <p className={styles['post-desc']}>{props.post.content}</p>
       </div>
+
     </div>
   );
 }
diff --git a/client/reducers.js b/client/reducers.js
index 2aa143142..1d66c4464 100644
--- a/client/reducers.js
+++ b/client/reducers.js
@@ -6,11 +6,13 @@ import { combineReducers } from 'redux';
 // Import Reducers
 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,
+  comments,
   intl,
 });
diff --git a/package-lock.json b/package-lock.json
index 14a36b319..a32f76f30 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4840,7 +4840,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4861,12 +4862,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4881,17 +4884,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5008,7 +5014,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5020,6 +5027,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5034,6 +5042,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5041,12 +5050,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5065,6 +5076,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5145,7 +5157,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5157,6 +5170,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5242,7 +5256,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5278,6 +5293,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5297,6 +5313,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5340,12 +5357,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/server/controllers/post.controller.js b/server/controllers/post.controller.js
index e62804c41..f29e7d131 100644
--- a/server/controllers/post.controller.js
+++ b/server/controllers/post.controller.js
@@ -31,13 +31,14 @@ export function addPost(req, res) {
 
   const newPost = new Post(req.body.post);
 
+
   // Let's sanitize inputs
   newPost.title = sanitizeHtml(newPost.title);
   newPost.name = sanitizeHtml(newPost.name);
   newPost.content = sanitizeHtml(newPost.content);
-
   newPost.slug = slug(newPost.title.toLowerCase(), { lowercase: true });
   newPost.cuid = cuid();
+
   newPost.save((err, saved) => {
     if (err) {
       res.status(500).send(err);
diff --git a/server/dummyData.js b/server/dummyData.js
index 7749aa13f..231a40491 100644
--- a/server/dummyData.js
+++ b/server/dummyData.js
@@ -34,8 +34,8 @@ 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 post1 = new Post({ name: 'Admin', title: 'Hello MERN', slug: 'hello-mern', cuid: 'cikqgkv4q01ck7453ualdn3hd', content: content1, comments: [] });
+    const post2 = new Post({ name: 'Admin', title: 'Lorem Ipsum', slug: 'lorem-ipsum', cuid: 'cikqgkv4q01ck7453ualdn3hf', content: content2, comments: [] });
 
     Post.create([post1, post2], (error) => {
       if (!error) {