diff --git a/client/modules/Comment/CommentActions.js b/client/modules/Comment/CommentActions.js new file mode 100644 index 000000000..cb911d38c --- /dev/null +++ b/client/modules/Comment/CommentActions.js @@ -0,0 +1,42 @@ +import callApi from '../../util/apiCaller'; + +export const GET_COMMENTS_BY_POST = 'GET_COMMENTS_BY_POST'; +export const ADD_COMMENT = 'ADD_COMMENT'; +export const DELETE_COMMENT = 'DELETE_COMMENT'; +export const GET_ERRORS = 'GET_ERRORS'; + +export function deleteComment(cuid) { + return (dispatch) => { + callApi('comments', 'delete', { cuid }); + return dispatch({ + type: DELETE_COMMENT, + payload: cuid, + }); + }; +} + +export function addComment(post, name, text) { + return (dispatch) => { + return callApi('comments', 'post', { post, name, text }).then(res => dispatch({ + type: ADD_COMMENT, + payload: res, + })) + .catch(() => dispatch({ + type: GET_ERRORS, + payload: null, + })); + }; +} + +export function getCommentsByPost(post) { + return (dispatch) => { + return callApi(`comment/${post}`).then(res => dispatch({ + type: GET_COMMENTS_BY_POST, + comments: res, + })) + .catch(() => dispatch({ + type: GET_COMMENTS_BY_POST, + comments: [], + })); + }; +} diff --git a/client/modules/Comment/CommentReducer.js b/client/modules/Comment/CommentReducer.js new file mode 100644 index 000000000..6d8093459 --- /dev/null +++ b/client/modules/Comment/CommentReducer.js @@ -0,0 +1,29 @@ +import { GET_COMMENTS_BY_POST, ADD_COMMENT, DELETE_COMMENT } from './CommentActions'; + +const initialState = { comments: [] }; + +const CommentReducer = (state = initialState, action) => { + switch (action.type) { + case GET_COMMENTS_BY_POST: + return { + comments: action.comments, + }; + case ADD_COMMENT: + return { + ...state, + comments: [...state.comments, action.payload], + }; + case DELETE_COMMENT: + return { + ...state, + comments: state.comments.filter(i => i.cuid !== action.payload), + }; + default: + return state; + } +}; + +export default CommentReducer; + +/* Selectors */ +export const getComments = state => state.comments.comments; diff --git a/client/modules/Comment/components/CommentCreator/CommentCreator.css b/client/modules/Comment/components/CommentCreator/CommentCreator.css new file mode 100644 index 000000000..5fe649985 --- /dev/null +++ b/client/modules/Comment/components/CommentCreator/CommentCreator.css @@ -0,0 +1,49 @@ +.creator-container { + max-width: 300px; + margin-left: 15px; +} + +.input-area { + display: flex; + flex-direction: column; +} + +.input-area input, +.input-area textarea { + margin-top: 10px; + padding: 10px; + font-size: 17px; +} + +.input-area textarea { + resize: none; +} + +.input-area input:focus, +.input-area textarea:focus, +.btn-send:focus { + outline: none; + border: 2px solid #555; +} + +.input-area input::-webkit-input-placeholder, +.input-area textarea::-webkit-input-placeholder { + font-size: 17px; + letter-spacing: 1.5px; +} + +.input-area input:hover::-webkit-input-placeholder, +.input-area input:focus::-webkit-input-placeholder, +.input-area textarea:hover::-webkit-input-placeholder, +.input-area textarea:focus::-webkit-input-placeholder { + color: #555; +} + +.btn-send { + margin-top: 5px; + padding: 7px; + width: 100%; + + font-size: 17px; + letter-spacing: 2px; +} \ No newline at end of file diff --git a/client/modules/Comment/components/CommentCreator/CommentCreator.js b/client/modules/Comment/components/CommentCreator/CommentCreator.js new file mode 100644 index 000000000..1bae5073e --- /dev/null +++ b/client/modules/Comment/components/CommentCreator/CommentCreator.js @@ -0,0 +1,45 @@ +import React, { useState } from 'react'; +import PropTypes from 'prop-types'; + +import styles from './CommentCreator.css'; + +function CommentCreator(props) { + const [name, setName] = useState(''); + const [text, setText] = useState(''); + + const addComment = () => { + props.handleAdd(props.post, name, text); + setName(''); + setText(''); + }; + return ( +
+

What do you think about it? Let's text

+
+ setName(e.target.value)} + value={name} + /> +