diff --git a/client/modules/Post/components/PostComments/CommentActions.js b/client/modules/Post/components/PostComments/CommentActions.js new file mode 100644 index 000000000..737720b73 --- /dev/null +++ b/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 }); + }); +} + diff --git a/client/modules/Post/components/PostComments/CommentReducer.js b/client/modules/Post/components/PostComments/CommentReducer.js new file mode 100644 index 000000000..548893d0b --- /dev/null +++ b/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; diff --git a/client/modules/Post/components/PostComments/PostComments.css b/client/modules/Post/components/PostComments/PostComments.css new file mode 100644 index 000000000..16d7e031b --- /dev/null +++ b/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; +} diff --git a/client/modules/Post/components/PostComments/PostComments.js b/client/modules/Post/components/PostComments/PostComments.js new file mode 100644 index 000000000..84913e99e --- /dev/null +++ b/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 ( +
+ + { + comments.length ? + comments.map((comment) => ()) : + PLease, leave your comment, be first ! + } +
+ ); + } +} + +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..a01ff0bd2 --- /dev/null +++ b/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 ( +
+

New comment

+
+ +
+
+