From 1a20c81dc03fb422c8c09c9f348ada29c8f2399b Mon Sep 17 00:00:00 2001 From: Dmitry Baranov Date: Wed, 29 Jan 2020 11:13:25 +0200 Subject: [PATCH 1/4] PostList components added. Deprecation warnings from mongoose package resolved. --- Intl/localizationData/en.js | 15 +++ Intl/localizationData/fr.js | 4 + client/modules/Post/CommentsActions.js | 83 +++++++++++++++++ .../CommentFormWidget/CommentFormWidget.css | 3 + .../CommentFormWidget/CommentFormWidget.js | 60 ++++++++++++ .../components/CommentList/CommentList.css | 9 ++ .../components/CommentList/CommentList.js | 92 +++++++++++++++++++ .../CommentListItem/CommentListItem.css | 3 + .../CommentListItem/CommentListItem.js | 21 +++++ client/modules/Post/components/PostList.js | 1 + .../components/PostListItem/PostListItem.css | 4 + .../components/PostListItem/PostListItem.js | 10 ++ .../pages/PostDetailPage/PostDetailPage.js | 4 + .../Post/pages/PostListPage/PostListPage.js | 1 + package-lock.json | 41 ++++++--- server/server.js | 24 +++-- 16 files changed, 355 insertions(+), 20 deletions(-) create mode 100644 client/modules/Post/CommentsActions.js create mode 100644 client/modules/Post/components/CommentFormWidget/CommentFormWidget.css create mode 100644 client/modules/Post/components/CommentFormWidget/CommentFormWidget.js create mode 100644 client/modules/Post/components/CommentList/CommentList.css create mode 100644 client/modules/Post/components/CommentList/CommentList.js create mode 100644 client/modules/Post/components/CommentListItem/CommentListItem.css create mode 100644 client/modules/Post/components/CommentListItem/CommentListItem.js diff --git a/Intl/localizationData/en.js b/Intl/localizationData/en.js index 79b481d3c..0169ee1ea 100644 --- a/Intl/localizationData/en.js +++ b/Intl/localizationData/en.js @@ -12,6 +12,21 @@ export default { postTitle: 'Post Title', postContent: 'Post Content', submit: 'Submit', + addComment: 'Add comment', + editComment: 'Edit comment', + replyComment: 'Reply', + deleteComment: 'Delete comment', + emptyComments: 'No comments added yet. Let\'s write something awesome!', + commentForm: { + author: { + label: 'Comment Author', + placeholder: 'Write your name here', + }, + content: { + label: 'Comment body', + placeholder: 'Place your thoughts here', + }, + }, comment: `user {name} {value, plural, =0 {does not have any comments} =1 {has # comment} diff --git a/Intl/localizationData/fr.js b/Intl/localizationData/fr.js index 7e5b81b3f..002552f9b 100644 --- a/Intl/localizationData/fr.js +++ b/Intl/localizationData/fr.js @@ -12,6 +12,10 @@ export default { postTitle: 'Titre de l\'article', postContent: 'Contenu après', submit: 'Soumettre', + addComent: 'Ajouter un commentaire', + editComment: 'Modifier le commentaire', + replyComment: 'Répondre', + deleteComment: 'Supprimer le commentaire', comment: `user {name} {value, plural, =0 {does not have any comments} =1 {has # comment} diff --git a/client/modules/Post/CommentsActions.js b/client/modules/Post/CommentsActions.js new file mode 100644 index 000000000..f3dbcc844 --- /dev/null +++ b/client/modules/Post/CommentsActions.js @@ -0,0 +1,83 @@ +import callApi from '../../util/apiCaller'; + +// Export Constants +export const ADD_COMMENT_SUCCESS = 'ADD_COMMENT_SUCCESS'; +export const ADD_COMMENT_FAILURE = 'ADD_COMMENT_FAILURE'; + +export const EDIT_COMMENT_SUCCESS = 'EDIT_COMMENT_SUCCESS'; +export const EDIT_COMMENT_FAILURE = 'EDIT_COMMENT_FAILURE'; + +export const DELETE_COMMENT_SUCCESS = 'DELETE_COMMENT_SUCCESS'; +export const DELETE_COMMENT_FAILURE = 'DELETE_COMMENT_FAILURE'; + +// Export Actions +export function addCommentSuccess(comment) { + return { + type: ADD_COMMENT_SUCCESS, + comment, + }; +} + +export function addCommentFailure(error) { + return { + type: ADD_COMMENT_FAILURE, + error, + }; +} + +export function addCommentRequest(comment) { + return (dispatch) => { + return callApi('comments', 'post', { + ...comment, + }) + .then(res => dispatch(addCommentSuccess(res.comment))) + .catch(error => dispatch(addCommentFailure(error))); + }; +} + +export function editCommentSuccess(comment) { + return { + type: EDIT_COMMENT_SUCCESS, + comment, + }; +} + +export function editCommentFailure(error) { + return { + type: EDIT_COMMENT_FAILURE, + error, + }; +} + +export function editCommentRequest(comment) { + return (dispatch) => { + return callApi('comments', 'patch', { + ...comment, + }) + .then(res => dispatch(editCommentSuccess(res.comment))) + .catch(error => dispatch(editCommentFailure(error))); + }; +} + + +export function deleteCommentSuccess(comment) { + return { + type: DELETE_COMMENT_SUCCESS, + comment, + }; +} + +export function deleteCommentFailure(error) { + return { + type: DELETE_COMMENT_FAILURE, + error, + }; +} + +export function deleteCommentRequest(commentId) { + return (dispatch) => { + return callApi(`comments/${commentId}`, 'delete') + .then(res => dispatch(deleteCommentSuccess(res.comment))) + .catch(error => dispatch(deleteCommentFailure(error))); + }; +} diff --git a/client/modules/Post/components/CommentFormWidget/CommentFormWidget.css b/client/modules/Post/components/CommentFormWidget/CommentFormWidget.css new file mode 100644 index 000000000..11be4b362 --- /dev/null +++ b/client/modules/Post/components/CommentFormWidget/CommentFormWidget.css @@ -0,0 +1,3 @@ +.container { + +} diff --git a/client/modules/Post/components/CommentFormWidget/CommentFormWidget.js b/client/modules/Post/components/CommentFormWidget/CommentFormWidget.js new file mode 100644 index 000000000..a9adc3ca1 --- /dev/null +++ b/client/modules/Post/components/CommentFormWidget/CommentFormWidget.js @@ -0,0 +1,60 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { FormattedMessage, injectIntl } from 'react-intl'; + +// Import styles +import styles from './CommentFormWidget.css'; + +function CommentFormWidget({ initialValues, onChange, onSubmit }, { intl }) { + const { author, content } = initialValues || {}; + return ( +
+ + onChange(e)} + /> + +