58 lines
No EOL
1.5 KiB
TypeScript
58 lines
No EOL
1.5 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import StaticPost from "./staticPost";
|
|
|
|
export interface PostContent {
|
|
id: number,
|
|
title: string,
|
|
content: string,
|
|
userId: number,
|
|
parentId: number,
|
|
createdAt: string,
|
|
author: {
|
|
name: string,
|
|
display_name: string,
|
|
id: number
|
|
},
|
|
replies: any[];
|
|
_count: {
|
|
replies: number;
|
|
};
|
|
}
|
|
|
|
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 () => {
|
|
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");
|
|
|
|
const jsonContent: Array<PostContent> = await response.json();
|
|
let newPostContent: PostContent = jsonContent[0] as PostContent;
|
|
|
|
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 (!postContent) return <p>Failed to load!</p>;
|
|
|
|
return <StaticPost postContent={postContent} />;
|
|
} |