foundation for posts

apps/frontend/src/pages/home.tsx

@@ -1,7 +1,45 @@
 import Layout from "../components/layout";
 import PostRow from "../components/postRow";
+import { useEffect, useState } from "react";
+import type { Post } from "../utils/types";
 
 export default function Home() {
+  const [posts, setPosts] = useState<Post[] | null>(null);
+  const [loaded, setLoaded] = useState<boolean>(false);
+
+  useEffect(() => {
+    fetch("/api/posts", {
+      method: "GET",
+      credentials: "include",
+    }).then(async (res) => {
+      if (res.ok) {
+        const data = await res.json();
+        setPosts(data);
+        setLoaded(true);
+      } else {
+        console.error("Failed to load posts!");
+        setLoaded(true);
+      }
+    });
+  }, []);
+
+  const PostList = () => {
+    const mappedPosts = posts?.map((v, k) => {
+      return <PostRow key={k} post={v} />;
+    });
+
+    if ((loaded && !posts) || posts?.length === 0) {
+      return (
+        <div className="my-2 text-center">
+          <h1 className="text-2xl font-bold">uh oh!</h1>
+          <p className="opacity-50 text-sm">there's nothing here..</p>
+        </div>
+      );
+    } else if (loaded) {
+      return mappedPosts;
+    }
+  };
+
   return (
     <Layout>
       <div className="mb-4 space-y-1">
@@ -15,7 +53,7 @@ export default function Home() {
       <div className="mt-2">
         <h1 className="font-semibold">Posts</h1>
         <div className="space-y-2">
-          <PostRow />
+          <PostList />
         </div>
       </div>
     </Layout>

apps/frontend/src/pages/post.tsx

@@ -0,0 +1,40 @@
+import Layout from "../components/layout";
+import { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import type { Post } from "../utils/types";
+
+export default function Post() {
+  const [post, setPost] = useState<Post | null>(null);
+  const params = useParams();
+
+  useEffect(() => {
+    if (params.slug) {
+      fetch("/api/posts/" + params.slug, {
+        method: "GET",
+        credentials: "include",
+      }).then(async (res) => {
+        if (res.ok) {
+          const data = await res.json();
+          setPost(data);
+        } else {
+          console.error("Failed to load post! " + res.status);
+        }
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    console.log(post);
+  }, [post]);
+
+  if (post) {
+    return (
+      <Layout>
+        <div className="my-2">
+          <h1 className="text-2xl font-bold">{post.title}</h1>
+          <p className="text-sm opacity-50">{post.description}</p>
+        </div>
+      </Layout>
+    );
+  }
+}