Comment

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: [],
+    }));
+  };
+}

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;

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;
+}

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 (
+    <div className={`${styles['creator-container']}`}>
+      <h4>What do you think about it? Let's text</h4>
+      <div className={`${styles['input-area']}`}>
+        <input
+          placeholder="Name"
+          onChange={e => setName(e.target.value)}
+          value={name}
+        />
+        <textarea
+          placeholder="Message"
+          onChange={e => setText(e.target.value)}
+          value={text}
+        />
+      </div>
+      <button
+        className={`${styles['btn-send']}`}
+        onClick={() => addComment()}
+      >
+      Send
+      </button>
+    </div>
+  );
+}
+
+CommentCreator.propTypes = {
+  handleAdd: PropTypes.func.isRequired,
+  post: PropTypes.string.isRequired,
+};
+
+export default CommentCreator;

client/modules/Comment/components/CommentItem/CommentItem.css

@@ -0,0 +1,68 @@
+.comment-single {
+  position: relative;
+  display: flex;
+  margin: 15px;
+  padding: 15px;
+
+  background-color: #ccc;
+
+  border-radius: 20px;
+}
+
+.btn-delete {
+  position: absolute;
+
+  width: 20px;
+  height: 20px;
+  right: 20px;
+  top: 10px;
+
+  font-size: 15px;
+
+  border: 0;
+  background-color: transparent;
+}
+
+.btn-delete:hover {
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.comment-data {
+  display: flex;
+  flex-direction: column;
+}
+
+.comment-single:hover {
+  box-shadow: 0 0 10px rgba(0,0,0,0.5);
+}
+
+.comment-single h3 {
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
+}
+
+.comment-date {
+  margin-bottom: 6px;
+
+  font-size: 12px;
+}
+
+.comment-text {
+  padding-bottom: 6px;
+}
+
+.btn-edit {
+  width: fit-content;
+  background-color: transparent;
+  border: 0;
+
+  text-align: left;
+
+  cursor: pointer;
+}
+
+.btn-edit:hover {
+  font-weight: bold;
+}

client/modules/Comment/components/CommentItem/CommentItem.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Moment from 'react-moment';
+
+import styles from './CommentItem.css';
+
+function CommentItem(props) {
+  return (
+    <div
+      className={`${styles['comment-single']}`}
+      key={props.data.cuid}
+    >
+      <h3>{props.data.name}</h3>
+      <div
+        className={`${styles['comment-data']}`}
+      >
+        <span
+          className={`${styles['comment-date']}`}
+        >
+          <Moment format="DD.MM.YY HH:mm">
+            {props.data.date}
+          </Moment>
+        </span>
+        <span
+          className={`${styles['comment-text']}`}
+        >
+        {props.data.text}
+        </span>
+        <button
+          className={`${styles['btn-edit']}`}
+        >
+        Edit
+        </button>
+        <button
+          className={`${styles['btn-delete']}`}
+          onClick={() => props.handleDelete(props.data.cuid)}
+        >
+        x
+        </button>
+      </div>
+    </div>
+  );
+}
+
+CommentItem.propTypes = {
+  data: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+    date: PropTypes.string.isRequired,
+    cuid: PropTypes.string.isRequired,
+  }),
+  handleDelete: PropTypes.func.isRequired,
+};
+
+export default CommentItem;

client/modules/Comment/components/CommentList.css

@@ -0,0 +1,3 @@
+.comment-container {
+  max-width: 500px;
+}

client/modules/Comment/components/CommentList.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import CommentItem from './CommentItem/CommentItem';
+
+import styles from './CommentList.css';
+
+function CommentList(props) {
+  return (
+    <div
+      className={`${styles['comment-container']}`}
+    >
+        {props.data ? props.data.map(comment => (
+          <CommentItem
+            key={comment.cuid}
+            data={comment}
+            handleDelete={props.handleDelete}
+          />
+    )) : <p>Download...</p>}
+    </div>
+  );
+}
+
+CommentList.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    date: PropTypes.string.isRequired,
+    cuid: PropTypes.string.isRequired,
+    post: PropTypes.string.isRequired,
+  })),
+  handleDelete: PropTypes.func.isRequired,
+};
+
+export default CommentList;