From 9910d61206eaa5e914ed7d995bb062316fb0412a Mon Sep 17 00:00:00 2001
From: TheRadly <alex5011999@gmail.com>
Date: Sat, 20 Jun 2020 08:03:33 +0300
Subject: [PATCH 1/5] [modules] Create AddCommentWidget for detail post

---
 Intl/localizationData/en.js                   |  2 ++
 Intl/localizationData/fr.js                   |  2 ++
 .../AddCommentWidget/AddCommentWidget.css     |  9 ++++++++
 .../AddCommentWidget/AddCommentWidget.jsx     | 23 +++++++++++++++++++
 client/modules/Post/components/PostList.js    |  1 +
 .../pages/PostDetailPage/PostDetailPage.js    |  9 ++++++--
 6 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 client/modules/Post/components/AddCommentWidget/AddCommentWidget.css
 create mode 100644 client/modules/Post/components/AddCommentWidget/AddCommentWidget.jsx

diff --git a/Intl/localizationData/en.js b/Intl/localizationData/en.js
index 79b481d3c..41944426f 100644
--- a/Intl/localizationData/en.js
+++ b/Intl/localizationData/en.js
@@ -3,12 +3,14 @@ export default {
   messages: {
     siteTitle: 'MERN Starter Blog',
     addPost: 'Add Post',
+    addComment: 'Add 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',
diff --git a/Intl/localizationData/fr.js b/Intl/localizationData/fr.js
index 7e5b81b3f..4fa5026bd 100644
--- a/Intl/localizationData/fr.js
+++ b/Intl/localizationData/fr.js
@@ -3,12 +3,14 @@ export default {
   messages: {
     siteTitle: 'MERN blog de démarrage',
     addPost: 'Ajouter Poster',
+    addComment: 'Ajouter un 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',
diff --git a/client/modules/Post/components/AddCommentWidget/AddCommentWidget.css b/client/modules/Post/components/AddCommentWidget/AddCommentWidget.css
new file mode 100644
index 000000000..25727ee97
--- /dev/null
+++ b/client/modules/Post/components/AddCommentWidget/AddCommentWidget.css
@@ -0,0 +1,9 @@
+.comment-submit-button {
+  display: inline-block;
+  padding: 8px 16px;
+  font-size: 18px;
+  color: #FFF;
+  background: #03A9F4;
+  text-decoration: none;
+  border-radius: 4px;
+}
\ No newline at end of file
diff --git a/client/modules/Post/components/AddCommentWidget/AddCommentWidget.jsx b/client/modules/Post/components/AddCommentWidget/AddCommentWidget.jsx
new file mode 100644
index 000000000..f73827ac4
--- /dev/null
+++ b/client/modules/Post/components/AddCommentWidget/AddCommentWidget.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+
+// Import Style
+import styles from './AddCommentWidget.css';
+
+const AddCommentWidget = (props) => {
+  return (
+    <div>
+      <h4><FormattedMessage id="addComment" /></h4>
+      <input placeholder={props.intl.messages.authorName}></input>
+      <textarea placeholder={props.intl.messages.commentContent}></textarea>
+      <a className={styles['comment-submit-button']} href="#"><FormattedMessage id="submit" /></a>
+    </div>
+  );
+};
+
+AddCommentWidget.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(AddCommentWidget);
diff --git a/client/modules/Post/components/PostList.js b/client/modules/Post/components/PostList.js
index 6719b3124..2f073e449 100644
--- a/client/modules/Post/components/PostList.js
+++ b/client/modules/Post/components/PostList.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import PostListItem from './PostListItem/PostListItem';
 
 function PostList(props) {
+  console.log(props);
   return (
     <div className="listView">
       {
diff --git a/client/modules/Post/pages/PostDetailPage/PostDetailPage.js b/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
index 32c1e1c11..8de4a18cf 100644
--- a/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
+++ b/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import Helmet from 'react-helmet';
-import { FormattedMessage } from 'react-intl';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import AddCommentWidget from '../../components/AddCommentWidget/AddCommentWidget';
+
 
 // Import Style
 import styles from '../../components/PostListItem/PostListItem.css';
@@ -21,6 +23,7 @@ export function PostDetailPage(props) {
         <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>
+        <AddCommentWidget />
       </div>
     </div>
   );
@@ -45,7 +48,9 @@ PostDetailPage.propTypes = {
     content: PropTypes.string.isRequired,
     slug: PropTypes.string.isRequired,
     cuid: PropTypes.string.isRequired,
+    intl: intlShape.isRequired,
   }).isRequired,
 };
 
-export default connect(mapStateToProps)(PostDetailPage);
+const postDetailWithInjectionIntl = injectIntl(PostDetailPage);
+export default connect(mapStateToProps)(postDetailWithInjectionIntl);

From 33e53b2dc1faa74b03dcd93dc0976eed04376a9b Mon Sep 17 00:00:00 2001
From: TheRadly <alex5011999@gmail.com>
Date: Sat, 20 Jun 2020 08:14:20 +0300
Subject: [PATCH 2/5] Create styles for add post widget

---
 .../AddCommentWidget/AddCommentWidget.css     | 21 +++++++++++++++++++
 .../AddCommentWidget/AddCommentWidget.jsx     |  8 +++----
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/client/modules/Post/components/AddCommentWidget/AddCommentWidget.css b/client/modules/Post/components/AddCommentWidget/AddCommentWidget.css
index 25727ee97..ec7063eab 100644
--- a/client/modules/Post/components/AddCommentWidget/AddCommentWidget.css
+++ b/client/modules/Post/components/AddCommentWidget/AddCommentWidget.css
@@ -1,3 +1,6 @@
+.comment-form {
+  margin-top: 5rem;
+}
 .comment-submit-button {
   display: inline-block;
   padding: 8px 16px;
@@ -6,4 +9,22 @@
   background: #03A9F4;
   text-decoration: none;
   border-radius: 4px;
+}
+.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;
 }
\ No newline at end of file
diff --git a/client/modules/Post/components/AddCommentWidget/AddCommentWidget.jsx b/client/modules/Post/components/AddCommentWidget/AddCommentWidget.jsx
index f73827ac4..b977f1301 100644
--- a/client/modules/Post/components/AddCommentWidget/AddCommentWidget.jsx
+++ b/client/modules/Post/components/AddCommentWidget/AddCommentWidget.jsx
@@ -7,10 +7,10 @@ import styles from './AddCommentWidget.css';
 
 const AddCommentWidget = (props) => {
   return (
-    <div>
-      <h4><FormattedMessage id="addComment" /></h4>
-      <input placeholder={props.intl.messages.authorName}></input>
-      <textarea placeholder={props.intl.messages.commentContent}></textarea>
+    <div className={styles['comment-form']}>
+      <h4 className={styles['comment-form-title']}><FormattedMessage id="addComment" /></h4>
+      <input placeholder={props.intl.messages.authorName} className={styles['comment-form-field']}></input>
+      <textarea placeholder={props.intl.messages.commentContent} className={styles['comment-form-field']}></textarea>
       <a className={styles['comment-submit-button']} href="#"><FormattedMessage id="submit" /></a>
     </div>
   );

From a933d39390da2ed7b522b11cab7e3e66ae483fe9 Mon Sep 17 00:00:00 2001
From: TheRadly <alex5011999@gmail.com>
Date: Sat, 20 Jun 2020 09:20:17 +0300
Subject: [PATCH 3/5] Added list comments & design elements

---
 .../AddCommentWidget/AddCommentWidget.jsx     |  7 +++-
 .../modules/Post/components/CommentList.jsx   | 39 +++++++++++++++++++
 .../CommentListItem/CommentListItem.css       | 39 +++++++++++++++++++
 .../CommentListItem/CommentListItem.jsx       | 33 ++++++++++++++++
 client/modules/Post/components/PostList.js    |  1 -
 .../pages/PostDetailPage/PostDetailPage.js    |  3 +-
 6 files changed, 119 insertions(+), 3 deletions(-)
 create mode 100644 client/modules/Post/components/CommentList.jsx
 create mode 100644 client/modules/Post/components/CommentListItem/CommentListItem.css
 create mode 100644 client/modules/Post/components/CommentListItem/CommentListItem.jsx

diff --git a/client/modules/Post/components/AddCommentWidget/AddCommentWidget.jsx b/client/modules/Post/components/AddCommentWidget/AddCommentWidget.jsx
index b977f1301..b45658583 100644
--- a/client/modules/Post/components/AddCommentWidget/AddCommentWidget.jsx
+++ b/client/modules/Post/components/AddCommentWidget/AddCommentWidget.jsx
@@ -5,10 +5,15 @@ import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 // Import Style
 import styles from './AddCommentWidget.css';
 
+// Import components
+import CommentList from '../CommentList';
+
 const AddCommentWidget = (props) => {
   return (
     <div className={styles['comment-form']}>
-      <h4 className={styles['comment-form-title']}><FormattedMessage id="addComment" /></h4>
+      <CommentList />
+      <CommentList />
+      <h2 className={styles['comment-form-title']}><FormattedMessage id="addComment" /></h2>
       <input placeholder={props.intl.messages.authorName} className={styles['comment-form-field']}></input>
       <textarea placeholder={props.intl.messages.commentContent} className={styles['comment-form-field']}></textarea>
       <a className={styles['comment-submit-button']} href="#"><FormattedMessage id="submit" /></a>
diff --git a/client/modules/Post/components/CommentList.jsx b/client/modules/Post/components/CommentList.jsx
new file mode 100644
index 000000000..0db509e4b
--- /dev/null
+++ b/client/modules/Post/components/CommentList.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// Import Components
+import CommentListItem from './CommentListItem/CommentListItem';
+
+const CommentList = () => {
+  const comment = {
+    author: 'Alex',
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.',
+  };
+  return (
+    <div className="listView">
+      {
+        // props.posts.map(post => (
+        //   <CommentListItem
+        //     comment={post}
+        //     key={post.cuid}
+        //     onDelete={() => props.handleDeletePost(post.cuid)}
+        //   />
+        // ))
+        <CommentListItem comment={comment} />
+      }
+    </div>
+  );
+};
+
+CommentList.propTypes = {
+  posts: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired,
+    slug: PropTypes.string.isRequired,
+    cuid: PropTypes.string.isRequired,
+  })).isRequired,
+  handleDeletePost: PropTypes.func.isRequired,
+};
+
+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..b98717ddf
--- /dev/null
+++ b/client/modules/Post/components/CommentListItem/CommentListItem.css
@@ -0,0 +1,39 @@
+.comment-item-container {
+  margin: 1rem 0 1rem 0;
+  background-color: whitesmoke;
+  padding: 1rem;
+  border-radius: 10px;
+  position: relative;
+}
+.author-name {
+  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;
+}
\ No newline at end of file
diff --git a/client/modules/Post/components/CommentListItem/CommentListItem.jsx b/client/modules/Post/components/CommentListItem/CommentListItem.jsx
new file mode 100644
index 000000000..a653e3c18
--- /dev/null
+++ b/client/modules/Post/components/CommentListItem/CommentListItem.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+// Import Style
+import styles from './CommentListItem.css';
+
+const CommentListItem = (props) => {
+  return (
+    <div className={styles['comment-item-container']}>
+      <h4>Comment #1</h4>
+      <p className={styles['author-name']}>
+        <FormattedMessage id="by" />
+        &nbsp;
+        {props.comment.author}
+      </p>
+      <p className={styles['comment-content']}>{props.comment.content}</p>
+      <p className={styles['comment-delete-button']}>&times;</p>
+      <p className={styles['comment-edit-button']}>&#9998;</p>
+    </div>
+  );
+};
+
+CommentListItem.propTypes = {
+  comment: PropTypes.shape({
+    author: PropTypes.string.isRequired,
+    content: PropTypes.string.isRequired,
+    cuid: PropTypes.string.isRequired,
+  }).isRequired,
+  // onDelete: PropTypes.func.isRequired,
+};
+
+export default CommentListItem;
diff --git a/client/modules/Post/components/PostList.js b/client/modules/Post/components/PostList.js
index 2f073e449..6719b3124 100644
--- a/client/modules/Post/components/PostList.js
+++ b/client/modules/Post/components/PostList.js
@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import PostListItem from './PostListItem/PostListItem';
 
 function PostList(props) {
-  console.log(props);
   return (
     <div className="listView">
       {
diff --git a/client/modules/Post/pages/PostDetailPage/PostDetailPage.js b/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
index 8de4a18cf..4bdb0d3f9 100644
--- a/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
+++ b/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import Helmet from 'react-helmet';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
-import AddCommentWidget from '../../components/AddCommentWidget/AddCommentWidget';
 
+// Import Components
+import AddCommentWidget from '../../components/AddCommentWidget/AddCommentWidget';
 
 // Import Style
 import styles from '../../components/PostListItem/PostListItem.css';

From 85ff283466e3c00e2bd093d1febd3a1cd5ca1b4c Mon Sep 17 00:00:00 2001
From: TheRadly <alex5011999@gmail.com>
Date: Sat, 20 Jun 2020 11:23:04 +0300
Subject: [PATCH 4/5] Added comment editor & change package react versions

---
 .../modules/Post/components/CommentList.jsx   | 22 ++++++------
 .../CommentListItem/CommentListItem.css       | 28 +++++++++++++++
 .../CommentListItem/CommentListItem.jsx       | 35 +++++++++++++------
 .../pages/PostDetailPage/PostDetailPage.js    |  6 ++--
 package.json                                  |  8 ++---
 5 files changed, 69 insertions(+), 30 deletions(-)

diff --git a/client/modules/Post/components/CommentList.jsx b/client/modules/Post/components/CommentList.jsx
index 0db509e4b..4dc427c90 100644
--- a/client/modules/Post/components/CommentList.jsx
+++ b/client/modules/Post/components/CommentList.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+//import PropTypes from 'prop-types';
 
 // Import Components
 import CommentListItem from './CommentListItem/CommentListItem';
@@ -25,15 +25,15 @@ const CommentList = () => {
   );
 };
 
-CommentList.propTypes = {
-  posts: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    content: PropTypes.string.isRequired,
-    slug: PropTypes.string.isRequired,
-    cuid: PropTypes.string.isRequired,
-  })).isRequired,
-  handleDeletePost: PropTypes.func.isRequired,
-};
+// CommentList.propTypes = {
+//   posts: PropTypes.arrayOf(PropTypes.shape({
+//     name: PropTypes.string.isRequired,
+//     title: PropTypes.string.isRequired,
+//     content: PropTypes.string.isRequired,
+//     slug: PropTypes.string.isRequired,
+//     cuid: PropTypes.string.isRequired,
+//   })).isRequired,
+//   handleDeletePost: PropTypes.func.isRequired,
+// };
 
 export default CommentList;
diff --git a/client/modules/Post/components/CommentListItem/CommentListItem.css b/client/modules/Post/components/CommentListItem/CommentListItem.css
index b98717ddf..0e9903893 100644
--- a/client/modules/Post/components/CommentListItem/CommentListItem.css
+++ b/client/modules/Post/components/CommentListItem/CommentListItem.css
@@ -5,6 +5,7 @@
   border-radius: 10px;
   position: relative;
 }
+
 .author-name {
   margin: 0.5rem 0 0 0.5rem;
   font-family: 'Lato', sans-serif;
@@ -36,4 +37,31 @@
 }
 .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;
 }
\ No newline at end of file
diff --git a/client/modules/Post/components/CommentListItem/CommentListItem.jsx b/client/modules/Post/components/CommentListItem/CommentListItem.jsx
index a653e3c18..d7e864f51 100644
--- a/client/modules/Post/components/CommentListItem/CommentListItem.jsx
+++ b/client/modules/Post/components/CommentListItem/CommentListItem.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 
@@ -6,17 +6,31 @@ import { FormattedMessage } from 'react-intl';
 import styles from './CommentListItem.css';
 
 const CommentListItem = (props) => {
+  const [edit, setEdit] = useState(false);
+
   return (
     <div className={styles['comment-item-container']}>
-      <h4>Comment #1</h4>
-      <p className={styles['author-name']}>
-        <FormattedMessage id="by" />
-        &nbsp;
-        {props.comment.author}
-      </p>
-      <p className={styles['comment-content']}>{props.comment.content}</p>
-      <p className={styles['comment-delete-button']}>&times;</p>
-      <p className={styles['comment-edit-button']}>&#9998;</p>
+      {
+        !edit ?
+          <div>
+            <h4>Comment #1</h4>
+            <p className={styles['author-name']}>
+              <FormattedMessage id="by" />
+              &nbsp;
+              {props.comment.author}
+            </p>
+            <p className={styles['comment-content']}>{props.comment.content}</p>
+            <p className={styles['comment-delete-button']}>&times;</p>
+            <p onClick={() => setEdit(true)} className={styles['comment-edit-button']}>&#9998;</p>
+          </div> :
+          <div>
+            <h4>Comment #1</h4>
+            <input value={props.comment.author} className={styles['edit-form-field']} />
+            <textarea value={props.comment.content} className={styles['edit-form-field']} />
+            <button onClick={() => setEdit(false)} className={styles['edit-button']}>Save</button>
+            <button onClick={() => setEdit(false)} className={styles['edit-button']}>Cancel</button>
+          </div>
+      }
     </div>
   );
 };
@@ -25,7 +39,6 @@ CommentListItem.propTypes = {
   comment: PropTypes.shape({
     author: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired,
-    cuid: 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 4bdb0d3f9..22e520205 100644
--- a/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
+++ b/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import Helmet from 'react-helmet';
-import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
 // Import Components
 import AddCommentWidget from '../../components/AddCommentWidget/AddCommentWidget';
@@ -49,9 +49,7 @@ PostDetailPage.propTypes = {
     content: PropTypes.string.isRequired,
     slug: PropTypes.string.isRequired,
     cuid: PropTypes.string.isRequired,
-    intl: intlShape.isRequired,
   }).isRequired,
 };
 
-const postDetailWithInjectionIntl = injectIntl(PostDetailPage);
-export default connect(mapStateToProps)(postDetailWithInjectionIntl);
+export default connect(mapStateToProps)(PostDetailPage);
diff --git a/package.json b/package.json
index f0fa1f581..df3138d4b 100644
--- a/package.json
+++ b/package.json
@@ -37,20 +37,20 @@
     "cross-env": "^1.0.8",
     "cuid": "^1.3.8",
     "express": "^4.13.4",
-    "intl": "^1.2.4",
+    "intl": "^1.2.5",
     "intl-locales-supported": "^1.0.0",
     "isomorphic-fetch": "^2.2.1",
     "limax": "^1.3.0",
     "mongoose": "^4.4.20",
     "prop-types": "^15.6.2",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-helmet": "^5.2.0",
     "react-intl": "^2.1.2",
     "react-redux": "^4.4.5",
     "react-router": "^3.2.1",
     "redux": "^3.5.2",
-    "redux-thunk": "^2.1.0",
+    "redux-thunk": "^2.3.0",
     "sanitize-html": "^1.11.4"
   },
   "devDependencies": {

From 4e8d15ad8314a62bacf9c2d8466dc338ca839de9 Mon Sep 17 00:00:00 2001
From: TheRadly <alex5011999@gmail.com>
Date: Sat, 20 Jun 2020 15:29:45 +0300
Subject: [PATCH 5/5] Create reducers, actions & design. Latest commit

---
 Intl/localizationData/en.js                   |  2 +
 Intl/localizationData/fr.js                   |  2 +
 .../AddCommentWidget/AddCommentWidget.css     |  1 +
 .../AddCommentWidget/AddCommentWidget.jsx     | 61 ++++++++++++++
 client/modules/Comment/CommentActions.js      | 29 +++++++
 client/modules/Comment/CommentList.jsx        | 30 +++++++
 .../CommentListItem/CommentListItem.css       |  1 +
 .../CommentListItem/CommentListItem.jsx       | 82 +++++++++++++++++++
 client/modules/Comment/CommentReducer.js      | 56 +++++++++++++
 .../AddCommentWidget/AddCommentWidget.jsx     | 28 -------
 .../modules/Post/components/CommentList.jsx   | 39 ---------
 .../CommentListItem/CommentListItem.jsx       | 46 -----------
 .../pages/PostDetailPage/PostDetailPage.js    |  2 +-
 client/reducers.js                            |  2 +
 14 files changed, 267 insertions(+), 114 deletions(-)
 rename client/modules/{Post/components => Comment}/AddCommentWidget/AddCommentWidget.css (96%)
 create mode 100644 client/modules/Comment/AddCommentWidget/AddCommentWidget.jsx
 create mode 100644 client/modules/Comment/CommentActions.js
 create mode 100644 client/modules/Comment/CommentList.jsx
 rename client/modules/{Post/components => Comment}/CommentListItem/CommentListItem.css (98%)
 create mode 100644 client/modules/Comment/CommentListItem/CommentListItem.jsx
 create mode 100644 client/modules/Comment/CommentReducer.js
 delete mode 100644 client/modules/Post/components/AddCommentWidget/AddCommentWidget.jsx
 delete mode 100644 client/modules/Post/components/CommentList.jsx
 delete mode 100644 client/modules/Post/components/CommentListItem/CommentListItem.jsx

diff --git a/Intl/localizationData/en.js b/Intl/localizationData/en.js
index 41944426f..5b4b8ed71 100644
--- a/Intl/localizationData/en.js
+++ b/Intl/localizationData/en.js
@@ -4,6 +4,8 @@ export default {
     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',
diff --git a/Intl/localizationData/fr.js b/Intl/localizationData/fr.js
index 4fa5026bd..87e3cb833 100644
--- a/Intl/localizationData/fr.js
+++ b/Intl/localizationData/fr.js
@@ -4,6 +4,8 @@ export default {
     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',
diff --git a/client/modules/Post/components/AddCommentWidget/AddCommentWidget.css b/client/modules/Comment/AddCommentWidget/AddCommentWidget.css
similarity index 96%
rename from client/modules/Post/components/AddCommentWidget/AddCommentWidget.css
rename to client/modules/Comment/AddCommentWidget/AddCommentWidget.css
index ec7063eab..07da87e69 100644
--- a/client/modules/Post/components/AddCommentWidget/AddCommentWidget.css
+++ b/client/modules/Comment/AddCommentWidget/AddCommentWidget.css
@@ -9,6 +9,7 @@
   background: #03A9F4;
   text-decoration: none;
   border-radius: 4px;
+  cursor: pointer;
 }
 .comment-form-title {
   font-size: 16px;
diff --git a/client/modules/Comment/AddCommentWidget/AddCommentWidget.jsx b/client/modules/Comment/AddCommentWidget/AddCommentWidget.jsx
new file mode 100644
index 000000000..af9490d06
--- /dev/null
+++ b/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));
diff --git a/client/modules/Comment/CommentActions.js b/client/modules/Comment/CommentActions.js
new file mode 100644
index 000000000..21b62c31a
--- /dev/null
+++ b/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,
+  };
+};
diff --git a/client/modules/Comment/CommentList.jsx b/client/modules/Comment/CommentList.jsx
new file mode 100644
index 000000000..ff8697e7c
--- /dev/null
+++ b/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;
diff --git a/client/modules/Post/components/CommentListItem/CommentListItem.css b/client/modules/Comment/CommentListItem/CommentListItem.css
similarity index 98%
rename from client/modules/Post/components/CommentListItem/CommentListItem.css
rename to client/modules/Comment/CommentListItem/CommentListItem.css
index 0e9903893..3f425d231 100644
--- a/client/modules/Post/components/CommentListItem/CommentListItem.css
+++ b/client/modules/Comment/CommentListItem/CommentListItem.css
@@ -7,6 +7,7 @@
 }
 
 .author-name {
+  display: flex;
   margin: 0.5rem 0 0 0.5rem;
   font-family: 'Lato', sans-serif;
 }
