Merge pull request #29 from nowrobin/feat/quoteList_pagination

Feat/quote list pagination

src/app/api/quoteList/route.ts → src/app/api/quoteList/[quote_id]/route.ts

@@ -4,10 +4,13 @@ import prisma from "@/app/lib/prisma";
 import { createClient } from "@/app/utils/supabase/server";
 import { NextRequest } from "next/server";
 
-export async function GET(req: NextRequest) {
+export async function GET(
+  req: NextRequest,
+  { params }: { params: { quote_id: string } }
+) {
   const supabase = createClient();
   const user = await supabase.auth.getUser();
-
+  const quoteNumber = parseInt(params.quote_id);
   const quotes = user.data.user
     ? await prisma.user.findUnique({
         where: {
@@ -20,6 +23,9 @@ export async function GET(req: NextRequest) {
         },
       })
     : await prisma.quote.findMany({
+        take: 10,
+        skip: quoteNumber ? 10 : 0,
+        ...(quoteNumber && { cursor: { id: quoteNumber } }),
         orderBy: [
           {
             id: "asc",

src/app/quote-list/page.tsx

@@ -5,28 +5,28 @@ import { useEffect, useState } from "react";
 
 export default function QuoteList() {
   const [list, setList] = useState<any>([]);
+  const [page, setPage] = useState(0);
   const router = useRouter();
   useEffect(() => {
-    fetch("/api/quoteList")
+    fetch(`/api/quoteList/${page}`)
       .then((data) => data.json())
       .then((res) => {
         const { data } = res;
         setList(data);
       });
-  }, []);
-
+  }, [page]);
   const handleQuoteClick = (index: number) => {
     router.push(`/${index}`);
   };
   //TODO: fix the type of the value in map
   return (
-    <div className="flex flex-col gap-2 w-screen items-center justify-center">
-      <div className="mt-10 text-slate-700 text-3xl">Quote List</div>
+    <div className="flex flex-col gap-2 w-screen text-slate-700 items-center justify-center">
+      <div className="mt-10  text-3xl">Quote List</div>
       {list.map((value: any, index: number) => {
         return (
           <div
             key={index}
-            className="bg-slate-600 w-[32rem]"
+            className="bg-slate-600 text-white w-[32rem]"
             onClick={() => handleQuoteClick(index + 1)}
           >
             <div className="flex flex-row gap-10">
@@ -38,6 +38,17 @@ export default function QuoteList() {
           </div>
         );
       })}
+      <div className="flex flex-row gap-10">
+        <button
+          onClick={() =>
+            setPage((prev) => (prev !== 0 ? (prev -= 1) : (prev = 0)))
+          }
+        >
+          Prev
+        </button>
+        <div>{page}</div>
+        <button onClick={() => setPage((prev) => (prev += 1))}>Prev</button>
+      </div>
     </div>
   );
 }