61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
import type { Route } from "./+types/home";
|
|
import StaticPost from "../components/staticPost";
|
|
import { useState, useEffect } from "react";
|
|
import type { PostContent } from "../components/post";
|
|
|
|
export function meta({ }: Route.MetaArgs) {
|
|
return [
|
|
{ title: "New React Router App" },
|
|
{ name: "description", content: "Welcome to React Router!" },
|
|
];
|
|
}
|
|
|
|
export function loader({ context }: Route.LoaderArgs) {
|
|
return { message: context.cloudflare.env.VALUE_FROM_CLOUDFLARE };
|
|
}
|
|
|
|
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>
|
|
)}
|
|
</>
|
|
)
|
|
}
|