added ability ro commet without save in case of reaload

client/modules/Post/components/PostCommentsComponents/AddCommentForm/AddCommentForm.css

@@ -0,0 +1,33 @@
+.add-comment-form {
+  margin-top: 10px;
+  background-color: #bec2bf;
+  border: 1px solid #000;
+  padding: 10px;
+}
+
+.comment-filed {
+  display: block;
+  width: 100%;
+  resize: none;
+  margin-bottom: 10px;
+}
+
+.name-field {
+  display: block;
+  margin-bottom: 10px;
+}
+
+.btn-add-comment {
+  display: inline-block;
+  padding: 10px 20px;
+  color: #fff;
+  background-color: #000;
+  border-radius: 10px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+
+.btn-add-comment:disabled{
+  opacity: 0.5;
+}

client/modules/Post/components/PostCommentsComponents/AddCommentForm/AddCommentForm.jsx

@@ -0,0 +1,67 @@
+import React, { Component } from "react";
+import styles from "./AddCommentForm.css";
+import PropTypes from "prop-types";
+
+class AddCommentForm extends Component {
+  state = {
+    formCommentText: "",
+    formCommentName: "",
+  };
+  handleCommentText = (text) => {
+    this.setState({
+      formCommentText: text,
+    });
+  };
+  handleCommentName = (text) => {
+    this.setState({
+      formCommentName: text,
+    });
+  };
+  onSubmitForm = (e) => {
+    e.preventDefault();
+    this.props.onAddComment(
+      this.state.formCommentName,
+      this.state.formCommentText
+    );
+    this.setState({
+      formCommentName: "",
+      formCommentText: "",
+    });
+  };
+
+  render() {
+    return (
+      <form onSubmit={this.onSubmitForm} className={styles["add-comment-form"]}>
+        <label htmlFor="text-comment">Text of Your comment</label>
+        <textarea
+          className={styles["comment-filed"]}
+          name=""
+          id="text-comment"
+          onChange={(e) => this.handleCommentText(e.target.value)}
+          value={this.state.formCommentText}
+        ></textarea>
+        <label htmlFor="name">Your Name</label>
+        <input
+          onChange={(e) => this.handleCommentName(e.target.value)}
+          value={this.state.formCommentName}
+          id="name"
+          className={styles["name-field"]}
+          type="text"
+        />
+        <button
+          disabled={!this.state.formCommentName || !this.state.formCommentText}
+          className={styles["btn-add-comment"]}
+          type="submit"
+        >
+          Add Comment
+        </button>
+      </form>
+    );
+  }
+}
+
+AddCommentForm.propTypes = {
+  onAddComment: PropTypes.func.isRequired,
+};
+
+export default AddCommentForm;

client/modules/Post/components/PostCommentsComponents/ChangeCommentForm/ChangeCommentForm.css

@@ -0,0 +1,27 @@
+.add-comment-form {
+  margin-top: 10px;
+  background-color: #bec2bf;
+  border: 1px solid #000;
+  padding: 10px;
+}
+
+.comment-filed {
+  display: block;
+  width: 100%;
+  resize: none;
+  margin-bottom: 10px;
+}
+
+.btn-add-comment {
+  padding: 10px 20px;
+  color: #fff;
+  background-color: #000;
+  border-radius: 10px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+.change-commentform-btns{
+  display: flex;
+  justify-content: space-between;
+}

client/modules/Post/components/PostCommentsComponents/ChangeCommentForm/ChangeCommentForm.jsx

@@ -0,0 +1,62 @@
+import React, { Component } from "react";
+import styles from "./ChangeCommentForm.css";
+import PropTypes from "prop-types";
+
+class ChangeCommentForm extends Component {
+  state = {
+    formCommentText: "",
+  };
+  handleCommentText = (text) => {
+    this.setState({
+      formCommentText: text,
+    });
+  };
+  componentDidMount() {
+    this.handleCommentText(this.props.comment.text);
+  }
+  onSubmitForm = (e) => {
+    e.preventDefault();
+    this.props.onEditComment(
+      this.state.formCommentText,
+      this.props.comment.createDate
+    );
+    this.props.onShowChangeForm();
+  };
+  render() {
+    return (
+      <form onSubmit={this.onSubmitForm} className={styles["add-comment-form"]}>
+        <label htmlFor="text-comment">Text of Your comment</label>
+        <textarea
+          className={styles["comment-filed"]}
+          name=""
+          id="text-comment"
+          onChange={(e) => this.handleCommentText(e.target.value)}
+          value={this.state.formCommentText}
+        ></textarea>
+        <div className={styles["change-commentform-btns"]}>
+          <button className={styles["btn-add-comment"]} type="submit">
+            Save
+          </button>
+          <button
+            onClick={this.props.onShowChangeForm}
+            className={styles["btn-add-comment"]}
+          >
+            Deny
+          </button>
+        </div>
+      </form>
+    );
+  }
+}
+
+ChangeCommentForm.propTypes = {
+  comment: PropTypes.shape({
+    createDate: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+  }).isRequired,
+  onShowChangeForm: PropTypes.func.isRequired,
+  onEditComment: PropTypes.func.isRequired,
+};
+
+export default ChangeCommentForm;

client/modules/Post/components/PostCommentsComponents/Comment/Comment.css

@@ -0,0 +1,35 @@
+.comment-block {
+  border: 1px solid #000;
+  padding: 20px 10px;
+  margin: 10px 0;
+}
+.comment-text {
+  margin-bottom: 10px;
+  background-color: #edf0ee;
+  border-radius: 10px;
+  padding: 5px;
+  line-height: 1.5;
+}
+.comment-data-block {
+  display: flex;
+  justify-content: space-between;
+}
+
+.comment-data {
+  display: inline-block;
+}
+
+.comment-btns-block {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-around;
+}
+.comment-btn {
+  padding: 5px 10px;
+  cursor: pointer;
+  background-color: #404241;
+  color: #fff;
+  border-radius: 5px;
+  border: none;
+  outline: none;
+}

client/modules/Post/components/PostCommentsComponents/Comment/Comment.jsx

@@ -0,0 +1,65 @@
+import React, { Component } from "react";
+import styles from "./Comment.css";
+import ChangeCommentForm from "../ChangeCommentForm/ChangeCommentForm";
+import PropTypes from "prop-types";
+
+class Comment extends Component {
+  state = {
+    date: new Date(this.props.createDate).toLocaleDateString(),
+    isShowChangeForm: false,
+  };
+  onShowChangeForm = () => {
+    this.setState({
+      isShowChangeForm: !this.state.isShowChangeForm,
+    });
+  };
+  render() {
+    return (
+      <React.Fragment>
+        <div className={styles["comment-block"]}>
+          {this.state.isShowChangeForm && (
+            <ChangeCommentForm
+              comment={this.props}
+              onShowChangeForm={this.onShowChangeForm}
+              onEditComment={this.props.onEditComment}
+            />
+          )}
+          <p className={styles["comment-text"]}>{this.props.text}</p>
+          <div className={styles["comment-data-block"]}>
+            <span className={styles["comment-data"]}>
+              Comment was written by {this.props.name}
+            </span>
+            <span className={styles["comment-data"]}>
+              Created: {this.state.date}
+            </span>
+          </div>
+          <div className={styles["comment-btns-block"]}>
+            <button
+              onClick={this.onShowChangeForm}
+              className={styles["comment-btn"]}
+            >
+              Edit comment
+            </button>
+            <button
+              onClick={() => this.props.onDeleteComment(this.props.createDate)}
+              className={styles["comment-btn"]}
+            >
+              Delete comment
+            </button>
+          </div>
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+Comment.propTypes = {
+  createDate: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+  onDeleteComment: PropTypes.func.isRequired,
+  onEditComment: PropTypes.func.isRequired,
+  text: PropTypes.string.isRequired,
+  createDate: PropTypes.shape().isRequired,
+};
+
+export default Comment;

client/modules/Post/components/PostCommentsComponents/PostComments/PostComments.css

@@ -0,0 +1,9 @@
+.collapse-comments {
+  background-color: #03a9f4;
+  width: 100%;
+  padding: 10px 0;
+  text-align: center;
+  color: #fff;
+  cursor: pointer;
+  margin-top: 20px;
+}

client/modules/Post/components/PostCommentsComponents/PostComments/PostComments.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import AddCommentForm from "../AddCommentForm/AddCommentForm";
+import Comment from "../Comment/Comment.jsx";
+import styles from "./PostComments.css";
+import PropTypes from "prop-types";
+
+const PostComments = (props) => {
+  return (
+    <React.Fragment>
+      <AddCommentForm onAddComment={props.onAddComment} />
+      {props.comments.map((comment) => (
+        <Comment
+          onDeleteComment={props.onDeleteComment}
+          onEditComment={props.onEditComment}
+          key={comment.createDate}
+          {...comment}
+        />
+      ))}
+      <div
+        onClick={props.handleToggleComments}
+        className={styles["collapse-comments"]}
+      >
+        Collapse comments
+      </div>
+    </React.Fragment>
+  );
+};
+
+PostComments.propTypes = {
+  handleToggleComments: PropTypes.func.isRequired,
+  onAddComment: PropTypes.func.isRequired,
+  onDeleteComment: PropTypes.func.isRequired,
+  onEditComment: PropTypes.func.isRequired,
+  comments: PropTypes.array.isRequired,
+};
+
+export default PostComments;

client/modules/Post/components/PostCommentsComponents/PostCommentsBlock.css

@@ -0,0 +1,13 @@
+.wrapper-block {
+  margin-top: 10px;
+}
+
+.open-comments {
+  background-color: #03a9f4;
+  width: 100%;
+  padding: 10px 0;
+  text-align: center;
+  color: #fff;
+  cursor: pointer;
+}
+