From c40949301bfc1d5bdc99de3457fac6ddaa0eb294 Mon Sep 17 00:00:00 2001
From: Tom Baker <tombakerjr@outlook.com>
Date: Sun, 28 Jul 2024 23:52:35 -0400
Subject: [PATCH] Remove SonicJS path for posts, add pagination

---
 src/app/blog/[slug]/page.tsx |  2 +-
 src/app/blog/page.tsx        | 55 +++++++++++++++++++++++-------------
 src/server/audit.ts          |  6 ++++
 src/server/posts.ts          |  4 +--
 4 files changed, 45 insertions(+), 22 deletions(-)
 create mode 100644 src/server/audit.ts

diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
index 22736d7..9832ef1 100644
--- a/src/app/blog/[slug]/page.tsx
+++ b/src/app/blog/[slug]/page.tsx
@@ -36,7 +36,7 @@ const Page = async ({ params }: { params: { slug: string } }) => {
   return (
     <div>
       <h1 className="mb-4 border-b border-gray-100 dark:border-gray-600 pb-6">{post.title}</h1>
-      <div dangerouslySetInnerHTML={{ __html: post.body }} />
+      <div dangerouslySetInnerHTML={{ __html: post.body ?? <div /> }} />
       <br />
       <Link href={"/blog"}>Return to Blog page</Link>
     </div>
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
index 2c3c691..9f6f619 100644
--- a/src/app/blog/page.tsx
+++ b/src/app/blog/page.tsx
@@ -2,17 +2,28 @@ import Link from "next/link";
 import { drizzle } from "drizzle-orm/d1";
 import { getRequestContext } from "@cloudflare/next-on-pages";
 import { table as postsTable } from "@/server/posts";
+import { count } from "drizzle-orm";
+import { type InferSelectModel } from "drizzle-orm";
 
-const getLocalPosts = async (): Promise<Array<any>> => {
-  const startTime = Date.now();
+// FIXME: Set this to 10 after pagination testing
+const PAGE_SIZE = 3;
+
+type Post = InferSelectModel<typeof postsTable>;
+
+const getLocalPosts = async ({ currentPage }: { currentPage: number }): Promise<Array<Post & { total: number }>> => {
   const context = getRequestContext();
   const db = drizzle(context.env.D1DATA);
 
-  const results = await db.select().from(postsTable).all();
+  const [total] = await db.select({ count: count() }).from(postsTable);
 
-  const endTime = Date.now();
-  results[0].title += " (fetched from D1 in " + (endTime - startTime) + "ms)";
-  return results;
+  const results = await db
+    .select()
+    .from(postsTable)
+    .orderBy(postsTable.createdOn)
+    .limit(PAGE_SIZE)
+    .offset(PAGE_SIZE * (currentPage - 1));
+
+  return results.map((result) => ({ ...result, total: total.count }));
 };
 
 const getPosts = async (): Promise<Array<Post>> => {
@@ -24,40 +35,46 @@ const getPosts = async (): Promise<Array<Post>> => {
 
   const endTime = Date.now();
   posts[0].title +=
-    " (fetched from SonicJS in " + (endTime - startTime) + `ms via ${source}, execution time: {${executionTime}}ms)`;
+    " (fetched from SonicJS in " + (endTime - startTime) + `ms via ${source}, execution time: ${executionTime}ms)`;
   return posts;
 };
 
-const Page = async () => {
-  // TODO: Implement pagination logic and fetch blog posts
-  const posts = await getPosts();
-  console.log("Posts: ", posts);
+const Page = async ({ searchParams }: { searchParams?: { page?: string } }) => {
+  // const posts = await getPosts();
+  // console.log("Posts: ", posts);
+
+  const currentPage = Number(searchParams?.page) || 1;
+  console.log(searchParams, currentPage);
 
-  const localPosts = await getLocalPosts();
+  const localPosts = await getLocalPosts({ currentPage });
 
-  console.log("Local posts: ", localPosts);
+  const total = localPosts[0]?.total || 0;
+  const totalPages = Math.ceil(total / PAGE_SIZE);
 
   return (
     <div>
-      <h1 className="mb-4 border-b border-gray-100 dark:border-gray-600 pb-6">
-        Tom&apos;s Blog (eventually, but just cat facts for now!)
-      </h1>
-      {posts.map((post: Post) => (
+      <h1 className="mb-4 border-b border-gray-100 dark:border-gray-600 pb-6">Tom&apos;s Blog</h1>
+      {/* {posts.map((post: Post) => (
         <div key={post.id} className="mt-6">
           <Link href={`/blog/${post.id}`}>
             <h2 className="text-xl font-bold">{post.title}</h2>
           </Link>
           <div dangerouslySetInnerHTML={{ __html: post.body }} />
         </div>
-      ))}
+      ))} */}
       {localPosts.map((post: Post) => (
         <div key={post.id} className="mt-6">
           <Link href={`/blog/${post.id}`}>
             <h2 className="text-xl font-bold">{post.title}</h2>
           </Link>
-          <div dangerouslySetInnerHTML={{ __html: post.body }} />
+          <div dangerouslySetInnerHTML={{ __html: post.body ?? <div /> }} />
         </div>
       ))}
+      <div className="mt-6">
+        {currentPage > 1 && <Link href={`/blog?page=${currentPage - 1}`}>Previous</Link>}
+        {currentPage > 1 && currentPage < totalPages && " | "}
+        {currentPage < totalPages && <Link href={`/blog?page=${currentPage + 1}`}>Next</Link>}
+      </div>
     </div>
   );
 };
diff --git a/src/server/audit.ts b/src/server/audit.ts
new file mode 100644
index 0000000..90241aa
--- /dev/null
+++ b/src/server/audit.ts
@@ -0,0 +1,6 @@
+import { integer } from "drizzle-orm/sqlite-core";
+
+export const auditSchema = {
+  createdOn: integer("createdOn"),
+  updatedOn: integer("updatedOn"),
+};
diff --git a/src/server/posts.ts b/src/server/posts.ts
index 101aab1..2ce37be 100644
--- a/src/server/posts.ts
+++ b/src/server/posts.ts
@@ -1,7 +1,7 @@
 import { sqliteTable, index, text } from "drizzle-orm/sqlite-core";
 
 import { relations } from "drizzle-orm";
-// import { auditSchema } from "./audit";
+import { auditSchema } from "./audit";
 import * as users from "./users";
 import * as categoriesToPosts from "./categoriesToPosts";
 // import * as comments from "./comments";
@@ -24,7 +24,7 @@ export const table = sqliteTable(
   tableName,
   {
     ...definition,
-    // ...auditSchema,
+    ...auditSchema,
   },
   (table) => {
     return {