diff --git a/client/modules/Comment/CommentListItem/CommentListItem.jsx b/client/modules/Comment/CommentListItem/CommentListItem.jsx
new file mode 100644
index 000000000..8d1844919
--- /dev/null
+++ b/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));
diff --git a/client/modules/Comment/CommentReducer.js b/client/modules/Comment/CommentReducer.js
new file mode 100644
index 000000000..6702037ed
--- /dev/null
+++ b/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;
diff --git a/client/modules/Post/components/AddCommentWidget/AddCommentWidget.jsx b/client/modules/Post/components/AddCommentWidget/AddCommentWidget.jsx
deleted file mode 100644
index b45658583..000000000
--- a/client/modules/Post/components/AddCommentWidget/AddCommentWidget.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
-
-// Import Style
-import styles from './AddCommentWidget.css';
-
-// Import components
-import CommentList from '../CommentList';
-
-const AddCommentWidget = (props) => {
-  return (
-    <div className={styles['comment-form']}>
-      <CommentList />
-      <CommentList />
-      <h2 className={styles['comment-form-title']}><FormattedMessage id="addComment" /></h2>
-      <input placeholder={props.intl.messages.authorName} className={styles['comment-form-field']}></input>
-      <textarea placeholder={props.intl.messages.commentContent} className={styles['comment-form-field']}></textarea>
-      <a className={styles['comment-submit-button']} href="#"><FormattedMessage id="submit" /></a>
-    </div>
-  );
-};
-
-AddCommentWidget.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(AddCommentWidget);
diff --git a/client/modules/Post/components/CommentList.jsx b/client/modules/Post/components/CommentList.jsx
deleted file mode 100644
index 4dc427c90..000000000
--- a/client/modules/Post/components/CommentList.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-//import PropTypes from 'prop-types';
-
-// Import Components
-import CommentListItem from './CommentListItem/CommentListItem';
-
-const CommentList = () => {
-  const comment = {
-    author: 'Alex',
-    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.',
-  };
-  return (
-    <div className="listView">
-      {
-        // props.posts.map(post => (
-        //   <CommentListItem
-        //     comment={post}
-        //     key={post.cuid}
-        //     onDelete={() => props.handleDeletePost(post.cuid)}
-        //   />
-        // ))
-        <CommentListItem comment={comment} />
-      }
-    </div>
-  );
-};
-
-// CommentList.propTypes = {
-//   posts: PropTypes.arrayOf(PropTypes.shape({
-//     name: PropTypes.string.isRequired,
-//     title: PropTypes.string.isRequired,
-//     content: PropTypes.string.isRequired,
-//     slug: PropTypes.string.isRequired,
-//     cuid: PropTypes.string.isRequired,
-//   })).isRequired,
-//   handleDeletePost: PropTypes.func.isRequired,
-// };
-
-export default CommentList;
diff --git a/client/modules/Post/components/CommentListItem/CommentListItem.jsx b/client/modules/Post/components/CommentListItem/CommentListItem.jsx
deleted file mode 100644
index d7e864f51..000000000
--- a/client/modules/Post/components/CommentListItem/CommentListItem.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-
-// Import Style
-import styles from './CommentListItem.css';
-
-const CommentListItem = (props) => {
-  const [edit, setEdit] = useState(false);
-
-  return (
-    <div className={styles['comment-item-container']}>
-      {
-        !edit ?
-          <div>
-            <h4>Comment #1</h4>
-            <p className={styles['author-name']}>
-              <FormattedMessage id="by" />
-              &nbsp;
-              {props.comment.author}
-            </p>
-            <p className={styles['comment-content']}>{props.comment.content}</p>
-            <p className={styles['comment-delete-button']}>&times;</p>
-            <p onClick={() => setEdit(true)} className={styles['comment-edit-button']}>&#9998;</p>
-          </div> :
-          <div>
-            <h4>Comment #1</h4>
-            <input value={props.comment.author} className={styles['edit-form-field']} />
-            <textarea value={props.comment.content} className={styles['edit-form-field']} />
-            <button onClick={() => setEdit(false)} 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,
-  }).isRequired,
-  // onDelete: PropTypes.func.isRequired,
-};
-
-export default CommentListItem;
diff --git a/client/modules/Post/pages/PostDetailPage/PostDetailPage.js b/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
index 22e520205..04fa94829 100644
--- a/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
+++ b/client/modules/Post/pages/PostDetailPage/PostDetailPage.js
@@ -5,7 +5,7 @@ import Helmet from 'react-helmet';
 import { FormattedMessage } from 'react-intl';
 
 // Import Components
-import AddCommentWidget from '../../components/AddCommentWidget/AddCommentWidget';
+import AddCommentWidget from '../../../Comment/AddCommentWidget/AddCommentWidget';
 
 // Import Style
 import styles from '../../components/PostListItem/PostListItem.css';
diff --git a/client/reducers.js b/client/reducers.js
index 2aa143142..9aadfe79d 100644
--- a/client/reducers.js
+++ b/client/reducers.js
@@ -7,10 +7,12 @@ import { combineReducers } from 'redux';
 import app from './modules/App/AppReducer';
 import posts from './modules/Post/PostReducer';
 import intl from './modules/Intl/IntlReducer';
+import comments from './modules/Comment/CommentReducer';
 
 // Combine all reducers into one root reducer
 export default combineReducers({
   app,
   posts,
   intl,
+  comments,
 });