init: add code

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