Chapter 11 - Implement pagination

app/dashboard/invoices/page.tsx

@@ -5,6 +5,7 @@ import { CreateInvoice } from '@/app/ui/invoices/buttons';
 import { lusitana } from '@/app/ui/fonts';
 import { InvoicesTableSkeleton } from '@/app/ui/skeletons';
 import { Suspense } from 'react';
+import {fetchInvoicesPages} from "@/app/lib/data";
 
 export default async function Page({
                                        searchParams,
@@ -15,7 +16,10 @@ export default async function Page({
     };
 }) {
     const query = searchParams?.query || '';
-    const currentPage = Number(searchParams?.page) || 1;    return (
+    const currentPage = Number(searchParams?.page) || 1;
+    const totalPages = await fetchInvoicesPages(query);
+
+    return (
         <div className="w-full">
             <div className="flex w-full items-center justify-between">
                 <h1 className={`${lusitana.className} text-2xl`}>Invoices</h1>
@@ -28,7 +32,7 @@ export default async function Page({
         <Table query={query} currentPage={currentPage} />
       </Suspense>
             <div className="mt-5 flex w-full justify-center">
-                {/* <Pagination totalPages={totalPages} /> */}
+                <Pagination totalPages={totalPages} />
             </div>
         </div>
     );