From 273775296fdb8a896618d07a4fdaa5cc6f166d6c Mon Sep 17 00:00:00 2001
From: SandraBergstrom <bergstrom_sandra@hotmail.com>
Date: Tue, 27 Jun 2023 14:16:53 +0000
Subject: [PATCH] #21 Add boilerplate

---
 src/pages/comments/CommentCreateForm.js     | 72 +++++++++++++++++++++
 src/styles/CommentCreateEditForm.module.css | 20 ++++++
 2 files changed, 92 insertions(+)
 create mode 100644 src/pages/comments/CommentCreateForm.js
 create mode 100644 src/styles/CommentCreateEditForm.module.css

diff --git a/src/pages/comments/CommentCreateForm.js b/src/pages/comments/CommentCreateForm.js
new file mode 100644
index 0000000..c461cf8
--- /dev/null
+++ b/src/pages/comments/CommentCreateForm.js
@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+
+import Form from "react-bootstrap/Form";
+import InputGroup from "react-bootstrap/InputGroup";
+
+import styles from "../../styles/CommentCreateEditForm.module.css";
+import Avatar from "../../components/Avatar";
+import { axiosRes } from "../../api/axiosDefaults";
+
+function CommentCreateForm(props) {
+  const { post, setPost, setComments, profileImage, profile_id } = props;
+  const [content, setContent] = useState("");
+
+  const handleChange = (event) => {
+    setContent(event.target.value);
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    try {
+      const { data } = await axiosRes.post("/comments/", {
+        content,
+        post,
+      });
+      setComments((prevComments) => ({
+        ...prevComments,
+        results: [data, ...prevComments.results],
+      }));
+      setPost((prevPost) => ({
+        results: [
+          {
+            ...prevPost.results[0],
+            comments_count: prevPost.results[0].comments_count + 1,
+          },
+        ],
+      }));
+      setContent("");
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  return (
+    <Form className="mt-2" onSubmit={handleSubmit}>
+      <Form.Group>
+        <InputGroup>
+          <Link to={`/profiles/${profile_id}`}>
+            <Avatar src={profileImage} />
+          </Link>
+          <Form.Control
+            className={styles.Form}
+            placeholder="my comment..."
+            as="textarea"
+            value={content}
+            onChange={handleChange}
+            rows={2}
+          />
+        </InputGroup>
+      </Form.Group>
+      <button
+        className={`${styles.Button} btn d-block ml-auto`}
+        disabled={!content.trim()}
+        type="submit"
+      >
+        post
+      </button>
+    </Form>
+  );
+}
+
+export default CommentCreateForm;
\ No newline at end of file
diff --git a/src/styles/CommentCreateEditForm.module.css b/src/styles/CommentCreateEditForm.module.css
new file mode 100644
index 0000000..1910267
--- /dev/null
+++ b/src/styles/CommentCreateEditForm.module.css
@@ -0,0 +1,20 @@
+.Form {
+    border: none;
+    border-bottom: 2px #00d1ff solid;
+  }
+  
+  .Button {
+    border: none;
+    background-color: #242a3d;
+    color: aliceblue;
+    border-radius: 100px;
+    padding: 4px 10px;
+    min-width: 75px;
+    margin: 5px;
+  }
+  
+  .Button:hover {
+    cursor: pointer;
+    background-color: aliceblue;
+    color: #242a3d;
+  }
\ No newline at end of file