#14 Add function to create post, alets, redirect to post

SandraBergstrom · Jun 23, 2023 · 5060bed · 5060bed
1 parent 8817103
commit 5060bed
Showing 1 changed file with 58 additions and 3 deletions.
diff --git a/src/pages/posts/PostCreateForm.js b/src/pages/posts/PostCreateForm.js
@@ -1,18 +1,23 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 
 import Form from "react-bootstrap/Form";
 import Button from "react-bootstrap/Button";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import Container from "react-bootstrap/Container";
+import Alert from "react-bootstrap/Alert";
 
 import Upload from "../../assets/upload.png";
 import Asset from "../../components/Asset";
 
 import styles from "../../styles/PostCreateEditForm.module.css";
 import appStyles from "../../App.module.css";
 import btnStyles from "../../styles/Button.module.css";
+import alertStyles from "../../styles/AlertMessages.module.css";
+
 import { Image } from "react-bootstrap";
+import { useHistory } from "react-router-dom";
+import { axiosReq } from "../../api/axiosDefaults";
 
 function PostCreateForm() {
   const [errors, setErrors] = useState({});
@@ -24,6 +29,9 @@ function PostCreateForm() {
   });
   const { title, content, image } = postData;
 
+  const imageInput = useRef(null);
+  const history = useHistory();
+
   const handleChange = (event) => {
     setPostData({
       ...postData,
@@ -41,6 +49,25 @@ function PostCreateForm() {
     }
   };
 
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const formData = new FormData();
+
+    formData.append("title", title);
+    formData.append("content", content);
+    formData.append("image", imageInput.current.files[0]);
+
+    try {
+      const { data } = await axiosReq.post("/posts/", formData);
+      history.push(`/posts/${data.id}`);
+    } catch (err) {
+      console.log(err);
+      if (err.response?.status !== 401) {
+        setErrors(err.response?.data);
+      }
+    }
+  };
+
   const textFields = (
     <div className="text-center">
       <Form.Group>
@@ -52,6 +79,15 @@ function PostCreateForm() {
           onChange={handleChange}
         />
       </Form.Group>
+      {errors.title?.map((message, idx) => (
+        <Alert
+          variant="warning"
+          key={idx}
+          className={alertStyles["alert-warning-custom"]}
+        >
+          {message}
+        </Alert>
+      ))}
       <Form.Group>
         <Form.Label>A few words about this moment...</Form.Label>
         <Form.Control
@@ -62,10 +98,19 @@ function PostCreateForm() {
           onChange={handleChange}
         />
       </Form.Group>
+      {errors.content?.map((message, idx) => (
+        <Alert
+          variant="warning"
+          key={idx}
+          className={alertStyles["alert-warning-custom"]}
+        >
+          {message}
+        </Alert>
+      ))}
 
       <Button
         className={`${btnStyles.Button} ${btnStyles.Blue}`}
-        onClick={() => {}}
+        onClick={() => history.goBack()}
       >
         cancel
       </Button>
@@ -76,7 +121,7 @@ function PostCreateForm() {
   );
 
   return (
-    <Form>
+    <Form onSubmit={handleSubmit}>
       <Row className={styles.Row}>
         <Col className="py-5 p-0 p-md-2" md={7} lg={8}>
           <Container
@@ -114,8 +159,18 @@ function PostCreateForm() {
                 id="image-upload"
                 accept="image/*"
                 onChange={handleChangeImage}
+                ref={imageInput}
               />
             </Form.Group>
+            {errors.image?.map((message, idx) => (
+              <Alert
+                variant="warning"
+                key={idx}
+                className={alertStyles["alert-warning-custom"]}
+              >
+                {message}
+              </Alert>
+            ))}
             <div className="d-md-none">{textFields}</div>
           </Container>
         </Col>