-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature(comments): create and retrieve comments
- create and retrieve comments [Delivers #160609520]
- Loading branch information
1 parent
34f5bff
commit ce0b06d
Showing
19 changed files
with
704 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import RetrieveCommentForm from './RetrieveCommentForm'; | ||
|
|
||
| export const CommentList = ({ comments }) => ( | ||
| <div> | ||
| {comments.map(comment => ( | ||
| <RetrieveCommentForm key={comment.id} comment={comment} /> | ||
| ))} | ||
| </div> | ||
| ); | ||
|
|
||
| CommentList.propTypes = { | ||
| comments: PropTypes.array, | ||
| }; | ||
|
|
||
| CommentList.defaultProps = { | ||
| comments: [], | ||
| }; | ||
|
|
||
| export default CommentList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import React, { Component } from 'react'; | ||
| import { connect } from 'react-redux'; | ||
| import PropTypes from 'prop-types'; | ||
| import { bindActionCreators } from 'redux'; | ||
| import Loader from 'react-loader'; | ||
| import CreateCommentForm from './CreateCommentForm'; | ||
| import CommentList from './CommentList'; | ||
| import { fetchComments, addComment } from '../../actions/articleActions'; | ||
|
|
||
| export class Comments extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| body: '', | ||
| }; | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| const { | ||
| match: { | ||
| params: { article }, | ||
| }, | ||
| } = this.props; | ||
| const { fetchComments } = this.props; | ||
| fetchComments(article); | ||
| } | ||
|
|
||
| componentWillReceiveProps(nextProps) { | ||
| if (nextProps.addCommentSuccess === true) { | ||
| window.location.reload(); | ||
| } | ||
| if (nextProps.isLoggedIn === false) { | ||
| const { history } = this.props; | ||
| history.push('/login'); | ||
| } | ||
| } | ||
|
|
||
| handleSubmit = event => { | ||
| event.preventDefault(); | ||
| const { | ||
| match: { | ||
| params: { article }, | ||
| }, | ||
| } = this.props; | ||
| const { body } = this.state; | ||
| const payload = { | ||
| comment: { | ||
| body, | ||
| }, | ||
| }; | ||
| const { addComment } = this.props; | ||
| addComment(payload, article); | ||
| } | ||
|
|
||
| resetForm = () => { | ||
| this.setState({ | ||
| body: '', | ||
| }); | ||
| }; | ||
|
|
||
| handleEditorChange = (value) => { | ||
| this.setState({ body: value }); | ||
| } | ||
|
|
||
| render() { | ||
| const { body } = this.state; | ||
| const { loading, commentsPayload } = this.props; | ||
| return ( | ||
| <div> | ||
| <CreateCommentForm | ||
| onSubmit={this.handleSubmit} | ||
| onChange={this.handleEditorChange} | ||
| onClick={this.resetForm} | ||
| body={body} | ||
| /> | ||
| <Loader loaded={!loading}> | ||
| {Object.keys(commentsPayload).length > 0 | ||
| && <CommentList comments={commentsPayload.comments} /> | ||
| } | ||
| </Loader> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| const matchDispatchToProps = (dispatch) => bindActionCreators({ | ||
| fetchComments, | ||
| addComment, | ||
| }, dispatch); | ||
|
|
||
| const mapStateToProps = (state) => ({ | ||
| commentsPayload: state.article.commentsPayload, | ||
| addCommentSuccess: state.article.addCommentSuccess, | ||
| isLoggedIn: state.user.isLoggedIn, | ||
| loading: state.user.loading, | ||
| }); | ||
|
|
||
| Comments.propTypes = { | ||
| addComment: PropTypes.func.isRequired, | ||
| match: PropTypes.object.isRequired, | ||
| fetchComments: PropTypes.func.isRequired, | ||
| commentsPayload: PropTypes.object.isRequired, | ||
| addCommentSuccess: PropTypes.bool, | ||
| loading: PropTypes.bool, | ||
| isLoggedIn: PropTypes.bool, | ||
| history: PropTypes.object.isRequired, | ||
| }; | ||
|
|
||
| Comments.defaultProps = { | ||
| addCommentSuccess: false, | ||
| loading: false, | ||
| isLoggedIn: true, | ||
| }; | ||
|
|
||
| export default connect( | ||
| mapStateToProps, | ||
| matchDispatchToProps, | ||
| )(Comments); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import ReactQuill from 'react-quill'; | ||
| import 'react-quill/dist/quill.snow.css'; | ||
|
|
||
| export const CreateCommentForm = ({ | ||
| onSubmit, | ||
| onChange, | ||
| onClick, | ||
| body, | ||
| }) => ( | ||
| <div className="container quill-container" style={{ paddingTop: '50px' }}> | ||
| <div className="row"> | ||
| <div className="col-12"> | ||
| <form id="add-comment-form" onSubmit={onSubmit}> | ||
| <div className="container"> | ||
| <div className="form-group"> | ||
| <div className="text-editor"> | ||
| <div className="quill-div"> | ||
| <ReactQuill | ||
| id="text-editor" | ||
| theme="" | ||
| placeholder="Please add a comment" | ||
| className="quill-height-comments" | ||
| value={body} | ||
| onChange={onChange} | ||
| required | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <button id="comment-submit-button" type="submit" className="btn btn-outline-primary m-r-10">Save</button> | ||
| <button type="button" id="clear-button" className="btn btn-outline-warning m-r-10" onClick={onClick}>Clear</button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||
| CreateCommentForm.propTypes = { | ||
| onChange: PropTypes.func.isRequired, | ||
| onSubmit: PropTypes.func.isRequired, | ||
| body: PropTypes.string.isRequired, | ||
| onClick: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| export default CreateCommentForm; |
Oops, something went wrong.