Make comments system in posts page

Intl/localizationData/en.js

@@ -3,12 +3,16 @@ export default {
   messages: {
     siteTitle: 'MERN Starter Blog',
     addPost: 'Add Post',
+    addComment: 'Add comment',
+    singleComment: 'Comment',
+    confirmDeleteComment: 'Are you sure you want to delete this comment?',
     switchLanguage: 'Switch Language',
     twitterMessage: 'We are on Twitter',
     by: 'By',
     deletePost: 'Delete Post',
     createNewPost: 'Create new post',
     authorName: 'Author\'s Name',
+    commentContent: 'Write your comment',
     postTitle: 'Post Title',
     postContent: 'Post Content',
     submit: 'Submit',

Intl/localizationData/fr.js

@@ -3,12 +3,16 @@ export default {
   messages: {
     siteTitle: 'MERN blog de démarrage',
     addPost: 'Ajouter Poster',
+    addComment: 'Ajouter un commentaire',
+    singleComment: 'Сommentaire',
+    confirmDeleteComment: 'Étes-vous sûr de vouloir supprimer ce commentaire?',
     switchLanguage: 'Changer de langue',
     twitterMessage: 'Nous sommes sur Twitter',
     by: 'Par',
     deletePost: 'Supprimer le message',
     createNewPost: 'Créer un nouveau message',
     authorName: 'Nom de l\'auteur',
+    commentContent: 'Écrivez votre commentaire',
     postTitle: 'Titre de l\'article',
     postContent: 'Contenu après',
     submit: 'Soumettre',

client/modules/Comment/AddCommentWidget/AddCommentWidget.css

@@ -0,0 +1,31 @@
+.comment-form {
+  margin-top: 5rem;
+}
+.comment-submit-button {
+  display: inline-block;
+  padding: 8px 16px;
+  font-size: 18px;
+  color: #FFF;
+  background: #03A9F4;
+  text-decoration: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.comment-form-title {
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 16px;
+  color: #757575;
+}
+.comment-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;
+}

client/modules/Comment/AddCommentWidget/AddCommentWidget.jsx

@@ -0,0 +1,61 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+
+// Import Style
+import styles from './AddCommentWidget.css';
+
+// Import components
+import CommentList from '../CommentList';
+
+// Import actions
+import { addComment } from '../CommentActions';
+
+// Import selectors
+import { getComments } from '../CommentReducer';
+
+const AddCommentWidget = (props) => {
+  const authorRef = useRef();
+  const contentRef = useRef();
+
+  const addNewComment = () => {
+    authorRef.current.focus();
+    contentRef.current.focus();
+
+    if (authorRef.current.value && contentRef.current.value) {
+      props.addComment(authorRef.current.value, contentRef.current.value);
+      authorRef.current.value = contentRef.current.value = '';
+    }
+  };
+
+  const onKeyDownHandler = (e) => {
+    if (e.keyCode === 13) {
+      addNewComment();
+    }
+  };
+
+  return (
+    <div className={styles['comment-form']}>
+      <CommentList comments={props.comments.comments} />
+      <h2 className={styles['comment-form-title']}><FormattedMessage id="addComment" /></h2>
+      <input ref={authorRef} placeholder={props.intl.messages.authorName} className={styles['comment-form-field']}></input>
+      <textarea onKeyDown={onKeyDownHandler} ref={contentRef} placeholder={props.intl.messages.commentContent} className={styles['comment-form-field']}></textarea>
+      <p onClick={() => addNewComment()} className={styles['comment-submit-button']} href="#"><FormattedMessage id="submit" /></p>
+    </div>
+  );
+};
+
+AddCommentWidget.propTypes = {
+  intl: intlShape.isRequired,
+  comments: PropTypes.object.isRequired,
+  addComment: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = (state) => {
+  return {
+    comments: getComments(state),
+  };
+};
+
+export default injectIntl(connect(mapStateToProps, { addComment })(AddCommentWidget));

client/modules/Comment/CommentActions.js

@@ -0,0 +1,29 @@
+// Export Constants
+export const ADD_COMMENT = 'ADD_COMMENT';
+export const EDIT_COMMENT = 'EDIT_COMMENT';
+export const DELETE_COMMENT = 'DELETE_COMMENT';
+
+// Export Actions
+export const addComment = (author, content) => {
+  return {
+    type: ADD_COMMENT,
+    author,
+    content,
+  };
+};
+
+export const editComment = (author, content, cid) => {
+  return {
+    type: EDIT_COMMENT,
+    author,
+    content,
+    cid,
+  };
+};
+
+export const deleteComment = (cid) => {
+  return {
+    type: DELETE_COMMENT,
+    cid,
+  };
+};

client/modules/Comment/CommentList.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// Import Components
+import CommentListItem from './CommentListItem/CommentListItem';
+
+const CommentList = (props) => {
+  return (
+    <div className="listView">
+      {
+        props.comments.map(comment => (
+          <CommentListItem
+            comment={comment}
+            key={comment.cid}
+          />
+        ))
+      }
+    </div>
+  );
+};
+//onDelete={() => props.handleDeletePost(post.cuid)}
+CommentList.propTypes = {
+  comments: PropTypes.arrayOf(PropTypes.shape({
+    cid: PropTypes.number.isRequired,
+    author: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired,
+  })).isRequired,
+};
+
+export default CommentList;

client/modules/Comment/CommentListItem/CommentListItem.css

@@ -0,0 +1,68 @@
+.comment-item-container {
+  margin: 1rem 0 1rem 0;
+  background-color: whitesmoke;
+  padding: 1rem;
+  border-radius: 10px;
+  position: relative;
+}
+
+.author-name {
+  display: flex;
+  margin: 0.5rem 0 0 0.5rem;
+  font-family: 'Lato', sans-serif;
+}
+.comment-content {
+  margin: 0 0 0 0.5rem;
+  font-family: 'Lato', sans-serif;
+  font-size: 14px;
+  color: #424242;
+}
+.comment-delete-button {
+  position: absolute;
+  right: 0;
+  margin: 0.2rem 1rem 0 0;
+  top: 0;
+  font-size: 26px;
+  cursor: pointer;
+}
+.comment-delete-button:hover {
+  color: red;
+}
+.comment-edit-button {
+  position: absolute;
+  right: 0;
+  top: 0;
+  margin: 0.5rem 2.5rem 0 0;
+  font-size: 18px;
+  cursor: pointer;
+}
+.comment-edit-button:hover {
+  color: green;
+}
+.edit-form-field {
+  width: 100%;
+  margin-bottom: 5px;
+  margin-top: 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;
+}
+.edit-button {
+  margin: 0.2rem 1rem 0 0;
+  font-size: 14px;
+  border-radius: 5px;
+  cursor: pointer;
+  padding: 7px;
+  outline: none !important;
+  border: none;
+  background-color: rgb(209, 209, 209);
+  width: 70px;
+}
+.edit-button:hover {
+  background-color: white;
+}

client/modules/Comment/CommentListItem/CommentListItem.jsx

@@ -0,0 +1,82 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { intlShape, injectIntl, FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
+
+
+// Import Style
+import styles from './CommentListItem.css';
+
+// Import selectors
+import { getComment } from '../CommentReducer';
+
+// Import actions
+import { editComment, deleteComment } from '../CommentActions';
+
+const CommentListItem = (props) => {
+  const [edit, setEdit] = useState(false);
+
+  const editAuthorRef = useRef();
+  const editContentRef = useRef();
+
+  const onClickSaveButton = () => {
+    editAuthorRef.current.focus();
+    editContentRef.current.focus();
+
+    if (editAuthorRef.current.value && editContentRef.current.value) {
+      props.editComment(editAuthorRef.current.value, editContentRef.current.value, props.comment.cid);
+      setEdit(false);
+    }
+  };
+
+  const onClickOnDeleteButton = () => {
+    if (confirm(props.intl.messages.confirmDeleteComment)) { // eslint-disable-line
+      props.deleteComment(props.comment.cid);
+    }
+  };
+
+  return (
+    <div className={styles['comment-item-container']}>
+      {
+        !edit ?
+          <div>
+            <h4><FormattedMessage id="singleComment" /> #{props.comment.cid}</h4>
+            <p className={styles['author-name']}>
+              <FormattedMessage id="by" />
+              &nbsp;
+              <p>{props.comment.author}</p>
+            </p>
+            <p className={styles['comment-content']}>{props.comment.content}</p>
+            <p onClick={() => onClickOnDeleteButton()}className={styles['comment-delete-button']}>&times;</p>
+            <p onClick={() => setEdit(true)} className={styles['comment-edit-button']}>&#9998;</p>
+          </div> :
+          <div>
+            <h4><FormattedMessage id="singleComment" /> #{props.comment.cid}</h4>
+            <input ref={editAuthorRef} defaultValue={props.comment.author} className={styles['edit-form-field']} />
+            <textarea ref={editContentRef} defaultValue={props.comment.content} className={styles['edit-form-field']} />
+            <button onClick={() => onClickSaveButton()} className={styles['edit-button']}>Save</button>
+            <button onClick={() => setEdit(false)} className={styles['edit-button']}>Cancel</button>
+          </div>
+      }
+    </div>
+  );
+};
+
+CommentListItem.propTypes = {
+  comment: PropTypes.shape({
+    author: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired,
+    cid: PropTypes.number.isRequired,
+  }).isRequired,
+  editComment: PropTypes.func.isRequired,
+  deleteComment: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
+};
+
+const mapStateToProps = (state, props) => {
+  return {
+    getComment: getComment(state, props.comment.cid),
+  };
+};
+
+export default injectIntl(connect(mapStateToProps, { editComment, deleteComment })(CommentListItem));

client/modules/Comment/CommentReducer.js

@@ -0,0 +1,56 @@
+import { ADD_COMMENT, EDIT_COMMENT, DELETE_COMMENT } from './CommentActions';
+
+// Initial State
+const initialState = {
+  comments: [{
+    cid: 1,
+    author: 'Alexey',
+    content: 'Hello world!',
+  }],
+};
+
+const CommentReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case ADD_COMMENT:
+      return {
+        comments: [...state.comments, {
+          cid: state.comments.length > 0 ? state.comments[state.comments.length - 1].cid + 1 : 1,
+          author: action.author,
+          content: action.content,
+        }],
+      };
+    case EDIT_COMMENT:
+      return {
+        comments: state.comments.map((comment) => {
+          if (comment.cid === action.cid) {
+            const newComment = {
+              cid: comment.cid,
+              author: action.author,
+              content: action.content,
+            };
+            return newComment;
+          }
+          return comment;
+        }),
+      };
+
+    case DELETE_COMMENT:
+      return {
+        comments: state.comments.filter(comment => comment.cid !== action.cid),
+      };
+
+    default:
+      return state;
+  }
+};
+
+// Selectors
+export const getComments = state => state.comments;
+
+// Get comment by cid
+export const getComment = (state, cid) => {
+  state.comments.comments.filter(comment => comment.cid === cid);
+};
+
+// Export Reducer
+export default CommentReducer;