From 20fa6743931d77685e4b8ad3923302e2a662621f Mon Sep 17 00:00:00 2001
From: Samuel Shuert <me@thecoded.prof>
Date: Thu, 20 Nov 2025 18:54:26 +0000
Subject: [PATCH] feat: Add Post Creation

---
 react/src/App.tsx                       |  15 ++-
 react/src/components/BlogPostDetail.tsx |  16 ++-
 react/src/components/BlogPostForm.tsx   | 158 ++++++++++++++++++++++++
 react/src/components/BlogPostList.tsx   |   2 +-
 react/src/lib/post.ts                   |  64 +++++-----
 react/src/main.tsx                      |   2 +
 6 files changed, 223 insertions(+), 34 deletions(-)
 create mode 100644 react/src/components/BlogPostForm.tsx

diff --git a/react/src/App.tsx b/react/src/App.tsx
index b03050c..069e62e 100644
--- a/react/src/App.tsx
+++ b/react/src/App.tsx
@@ -1,11 +1,24 @@
 import { posts } from "./lib/post";
 import { BlogPostList } from "./components/BlogPostList";
+import { Link } from "react-router";
 
 export function App() {
   return (
     <>
+      <title>Posts</title>
       <div className="w-screen p-5 flex flex-col items-center gap-10">
-        <h1 className="text-5xl font-bold">Posts</h1>
+        <div className="flex flex-col gap-4 md:grid md:grid-cols-3 items-center justify-between w-full">
+          <h1 className="text-5xl font-bold md:col-start-2 text-center w-full">
+            Posts
+          </h1>
+          <div className="flex w-full justify-end items-center">
+            <Link to="/post" className="w-1/3">
+              <div className="bg-blue-500 hover:bg-blue-700 text-white w-full font-bold py-2 px-4 rounded cursor-pointer text-center">
+                New Post
+              </div>
+            </Link>
+          </div>
+        </div>
         <BlogPostList posts={posts} />
       </div>
     </>
diff --git a/react/src/components/BlogPostDetail.tsx b/react/src/components/BlogPostDetail.tsx
index c882ce5..c90e419 100644
--- a/react/src/components/BlogPostDetail.tsx
+++ b/react/src/components/BlogPostDetail.tsx
@@ -4,7 +4,11 @@ import { Link } from "react-router";
 
 export function BlogPostDetail() {
   const { postId } = useParams();
-  const post = posts[parseInt(postId!)];
+  const post = posts.find((post) => post.id === parseInt(postId!));
+
+  if (!post) {
+    return <div>Post not found</div>;
+  }
 
   const formattedDate = new Date(post.datePosted).toLocaleDateString("en-US", {
     month: "long",
@@ -13,6 +17,7 @@ export function BlogPostDetail() {
   });
   return (
     <>
+      <title>{post.title}</title>
       <div className="md:grid md:grid-cols-3 flex flex-col w-full">
         <Link
           to="/"
@@ -20,9 +25,16 @@ export function BlogPostDetail() {
         >
           Home
         </Link>
-        <h1 className="text-3xl md:text-4xl font-bold text-center">
+        <h1 className="text-3xl md:text-4xl font-bold text-center mb-4">
           {post.title}
         </h1>
+        <div className="flex md:justify-end items-center">
+          <Link to={`/post?postId=${post.id}`} className="w-1/3">
+            <div className="bg-blue-500 hover:bg-blue-700 text-white w-full font-bold py-2 px-4 rounded cursor-pointer text-center">
+              Edit Post
+            </div>
+          </Link>
+        </div>
       </div>
       <div className="flex flex-col gap-1 md:gap-2.5 justify-center items-center mb-1.5 md:mb-2.5">
         <p className="text-gray-700 dark:text-gray-400 text-sm md:text-lg">
diff --git a/react/src/components/BlogPostForm.tsx b/react/src/components/BlogPostForm.tsx
new file mode 100644
index 0000000..ac687f5
--- /dev/null
+++ b/react/src/components/BlogPostForm.tsx
@@ -0,0 +1,158 @@
+import { posts, type BlogPost } from "../lib/post";
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { useSearchParams } from "react-router";
+
+export function BlogPostForm({
+  post,
+  onSubmit,
+}: {
+  post: BlogPost | null;
+  onSubmit: (post: BlogPost) => void;
+}) {
+  const [postState, setPostState] = useState(
+    post ?? {
+      id: posts.length,
+      title: "",
+      summary: "",
+      content: "",
+      author: "",
+      datePosted: new Date().toISOString().split("T")[0],
+    },
+  );
+  const [missing, setMissing] = useState<string[]>([]);
+
+  const navigate = useNavigate();
+
+  const handleChange = (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const { name, value } = event.target;
+    setPostState((prevState) => ({ ...prevState, [name]: value }));
+  };
+
+  const handleMissing = () => {
+    const missingFields = Object.entries(postState)
+      .map(([key, value]) => (value === "" ? key : null))
+      .filter((key) => key !== null);
+    setMissing(missingFields);
+  };
+
+  const handleSubmit = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+
+    if (
+      !postState.title ||
+      !postState.summary ||
+      !postState.content ||
+      !postState.author
+    ) {
+      handleMissing();
+      return;
+    }
+
+    onSubmit(postState);
+    navigate("/");
+  };
+
+  return (
+    <form className="flex flex-col gap-4 dark:bg-slate-600 p-10 rounded-lg md:w-4xl w-md">
+      <label className="md:grid md:grid-cols-6 flex flex-col w-full gap-2">
+        Title:
+        <input
+          type="text"
+          name="title"
+          className="border-gray-400 md:col-start-2 md:col-span-5 border rounded h-8 py-1 px-2 w-full"
+          value={postState.title}
+          onChange={handleChange}
+          required
+        />
+      </label>
+      {missing.includes("title") && (
+        <p className="text-red-500">Title is required</p>
+      )}
+      <label className="md:grid md:grid-cols-6 flex flex-col w-full gap-2">
+        Summary:
+        <textarea
+          name="summary"
+          className="border-gray-400 md:col-start-2 md:col-span-5 border rounded min-h-16 h-auto py-1 px-2 w-full"
+          value={postState.summary}
+          onChange={handleChange}
+          required
+        />
+      </label>
+      {missing.includes("summary") && (
+        <p className="text-red-500">Summary is required</p>
+      )}
+      <label className="md:grid md:grid-cols-6 flex flex-col w-full gap-2">
+        Content:
+        <textarea
+          name="content"
+          className="border-gray-400 md:col-start-2 md:col-span-5 border rounded min-h-24 h-auto py-1 px-2 w-full"
+          value={postState.content}
+          onChange={handleChange}
+          required
+        />
+      </label>
+      {missing.includes("content") && (
+        <p className="text-red-500">Content is required</p>
+      )}
+      <label className="md:grid md:grid-cols-6 flex flex-col w-full gap-2">
+        Author:
+        <input
+          type="text"
+          name="author"
+          className="border-gray-400 md:col-start-2 md:col-span-5 border rounded h-8 py-1 px-2 w-full"
+          value={postState.author}
+          onChange={handleChange}
+          required
+        />
+      </label>
+      {missing.includes("author") && (
+        <p className="text-red-500">Author is required</p>
+      )}
+      <label className="md:grid md:grid-cols-6 flex flex-col w-full gap-2">
+        Date Posted:
+        <input
+          type="date"
+          name="datePosted"
+          value={postState.datePosted}
+          onChange={handleChange}
+          required
+        />
+      </label>
+      <button
+        type="button"
+        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded cursor-pointer"
+        onClick={handleSubmit}
+      >
+        {post ? "Save Post" : "Create Post"}
+      </button>
+    </form>
+  );
+}
+
+export function NewPostLayout() {
+  const searchParams = useSearchParams()[0];
+  const postId = parseInt(searchParams.get("postId") ?? "-1");
+  const post =
+    postId < 0 || postId >= posts.length
+      ? null
+      : posts.find((p) => p.id === postId);
+
+  return (
+    <div className="flex flex-col gap-4 items-center justify-center dark:bg-slate-700 p-10 h-screen">
+      <h1 className="text-2xl font-bold">New Post</h1>
+      <BlogPostForm
+        post={post}
+        onSubmit={(post) => {
+          if (post.id < posts.length) {
+            posts[post.id] = post;
+          } else {
+            posts.push(post);
+          }
+        }}
+      />
+    </div>
+  );
+}
diff --git a/react/src/components/BlogPostList.tsx b/react/src/components/BlogPostList.tsx
index 65d6839..fc739bb 100644
--- a/react/src/components/BlogPostList.tsx
+++ b/react/src/components/BlogPostList.tsx
@@ -15,7 +15,7 @@ export function BlogPostList({ posts }: { posts: BlogPost[] }) {
         .map((post, idx) => (
           <BlogPostItem
             key={idx}
-            idx={posts.length - idx - 1}
+            idx={post.id}
             title={post.title}
             summary={post.summary}
             datePosted={post.datePosted}
diff --git a/react/src/lib/post.ts b/react/src/lib/post.ts
index b7221db..c631c29 100644
--- a/react/src/lib/post.ts
+++ b/react/src/lib/post.ts
@@ -1,35 +1,39 @@
 export interface BlogPost {
-  datePosted: string;
-  title: string;
-  author: string;
-  summary: string;
-  content: string;
+    id: number;
+    datePosted: string;
+    title: string;
+    author: string;
+    summary: string;
+    content: string;
 }
 
 export const posts: BlogPost[] = [
-  {
-    datePosted: "2025-11-15",
-    title: "My First Blog Post",
-    author: "Samuel Shuert",
-    summary: "First blog post",
-    content:
-      "This is my first blog post. I am excited to share my thoughts with the world! lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
-  },
-  {
-    datePosted: "2025-11-17",
-    title: "My Second Blog Post",
-    author: "Samuel Shuert",
-    summary: "Another post",
-    content:
-      "This is my second blog post. I am excited to share my thoughts with the world!",
-  },
-  {
-    datePosted: "2025-11-18",
-    title: "My Third Blog Post",
-    author: "Samuel Shuert",
-    summary:
-      "The third blog post lorem ipsum dolor sit amet consectetur adipiscing elit The third blog post lorem ipsum dolor sit amet consectetur adipiscing elit",
-    content:
-      "This is my third blog post. I am excited to share my thoughts with the world!",
-  },
+    {
+        id: 0,
+        datePosted: "2025-11-15",
+        title: "My First Blog Post",
+        author: "Samuel Shuert",
+        summary: "First blog post",
+        content:
+            "This is my first blog post. I am excited to share my thoughts with the world! lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+    },
+    {
+        id: 1,
+        datePosted: "2025-11-17",
+        title: "My Second Blog Post",
+        author: "Samuel Shuert",
+        summary: "Another post",
+        content:
+            "This is my second blog post. I am excited to share my thoughts with the world!",
+    },
+    {
+        id: 2,
+        datePosted: "2025-11-18",
+        title: "My Third Blog Post",
+        author: "Samuel Shuert",
+        summary:
+            "The third blog post lorem ipsum dolor sit amet consectetur adipiscing elit The third blog post lorem ipsum dolor sit amet consectetur adipiscing elit",
+        content:
+            "This is my third blog post. I am excited to share my thoughts with the world!",
+    },
 ];
diff --git a/react/src/main.tsx b/react/src/main.tsx
index b26bbe6..f179d5d 100644
--- a/react/src/main.tsx
+++ b/react/src/main.tsx
@@ -4,6 +4,7 @@ import { BrowserRouter, Routes, Route } from "react-router";
 import "./index.css";
 import { App } from "./App.tsx";
 import { BlogPostDetail, PostLayout } from "./components/BlogPostDetail.tsx";
+import { NewPostLayout } from "./components/BlogPostForm.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
@@ -13,6 +14,7 @@ createRoot(document.getElementById("root")!).render(
         <Route path="entries" element={<PostLayout />}>
           <Route path=":postId" element={<BlogPostDetail />} />
         </Route>
+        <Route path="post" element={<NewPostLayout />} />
       </Routes>
     </BrowserRouter>
   </StrictMode>,
-- 
2.51.2