added pagination to a given authors page

frontend/routes/authors/[id].tsx

@@ -2,13 +2,20 @@ import { FreshContext, Handlers, PageProps } from "$fresh/server.ts";
 import AuthorCard from "../../components/AuthorCard.tsx";
 import { Post } from "../../types/index.ts";
 import { PostCarousel } from "../../components/PostCarousel.tsx";
+import { PaginationControl } from "../../components/PaginationControl.tsx";
 
 export const handler: Handlers<PageData> = {
-  async GET(_req: Request, ctx: FreshContext) {
+  async GET(req: Request, ctx: FreshContext) {
     try {
+      const url = new URL(req.url);
+      const page = parseInt(url.searchParams.get("page") || "1");
+      const limit = parseInt(url.searchParams.get("limit") || "12");
+
       const [authorResponse, authorPostResponse] = await Promise.all([
         fetch(`${Deno.env.get("BASE_URI_API")}/authors/${ctx.params.id}`),
-        fetch(`${Deno.env.get("BASE_URI_API")}/authors/${ctx.params.id}/posts`),
+        fetch(
+          `${Deno.env.get("BASE_URI_API")}/authors/${ctx.params.id}/posts?page=${page}&limit=${limit}`,
+        ),
       ]);
 
       const [authorData, authorPostData] = await Promise.all([
@@ -16,9 +23,37 @@ export const handler: Handlers<PageData> = {
         authorPostResponse.json(),
       ]);
 
+      let paginatedData: PaginatedPosts;
+
+      if (authorPostData.posts && authorPostData.total_posts !== undefined) {
+        const totalPages = Math.ceil(authorPostData.total_posts / limit);
+        paginatedData = {
+          posts: authorPostData.posts,
+          currentPage: page,
+          totalPages,
+          hasNextPage: page < totalPages,
+          hasPrevPage: page > 1,
+          totalPosts: authorPostData.total_posts,
+        };
+      } else {
+        const allPosts = Array.isArray(authorPostData) ? authorPostData : [];
+        const totalPages = Math.ceil(allPosts.length / limit);
+        const startIndex = (page - 1) * limit;
+        const endIndex = startIndex + limit;
+
+        paginatedData = {
+          posts: allPosts.slice(startIndex, endIndex),
+          currentPage: page,
+          totalPages,
+          hasNextPage: page < totalPages,
+          hasPrevPage: page > 1,
+          totalPosts: allPosts.length,
+        };
+      }
+
       return ctx.render({
         authorData,
-        authorPostData,
+        authorPostData: paginatedData,
       });
     } catch (error) {
       return ctx.render({
@@ -30,7 +65,7 @@ export const handler: Handlers<PageData> = {
   },
 };
 
-export default function AuthorIdentifier({ data }: PageProps<PageData>) {
+export default function AuthorIdentifier({ data, url }: PageProps<PageData>) {
   const { authorData, authorPostData, error } = data;
 
   if (error) {
@@ -52,7 +87,12 @@ export default function AuthorIdentifier({ data }: PageProps<PageData>) {
         <AuthorCard author={authorData} isIdentified={true} />
       </div>
       <div>
-        <PostCarousel posts={authorPostData} />
+        <PostCarousel posts={authorPostData.posts} />
+        <PaginationControl
+          paginatedData={authorPostData}
+          currentUrl={url}
+          authorId={authorData.author_id}
+        />
       </div>
     </>
   );