'add comments without css'

.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
   }
 }

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',

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',

client/modules/App/App.js

@@ -32,7 +32,7 @@ export class App extends Component {
 
   toggleAddPostSection = () => {
     this.props.dispatch(toggleAddPost());
-  };
+  }
 
   render() {
     return (

client/modules/App/AppActions.js

@@ -1,9 +1,16 @@
 // Export Constants
 export const TOGGLE_ADD_POST = 'TOGGLE_ADD_POST';
+export const TOGGLE_ADD_COMMENT = 'TOGGLE_ADD_COMMENT';
 
 // Export Actions
 export function toggleAddPost() {
   return {
     type: TOGGLE_ADD_POST,
   };
 }
+
+export function toggleAddComment() {
+  return {
+    type: TOGGLE_ADD_COMMENT,
+  };
+}

client/modules/App/AppReducer.js

@@ -1,18 +1,24 @@
 // 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) => {
   switch (action.type) {
     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;

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,
+  };
+}

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;
+}

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;

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;

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;
   }

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;
+}