From c3ccc2fe486c3b0ad98002b3515ba827a8358cf5 Mon Sep 17 00:00:00 2001 From: aleksey leichenko Date: Tue, 21 May 2019 13:26:36 +0300 Subject: [PATCH 1/3] added form to listItem --- .../components/PostComments/PostComments.js | 47 +++++++++++++++ .../PostComments/formComponent/CommentForm.js | 58 +++++++++++++++++++ .../formComponent/CommentsUser.js | 31 ++++++++++ 3 files changed, 136 insertions(+) create mode 100644 client/modules/Post/components/PostComments/PostComments.js create mode 100644 client/modules/Post/components/PostComments/formComponent/CommentForm.js create mode 100644 client/modules/Post/components/PostComments/formComponent/CommentsUser.js diff --git a/client/modules/Post/components/PostComments/PostComments.js b/client/modules/Post/components/PostComments/PostComments.js new file mode 100644 index 000000000..6dbcbb470 --- /dev/null +++ b/client/modules/Post/components/PostComments/PostComments.js @@ -0,0 +1,47 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import CommentForm from '../PostComments/formComponent/CommentForm'; +import CommentsUser from '../PostComments/formComponent/CommentsUser'; + +import styles from '../PostComments/PostComments.css'; + +import { addCommentRequest } from '../../components/PostComments/CommentActions'; + +export class PostComments extends Component { + constructor(props) { + super(props); + + this.addComment = this.addComment.bind(this); + } + + addComment(data) { + const comment = data; + comment.postCuid = this.props.post; + return this.props.dispatch(addCommentRequest(comment)); + } + + render() { + const { comments } = this.props; + return ( +
+ + { + comments.length ? + comments.map((comment) => ()) : + There is no any comments yet!
You can write the first comment!
+ } +
+ ); + } +} + +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); diff --git a/client/modules/Post/components/PostComments/formComponent/CommentForm.js b/client/modules/Post/components/PostComments/formComponent/CommentForm.js new file mode 100644 index 000000000..556e9461c --- /dev/null +++ b/client/modules/Post/components/PostComments/formComponent/CommentForm.js @@ -0,0 +1,58 @@ +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 { + constructor(props) { + super(props); + this.addComment = this.addComment.bind(this); + } + + addComment() { + const author = this.refs.name.value; + const text = this.refs.comment.value; + if (author || text) { + this.props.addComment({ author, text }); + this.refs.name.value = ''; + this.refs.comment.value = ''; + } else { + alert('All the fields should be filled!'); + } + } + + render() { + return ( +
+

Add yor comment

+
+ +
+
+