Please enter the commit message for your changes. Lines starting

client/modules/Post/components/PostListItem/Comment.js

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  margin-top: 10px;
+  padding: 0 15px;
+  background: #edf6f7;
+`;
+
+const Button = styled.button`
+  cursor: pointer;
+  font-size: 12px;
+  width: 5vw;
+  height: 20px;
+  border-radius: 10px;
+  background: #e1f7fa;
+  outline: none;
+  margin-top: 10px;
+`;
+
+function Comment(props) {
+  const [showEdit, setShowEdit] = useState(false);
+  const [editText, setEditText] = useState("");
+  useEffect(() => {
+    setEditText(props.text);
+  }, [props.text]);
+
+  const testFunction = e => {
+    props.updateComment(props.id, editText);
+    setEditText("");
+    setShowEdit(!showEdit);
+    e.preventDefault;
+  };
+  return (
+    <Wrapper>
+      <h3>{props.name}</h3>
+      {!showEdit ? (
+        <p>{props.text}</p>
+      ) : (
+        <form onSubmit={e => testFunction(e)}>
+          <input value={editText} onChange={e => setEditText(e.target.value)} />
+        </form>
+      )}
+
+      <Button onClick={() => props.deleteComment(props.id)}>Delete</Button>
+      <Button onClick={() => setShowEdit(!showEdit)}>Edit</Button>
+    </Wrapper>
+  );
+}
+
+export default Comment;

client/modules/Post/components/PostListItem/CommentList.js

@@ -0,0 +1,21 @@
+import React from "react";
+import Comment from "./Comment";
+
+function CommentList(props) {
+  return (
+    <div>
+      {props.arrComment.map(val => (
+        <Comment
+          updateComment={props.updateComment}
+          deleteComment={props.deleteComment}
+          key={val.id}
+          name={val.name}
+          text={val.text}
+          id={val.id}
+        />
+      ))}
+    </div>
+  );
+}
+
+export default CommentList;

client/modules/Post/components/PostListItem/Input.js

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Field = styled.input`
+  margin-top: 5px;
+  width: 30vw;
+  font-size: 18px;
+  height: 30px;
+  padding: 0.5rem;
+  outline: none;
+  border: none;
+  border-radius: 10px;
+  background: #e1f7fa;
+  border-bottom: 1px solid #f5feff;
+`;
+
+const Button = styled.button`
+  cursor: pointer;
+  font-size: 15px;
+  width: 10vw;
+  height: 25px;
+  border-radius: 10px;
+  background: #e1f7fa;
+  outline: none;
+  margin-top: 10px;
+`;
+
+function Input(props) {
+  const [name, setName] = useState("");
+  const [comment, setComment] = useState("");
+
+  return (
+    <Form
+      onSubmit={e => {
+        props.getComment(name, comment);
+        setName("");
+        setComment("");
+        e.preventDefault();
+      }}
+    >
+      <Field
+        required
+        placeholder="name"
+        value={name}
+        type="text"
+        onChange={e => setName(e.target.value)}
+      />
+
+      <Field
+        placeholder="comment"
+        required
+        value={comment}
+        type="text"
+        onChange={e => setComment(e.target.value)}
+      />
+      <Button type="submit">Add</Button>
+    </Form>
+  );
+}
+
+export default Input;

client/modules/Post/components/PostListItem/PostListItem.js

@@ -1,22 +1,73 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router';
-import { FormattedMessage } from 'react-intl';
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router";
+import { FormattedMessage } from "react-intl";
+import Input from "./Input";
+import CommentList from "./CommentList";
+import update from "react-addons-update";
 
 // Import Style
-import styles from './PostListItem.css';
+import styles from "./PostListItem.css";
 
 function PostListItem(props) {
+  const [comment, setComment] = useState([]);
+  const [show, setShow] = useState(false);
+
+  const getComment = (a, b) => {
+    const id = Math.round(Math.random() * 10000);
+    const obj = { name: a, text: b, id };
+
+    setComment([...comment, obj]);
+    setShow(!show);
+  };
+
+  const updateComment = (id, text) => {
+    const index = comment.findIndex(value => value.id === id);
+    const clone = comment;
+    const edit = update(clone, {
+      [index]: {
+        text: { $set: text }
+      }
+    });
+    setComment(edit);
+  };
+
+  const deleteComment = id => {
+    const newList = comment.filter(val => val.id !== id);
+    setComment(newList);
+  };
+
   return (
-    <div className={styles['single-post']}>
-      <h3 className={styles['post-title']}>
-        <Link to={`/posts/${props.post.slug}-${props.post.cuid}`} >
+    <div className={styles["single-post"]}>
+      <h3 className={styles["post-title"]}>
+        <Link to={`/posts/${props.post.slug}-${props.post.cuid}`}>
           {props.post.title}
         </Link>
       </h3>
-      <p className={styles['author-name']}><FormattedMessage id="by" /> {props.post.name}</p>
-      <p className={styles['post-desc']}>{props.post.content}</p>
-      <p className={styles['post-action']}><a href="#" onClick={props.onDelete}><FormattedMessage id="deletePost" /></a></p>
+      <p className={styles["author-name"]}>
+        <FormattedMessage id="by" /> {props.post.name}
+      </p>
+      <p className={styles["post-desc"]}>{props.post.content}</p>
+      <div className={styles["wrapper-div"]}>
+        <p className={styles["post-action"]}>
+          <a href="#" onClick={props.onDelete}>
+            <FormattedMessage id="deletePost" />
+          </a>
+        </p>
+        <p className={styles["post-action"]}>
+          <a href="#" onClick={() => setShow(!show)}>
+            <FormattedMessage id="Add Comment" />
+          </a>
+        </p>
+      </div>
+      {show && <Input getComment={getComment} />}
+      {!show && (
+        <CommentList
+          updateComment={updateComment}
+          deleteComment={deleteComment}
+          arrComment={comment}
+        />
+      )}
       <hr className={styles.divider} />
     </div>
   );
@@ -28,9 +79,9 @@ PostListItem.propTypes = {
     title: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired,
     slug: PropTypes.string.isRequired,
-    cuid: PropTypes.string.isRequired,
+    cuid: PropTypes.string.isRequired
   }).isRequired,
-  onDelete: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired
 };
 
 export default PostListItem;