my-website-v2/frontend/routes/posts/index.tsx

85 lines
2.2 KiB
TypeScript
Raw Normal View History

// import { FreshContext, Handlers, PageProps } from "$fresh/server.ts";
import { PostCarousel } from "../../islands/PostCarousel.tsx";
// export interface PostItems {
// title: string;
// author: string;
// publish_date: string;
// truncated_content: string;
// }
//
// export interface PostReponse {
// new_posts: Array<PostItems>;
// popular_posts: Array<PostItems>;
// hot_posts: Array<PostItems>;
// }
//
// export interface PostResponseOne {
// post_id: number;
// first_name: string;
// last_name: string;
// title: string;
// body: string;
// created_at: string;
// }
//
// export const handler: Handlers<Array<PostCard>> = {
// GET(_req: Request, ctx: FreshContext) {
// const results = fetch(`${Deno.env.get("BASE_URI")}/posts/all`);
// return ctx.render(results.then((resp) => resp.json()));
// },
// };
import { Handlers, PageProps } from "$fresh/server.ts";
import { Post } from "../../islands/PostCard.tsx";
interface PageData {
featuredPosts: Post[];
hotPosts: Post[];
popularPosts: Post[];
}
export const handler: Handlers<PageData> = {
async GET(_: any, ctx: any) {
const [featuredResult, hotResult, popularResult] = await Promise.all([
fetch(`${Deno.env.get("BASE_URI")}/posts/all`),
fetch(`${Deno.env.get("BASE_URI")}/posts/hot`),
fetch(`${Deno.env.get("BASE_URI")}/posts/popular`),
]);
// Parse all JSON responses concurrently
const [featuredPosts, hotPosts, popularPosts] = await Promise.all([
featuredResult.json(),
hotResult.json(),
popularResult.json(),
]);
return ctx.render({
featuredPosts,
hotPosts,
popularPosts,
});
},
};
export default function PostPage({ data }: PageProps<PageData>) {
const { featuredPosts, hotPosts, popularPosts } = data;
return (
<div class="space-y-12 py-8">
<section>
<h2 class="text-2xl font-bold mb-4">Featured Posts</h2>
<PostCarousel posts={featuredPosts} />
</section>
<section>
<h2 class="text-2xl font-bold mb-4">Recent Posts</h2>
<PostCarousel posts={hotPosts} />
</section>
<section>
<h2 class="text-2xl font-bold mb-4">Popular Posts</h2>
<PostCarousel posts={popularPosts} />
</section>
</div>
);
}