change: everything

app/components/post.tsx

@@ -23,36 +23,36 @@ export interface PostProps {
   postId: number;
 }
 
-
 export default function Post({ postId }: PostProps) {
   const [postContent, setPostContent] = useState<PostContent>();
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     const fetchPost = async () => {
-      const response = await fetch(`http://localhost:8787/posts/${postId}/view`);
-      const jsonContent: Array<PostContent> = await response.json();
+      try {
+        // CHANGED: Fetch from your internal resource route
+        // This triggers the 'loader' we created in step 2
+        const response = await fetch(`/api/posts/${postId}`);
+        
+        if (!response.ok) throw new Error("Failed to fetch");
 
-      let newPostContent: PostContent = jsonContent[0] as PostContent;
+        const jsonContent: Array<PostContent> = await response.json();
+        let newPostContent: PostContent = jsonContent[0] as PostContent;
 
-      if (newPostContent) {
-        setPostContent(newPostContent);
+        if (newPostContent) {
+          setPostContent(newPostContent);
+        }
+      } catch (error) {
+        console.error("Error fetching post:", error);
+      } finally {
         setIsLoading(false);
       }
     };
     fetchPost();
-  }, []);
+  }, [postId]); // Added postId to dependency array
 
-  if (isLoading) {
-    return <div>Loading...</div>;
-  }
+  if (isLoading) return <div>Loading...</div>;
+  if (!postContent) return <p>Failed to load!</p>;
 
-  if (!postContent) {
-    return <p>Failed to load!</p>;
-  }
-
-
-  return (
-    <StaticPost postContent={postContent} />
-  )
-}
+  return <StaticPost postContent={postContent} />;
+}