From 4cc6d39b3a7a2fbbc8a81a303e1960f54779d1a5 Mon Sep 17 00:00:00 2001
From: morganlloyd11 <m.lloyd711@mybvc.ca>
Date: Thu, 3 Jul 2025 20:56:29 -0600
Subject: [PATCH 1/2]  added file for new post and set up auth0

---
 src/pages/posts/new.jsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/pages/posts/new.jsx

diff --git a/src/pages/posts/new.jsx b/src/pages/posts/new.jsx
new file mode 100644
index 0000000..e69de29

From 8ff035d3a4432b6a5a5ff2fd590607c4e590bb08 Mon Sep 17 00:00:00 2001
From: morganlloyd11 <m.lloyd711@mybvc.ca>
Date: Thu, 3 Jul 2025 21:12:53 -0600
Subject: [PATCH 2/2] created form page with redirect to homepage on submission

---
 src/pages/posts/new.jsx | 82 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 82 insertions(+)

diff --git a/src/pages/posts/new.jsx b/src/pages/posts/new.jsx
index e69de29..d86ea74 100644
--- a/src/pages/posts/new.jsx
+++ b/src/pages/posts/new.jsx
@@ -0,0 +1,82 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+
+export default function NewPost() {
+  // track form fields
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+
+  // store any errors from the server
+  const [errors, setErrors] = useState([]);
+
+  // next.js router to redirect after form submits
+  const router = useRouter();
+
+  // handle the form submit
+  const handleSubmit = async (e) => {
+    // stop page from refreshing
+    e.preventDefault();
+
+    // clear any old errors
+    setErrors([]);
+
+    // send post request to api
+    const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/posts`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ title, body }),
+    });
+
+    // if work go back home
+    if (res.status === 201) {
+      router.push("/");
+    } else {
+      // if error show on form
+      const data = await res.json();
+      setErrors(data.errors || ["something wrong"]);
+    }
+  };
+
+  return (
+    <div style={{ maxWidth: "600px", margin: "50px auto", padding: "20px" }}>
+
+      <h1>new post</h1>
+
+      {/* show errors if any*/}
+      {errors.length > 0 && (
+        <ul>
+          {errors.map((err, i) => (
+            <li key={i} style={{ color: "red" }}>{err}</li>
+          ))}
+        </ul>
+      )}
+
+      {/* form */}
+      <form onSubmit={handleSubmit}>
+        <div style={{ marginBottom: "10px" }}>
+          <input
+            type="text"
+            placeholder="title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            style={{ width: "300px", padding: "8px" }}
+          />
+        </div>
+
+        <div style={{ marginBottom: "10px" }}>
+          <textarea
+            placeholder="body"
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+            rows="5"
+            style={{ width: "300px", padding: "8px" }}
+          />
+        </div>
+
+        <button type="submit" style={{ padding: "10px 20px" }}>
+          create post
+        </button>
+      </form>
+    </div>
+  );
+}