Fixed add delete comments

client/modules/Post/components/PostComments/CommentActions.js

@@ -0,0 +1,52 @@
+import callApi from '../../../../util/apiCaller';
+
+export const GET_COMMENTS = 'GET_COMMENTS';
+export const ADD_COMMENTS = 'ADD_COMMENTS';
+export const ADD_COMMENT = 'ADD_COMMENT';
+export const DELETE_COMMENT = 'DELETE_COMMENT';
+
+
+function addComment(comment) {
+  return {
+    type: ADD_COMMENT,
+    comment,
+  };
+}
+
+function addComments(comments) {
+  return {
+    type: ADD_COMMENTS,
+    comments,
+  };
+}
+
+export function addCommentRequestAPI(comment) {
+  return (dispatch) => {
+    console.log(`addCommentRequest  ${comment.author}`);
+    return callApi('comments', 'post', {
+      comment: {
+        author: comment.author,
+        text: comment.text,
+        postCuid: comment.postCuid,
+      },
+    })
+      .then(res => dispatch(addComment(res.comment)));
+  };
+}
+
+export function getCommentsRequestAPI() {
+  return (dispatch) => {
+    return callApi('comments')
+      .then(res => {
+        dispatch(addComments(res.comments));
+      });
+  };
+}
+
+export function todeleteCommentAPI(cuid, dispatch) {
+  return callApi(`comments/${cuid}`, 'delete')
+    .then(() => {
+      dispatch({ type: DELETE_COMMENT, cuid });
+    });
+}
+

client/modules/Post/components/PostComments/CommentReducer.js

@@ -0,0 +1,28 @@
+import { ADD_COMMENTS, ADD_COMMENT, DELETE_COMMENT } from './CommentActions';
+
+
+const initialState = { data: [] };
+
+const CommentsReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case ADD_COMMENT :
+      return {
+        data: [action.comment, ...state.data],
+      };
+
+    case ADD_COMMENTS :
+      return {
+        data: action.comments,
+      };
+
+    case DELETE_COMMENT :
+      return {
+        data: state.data.filter((comment) => comment.cuid !== action.cuid)
+      };
+
+    default:
+      return state;
+  }
+};
+
+export default CommentsReducer;

client/modules/Post/components/PostComments/PostComments.css

@@ -0,0 +1,106 @@
+.comment-form {
+  margin: 30px 0 30px 0;
+}
+
+.comment-form h3{
+  display: inline-block;
+  margin-bottom: 15px;
+  color: #fb2637;
+  box-shadow: 4px 4px 3px 0 rgba(0, 0, 255, .2);
+}
+
+.author-input {
+  padding: 7px;
+  border-radius: 5px;
+  border: solid 1px #999;
+  font-size: 15px;
+  outline: none;
+  width: 30%;
+}
+
+.comment-input {
+  min-height: 110px;
+  width: 100%;
+  border-radius: 10px;
+  resize: none;
+  outline: none;
+  padding: 10px;
+}
+
+.sent-comment-button {
+  width: 200px;
+  height: 40px;
+  border: none;
+  color: #FFF;
+  background: tomato;
+  border-radius: 1000px;
+  font-size: 16px;
+  outline: none;
+  cursor: pointer;
+}
+
+.form-item {
+  text-align: right;
+  margin-top: 20px;
+}
+
+.form-user-comment {
+  width: 100%;
+  margin-top: 10px;
+  border: solid 1px #cccccc;
+  padding: 5px 10px 10px 10px;
+  border-radius: 5px;
+}
+
+.form-user-comment > p {
+  margin: 10px 10px 0 10px;
+  text-align: right;
+
+}
+
+.form-user-comment > p > span {
+  color: #555;
+  font-size: 14px;
+  font-style: italic;
+  font-weight: 500;
+  transition: color 1.5s, font-size 1.2s, font-weight 1.2s;
+  margin: 10px;
+
+}
+
+.form-user-comment > p > span:hover {
+  color: tomato;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 600;
+
+}
+
+.comment-info {
+  position: relative;
+  padding: 5px;
+  border-bottom: solid 1px #ccc;
+}
+
+.comment-info span {
+  font-size: 17px;
+  font-weight: 200;
+}
+
+.comments-list span{
+  font-size: 16px;
+  font-style: italic;
+  color: rgb(35, 15, 255);
+}
+
+.comment-date {
+  position: absolute;
+  right: 10px;
+
+}
+
+.comment-content p{
+  padding-top: 5px;
+  text-indent: 20px;
+  text-align: justify;
+}

