cmt

app/components/pagination.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import Link from "next/link";
+
+type PaginationProps = {
+  currentPage: number;
+  totalItems: number;
+  itemsPerPage: number;
+  path: string;
+};
+
+export default function Pagination({
+  currentPage,
+  totalItems,
+  itemsPerPage,
+  path,
+}: PaginationProps) {
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+  if (totalPages <= 1) {
+    return null;
+  }
+
+  const pageNumbers = [];
+  const maxVisiblePages = 4; // Adjust this number to show more or fewer page buttons
+
+  let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
+  let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+
+  if (endPage - startPage + 1 < maxVisiblePages) {
+    startPage = Math.max(1, endPage - maxVisiblePages + 1);
+  }
+
+  for (let i = startPage; i <= endPage; i++) {
+    pageNumbers.push(i);
+  }
+  console.log("currentPage", pageNumbers);
+
+  return (
+    <div className="flex justify-center mt-4">
+      <div className="join">
+        {pageNumbers.map((number) => (
+          <Link
+            key={number}
+            href={`${path}?page=${number}&limit=${itemsPerPage}`}
+            className={`join-item btn ${
+              number === currentPage ? "btn-active" : ""
+            }`}
+          >
+            {number}
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

app/pyngs/custom-markdown.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import Markdown from "react-markdown";
 
 export default function CustomMarkdown({ children }: { children: string }) {

app/pyngs/page.tsx

@@ -6,7 +6,11 @@ import prisma from "../../prisma/prisma";
 import PyngsSection from "./pyngs-section";
 import RunsSection from "./runs-section";
 
-export default async function Pyngs() {
+export default async function Pyngs({
+  searchParams,
+}: {
+  searchParams?: { page?: string; limit?: string };
+}) {
   const user = await currentUser();
 
   if (!user) {
@@ -23,13 +27,25 @@ export default async function Pyngs() {
     );
   }
 
+  const page = Number.parseInt(searchParams?.page ?? "1", 10);
+  const limit = Number.parseInt(searchParams?.limit ?? "10", 10);
+  const skip = (page - 1) * limit;
+
   const pyngsPromise = prisma.pyng.findMany({
     where: {
       clerkUserId: user.id,
     },
     orderBy: {
       createdAt: "desc",
     },
+    skip,
+    take: limit,
+  });
+
+  const pyngsCountPromise = prisma.pyng.count({
+    where: {
+      clerkUserId: user.id,
+    },
   });
 
   const runsPromise = prisma.run.findMany({
@@ -42,14 +58,37 @@ export default async function Pyngs() {
     orderBy: {
       createdAt: "desc",
     },
+    skip,
+    take: limit,
+  });
+
+  const runsCountPromise = prisma.run.count({
+    where: {
+      clerkUserId: user.id,
+    },
   });
 
-  const [pyngs, runs] = await Promise.all([pyngsPromise, runsPromise]);
+  const [pyngs, runs, pyngsCount, runsCount] = await Promise.all([
+    pyngsPromise,
+    runsPromise,
+    pyngsCountPromise,
+    runsCountPromise,
+  ]);
 
   return (
     <PageContentContainer>
-      <PyngsSection pyngs={pyngs} />
-      <RunsSection runs={runs} />
+      <PyngsSection
+        pyngs={pyngs}
+        totalPyngs={pyngsCount}
+        page={page}
+        limit={limit}
+      />
+      <RunsSection
+        runs={runs}
+        totalRuns={runsCount}
+        page={page}
+        limit={limit}
+      />
     </PageContentContainer>
   );
 }

app/pyngs/pyngs-section.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Title } from "@/components/common";
+import Pagination from "@/components/pagination";
 import Routes from "@/routes";
 import { useUser } from "@clerk/nextjs";
 import type { Pyng } from "@prisma/client";
@@ -9,9 +10,17 @@ import PyngsTable from "./pyngs-table";
 
 type PyngsSectionProps = {
   pyngs: Pyng[];
+  totalPyngs: number;
+  page: number;
+  limit: number;
 };
 
-export default function PyngsSection({ pyngs }: PyngsSectionProps) {
+export default function PyngsSection({
+  pyngs,
+  totalPyngs,
+  page,
+  limit,
+}: PyngsSectionProps) {
   const { user } = useUser();
   const email = user?.primaryEmailAddress?.emailAddress;
 
@@ -24,7 +33,15 @@ export default function PyngsSection({ pyngs }: PyngsSectionProps) {
         ) : null}
       </div>
       {pyngs.length > 0 ? (
-        <PyngsTable pyngs={pyngs} />
+        <>
+          <PyngsTable pyngs={pyngs} />
+          <Pagination
+            currentPage={page}
+            totalItems={totalPyngs}
+            itemsPerPage={limit}
+            path={Routes.pyngs}
+          />
+        </>
       ) : (
         <div>
           You have no Pyngs yet. Create one from the{" "}

app/pyngs/runs-section.tsx

@@ -1,19 +1,37 @@
 "use client";
 
 import { Title } from "@/components/common";
+import Routes from "@/routes";
 import type { Pyng, Run } from "@prisma/client";
 import RunsTable from "./runs-table";
+import Pagination from "@/components/pagination";
 
 type RunsSectionProps = {
   runs: (Run & { pyng: Pyng })[];
+  totalRuns: number;
+  page: number;
+  limit: number;
 };
 
-export default function RunsSection({ runs }: RunsSectionProps) {
+export default function RunsSection({
+  runs,
+  totalRuns,
+  page,
+  limit,
+}: RunsSectionProps) {
   return (
     <div className="flex flex-col gap-4">
       <Title>Runs</Title>
       {runs.length ? (
-        <RunsTable runs={runs} />
+        <>
+          <RunsTable runs={runs} />
+          <Pagination
+            currentPage={page}
+            totalItems={totalRuns}
+            itemsPerPage={limit}
+            path={Routes.pyngs}
+          />
+        </>
       ) : (
         <div>Your runs will appear when you create a Pyng.</div>
       )}