init: add code

2026-01-30 17:06:54 +02:00 · 2026-01-30 17:06:54 +02:00 · 1e09c02cb9
commit 1e09c02cb9
parent 475596444a
20 changed files with 2432 additions and 147 deletions
--- a/app/routes/create.tsx
+++ b/app/routes/create.tsx
@ -0,0 +1,92 @@
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { useLocation } from "react-router";
+
+export default function CreatePostPage() {
+  const location = useLocation();
+  const stateParentId = location.state?.parentId;
+  const [postTitle, setPostTitle] = useState("");
+  const [postContent, setPostContent] = useState("");
+  const [parentId, setParentId] = useState(stateParentId || "");
+  const navigate = useNavigate();
+
+  console.log(stateParentId);
+  console.log(parentId);
+
+  async function createPost() {
+    if (parentId) {
+      const response = await fetch(`http://localhost:8787/posts/${parentId}/reply`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          title: postTitle,
+          content: postContent // god bless HTTPS
+        }),
+        credentials: 'include'
+      });
+      if (!response.ok) {
+        throw new Error(`Got ${response.status} when trying to log in.`)
+      }
+      navigate("/");
+    } else {
+      const response = await fetch("http://localhost:8787/posts/add", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          title: postTitle,
+          content: postContent // god bless HTTPS
+        }),
+        credentials: 'include'
+      });
+      if (!response.ok) {
+        throw new Error(`Got ${response.status} when trying to log in.`)
+      }
+      navigate("/");
+    }
+  }
+
+
+  return (
+    <div className="w-[60vw] h-[50vh] flex flex-col absolute top-1/2 left-1/2 p-8 -translate-x-1/2 -translate-y-1/2 shadow-black/40 shadow-2xl rounded-2xl bg-[#171717] text-[#fafafa] transition ease-in-out duration-300">
+      <h1 className="text-2xl font-black text-center mb-4">Create Post</h1>
+
+      <form className="flex-1 flex flex-col gap-4" action={createPost}>
+        <div className="flex gap-2 items-center">
+          <label htmlFor="title" className="px-1 font-semibold">Post Title</label>
+          <input
+            type="text"
+            id="title"
+            className="bg-transparent border-[1px] border-white/40 rounded-xl p-2 focus:border-white outline-none flex-1 hover:border-white/60 transition ease-in-out duration-200"
+            onChange={(e) => setPostTitle(e.target.value)}
+          />
+        </div>
+
+        <div className="flex-1 flex flex-col gap-2">
+          <label htmlFor="content" className="px-1 font-semibold">Post Contents</label>
+          <textarea
+            id="content"
+            className="flex-1 bg-transparent border-[1px] border-white/40 rounded-xl p-3 focus:border-white outline-none resize-none hover:border-white/60 transition ease-in-out duration-200"
+            onChange={(e) => setPostContent(e.target.value)}
+          />
+        </div>
+
+        <div className="flex gap-2 items-center">
+          <label htmlFor="title" className="px-1 font-semibold">Parent Post ID (leave empty if none)</label>
+          <input
+            type="text"
+            id="title"
+            className="bg-transparent border-[1px] border-white/40 rounded-xl p-2 focus:border-white outline-none hover:border-white/60 transition ease-in-out duration-200"
+            value={parentId}
+            onChange={(e) => setParentId(e.target.value)}
+          />
+
+          <button className="bg-white text-black font-bold rounded-xl p-2 ml-auto transition ease-in-out duration-300 hover:scale-125" role="submit">Create Post</button>
+        </div>
+      </form>
+    </div>
+  );
+}