init: add code

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>
+  );
+}

app/routes/home.tsx

@@ -1,7 +1,9 @@
 import type { Route } from "./+types/home";
-import { Welcome } from "../welcome/welcome";
+import StaticPost from "../components/staticPost";
+import { useState, useEffect } from "react";
+import type { PostContent } from "../components/post";
 
-export function meta({}: Route.MetaArgs) {
+export function meta({ }: Route.MetaArgs) {
   return [
     { title: "New React Router App" },
     { name: "description", content: "Welcome to React Router!" },
@@ -12,6 +14,48 @@ export function loader({ context }: Route.LoaderArgs) {
   return { message: context.cloudflare.env.VALUE_FROM_CLOUDFLARE };
 }
 
-export default function Home({ loaderData }: Route.ComponentProps) {
-  return <Welcome message={loaderData.message} />;
+export default function Home() {
+  const [feedContent, setFeedContent] = useState<Array<PostContent>>();
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchFeed = async () => {
+      try {
+        const response = await fetch(`http://localhost:8787/feed`);
+
+        // check if response is actually OK (status 200-299)
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const jsonContent: PostContent[] = await response.json();
+        setFeedContent(jsonContent);
+
+      } catch (e) {
+        console.error("Fetch failed:", e);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchFeed();
+  }, []);
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+
+  if (!feedContent) {
+    return <p>Failed to load!</p>;
+  }
+  return (
+    <>
+      {feedContent && feedContent.length > 0 ? (
+        feedContent.map((post) => {
+          return <StaticPost postContent={post} />
+        })
+      ) : (
+        <p>No replies found for this thread.</p>
+      )}
+    </>
+  )
 }

app/routes/login.tsx

@@ -0,0 +1,92 @@
+import { useState } from "react";
+import { useNavigate } from "react-router";
+
+export default function LoginPage() {
+  const [loginRegisterSelection, setLoginRegisterSelection] = useState("option1");
+  const [userEmail, setUserEmail] = useState("");
+  const [userPassword, setUserPassword] = useState("");
+  const [userName, setUserName] = useState("");
+  const [userDisplayName, setUserDisplayName] = useState("");
+  const navigate = useNavigate();
+
+  async function loginOrRegister() {
+    if (loginRegisterSelection === "login") {
+      const response = await fetch("http://localhost:8787/users/login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          email: userEmail,
+          password: userPassword // 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/users/create", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          email: userEmail,
+          password: userPassword,
+          name: userName,
+          display_name: userDisplayName
+        }),
+        credentials: 'include'
+      });
+      if (!response.ok) {
+        throw new Error(`Got ${response.status} when trying to register.`)
+      }
+
+      navigate("/");
+    }
+
+  }
+
+  return (
+    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-5 shadow-none shadow-black/0 hover:shadow-black/40 hover:shadow-2xl rounded-2xl bg-[#151515] text-center transition ease-in-out duration-300 hover:ring-2 hover:ring-[#cccccc]">
+      <h1 className="text-2xl font-black">Login/Register</h1>
+      <form action={loginOrRegister}>
+        <div className="flex gap-4 justify-center">
+          <div>
+            <input type="radio" id="loginOption" name="loginRegisterSelection" value="Login" checked={loginRegisterSelection === 'login'} onChange={() => setLoginRegisterSelection('login')} />
+            <label htmlFor="loginOption">Login</label>
+          </div>
+          <div>
+            <input type="radio" id="registerOption" name="loginRegisterSelection" value="Register" checked={loginRegisterSelection === 'register'} onChange={() => setLoginRegisterSelection('register')} />
+            <label htmlFor="registerOption">Register</label>
+          </div>
+        </div>
+
+        <div className="flex m-2 my-3">
+          <label htmlFor="email" className="mx-4">Email</label>
+          <input type="text" id="email" className="border-[1px] border-white rounded-xl text-center" onChange={(e) => setUserEmail(e.target.value)} />
+        </div>
+        <div className="flex m-2 my-3">
+          <label htmlFor="password" className="mx-4">Password</label>
+          <input type="text" id="password" className="border-[1px] border-white rounded-xl text-center" onChange={(e) => setUserPassword(e.target.value)} />
+        </div>
+        {loginRegisterSelection === 'register' &&
+          <>
+            <div className="flex m-2 my-3">
+              <label htmlFor="username" className="mx-4">Username</label>
+              <input type="text" id="username" className="border-[1px] border-white rounded-xl text-center" onChange={(e) => setUserName(e.target.value)} />
+            </div>
+            <div className="flex m-2 my-3">
+              <label htmlFor="displayName" className="mx-4">Display name</label>
+              <input type="text" id="displayName" className="border-[1px] border-white rounded-xl text-center" onChange={(e) => setUserDisplayName(e.target.value)} />
+            </div>
+          </>
+        }
+
+        <button className="bg-white text-black font-bold rounded-xl p-2" role="submit">login/register</button>
+      </form>
+    </div>
+  )
+}

app/routes/view.tsx

@@ -0,0 +1,11 @@
+import Post from '../components/post.tsx';
+import { useLocation } from "react-router";
+
+export default function ViewPost() {
+  const location = useLocation();
+  const statePostId = location.state?.parentId;
+
+  return (
+    <Post postId={statePostId} />
+  )
+}