client/modules/Post/components/PostComments/PostComments.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import CommentForm from '../PostComments/formComponent/CommentForm';
+import CommentsUser from './formComponent/CommentUser';
+
+import styles from '../PostComments/PostComments.css';
+
+import { addCommentRequestAPI } from '../../components/PostComments/CommentActions';
+
+export class PostComments extends Component {
+
+  toAddCommentToStore = (author, text) => {
+    console.log(`${author}  ${text}`);
+    const comment = { author, text };
+    console.log(comment);
+
+    comment.postCuid = this.props.post;
+    return this.props.dispatch(addCommentRequestAPI(comment));
+  }
+
+  render() {
+    const { comments } = this.props;
+    return (
+      <div className={`${styles['comments-list']}`}>
+        <CommentForm addComment={this.toAddCommentToStore} />
+        {
+          comments.length ?
+            comments.map((comment) => (<CommentsUser comment={comment} key={comment.cuid} />)) :
+            <span>PLease, leave your comment, be first !</span>
+        }
+      </div>
+    );
+  }
+}
+
+PostComments.propTypes = {
+  post: PropTypes.string.isRequired,
+  comments: PropTypes.array,
+  dispatch: PropTypes.func.isRequired,
+};
+
+export default connect(
+  (state, props) => ({ comments: state.comments.data.filter(comment => comment.postCuid === props.post) })
+)(PostComments);

client/modules/Post/components/PostComments/formComponent/CommentForm.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import styles from '../PostComments.css';
+
+export class CommentForm extends Component {
+ /* state = {
+    author: '',
+    text: '',
+  }*/
+
+  toaddComment = () => {
+    const author = this.refs.name;
+    const text = this.refs.comment;
+    if (author.value && text.value) {
+      this.props.addComment(author.value, text.value);
+      this.refs.name.value = '';
+      this.refs.comment.value = '';
+    } else {
+      alert('No, pls fill all inputs ');
+    }
+  }
+  handleChange = (e) => {
+    this.setState({
+      [e.target.name]: [e.target.value],
+    });
+  }
+
+  render() {
+    return (
+      <div className={`${styles['comment-form']}`}>
+        <h3>New comment</h3>
+        <div>
+          <input
+            type="text"
+            placeholder="Author name"
+            required="required"
+            className={`${styles['author-input']}`}
+            ref="name"
+            name="author"
+            onChange={this.handleChange}
+          />
+        </div>
+        <div className={`${styles['form-item']}`}>
+          <textarea type="text" name="text" className={`${styles['comment-input']}`} ref="comment" onChange={this.handleChange} />
+        </div>
+        <div className={`${styles['form-item']}`}>
+          <input
+            type="button"
+            className={`${styles['sent-comment-button']}`}
+            value="Add comment"
+            onClick={this.toaddComment}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+CommentForm.propTypes = {
+  addComment: PropTypes.func.isRequired,
+};
+
+export default connect()(CommentForm);

client/modules/Post/components/PostComments/formComponent/CommentUser.js

@@ -0,0 +1,46 @@
+/* eslint-disable prefer-template,react/jsx-indent */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { todeleteCommentAPI } from '../CommentActions';
+import styles from '../PostComments.css';
+import postStyles from '../../PostListItem/PostListItem.css';
+
+export class UserComment extends Component {
+  // console.log(this.props.comment)
+  // state = {
+  //   author: '',
+  //   text: '',
+  // }
+
+  toeditComment = () => {
+    alert('NOT WORKING YET ');
+  }
+
+  render() {
+    const { author, dateAdded, text, cuid } = this.props.comment;
+    const commentTime = new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds();
+    return (
+    <div className={`${styles['form-user-comment']}`} key={cuid}>
+      <div className={`${styles['comment-info']}`}>
+        <span className={`${styles['comment-author']}`}>{`${author}`}</span>
+        <span className={`${styles['comment-date']}`}>{`${new Date(dateAdded).toLocaleDateString()} ${commentTime}`}</span>
+      </div>
+      <div className={`${styles['comment-content']}`}>
+{/*        {!this.editComment && <p>{text}</p>}
+        {this.editComment && <textarea defaultValue={text} />}*/}
+        <p>{text}</p>
+      </div>
+      <p className={postStyles['post-action']}><span onClick={() => this.toeditComment()}>Edit</span><span onClick={() => todeleteCommentAPI(cuid, this.props.dispatch)}>Destroy</span></p>
+
+    </div>
+  );
+  }
+}
+
+UserComment.propTypes = {
+  comment: PropTypes.object.isRequired,
+  dispatch: PropTypes.func.isRequired,
+};
+
+export default connect()(UserComment);

client/modules/Post/components/PostListItem/PostListItem.css

@@ -33,10 +33,11 @@
   text-decoration: none;
   font-size: 14px;
   font-style: italic;
+  font-weight: 500;
 }
 
 .post-action a:hover{
-  color: #EF5350;
+  color: tomato;
 }
 
 .divider{

client/modules/Post/pages/PostDetailPage/PostDetailPage.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import Helmet from 'react-helmet';
 import { FormattedMessage } from 'react-intl';
-
+import PostComments from '../../components/PostComments/PostComments';
+import { getCommentsRequestAPI } from '../../components/PostComments/CommentActions';
 // Import Style
 import styles from '../../components/PostListItem/PostListItem.css';
 
@@ -21,6 +22,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>
+        <PostComments post={props.post.cuid} />
       </div>
     </div>
   );
@@ -29,6 +31,8 @@ export function PostDetailPage(props) {
 // Actions required to provide data for this component to render in server side.
 PostDetailPage.need = [params => {
   return fetchPost(params.cuid);
+}, () => {
+  return getCommentsRequestAPI();
 }];
 
 // Retrieve data from store as props