11 - Search and pagination

README.md

@@ -39,8 +39,8 @@ Part of this tutorial was to deploy it out to vercel. It was very slick.I took t
 7. [Fetching Data ♻️][2-7]  
 8. [Static and Dynamic Rendering ♻️][2-8]
 9. [Streaming ♻️][2-9]
-10. Partial Prerendering ️🚧 
-11. Adding Search and Pagination 🚧 
+10. Partial Prerendering ✅ (_no code, theory / beta functionality_)
+11. [Adding Search and Pagination ♻️][2-11]
 12. Mutating Data 🚧 
 13. Handling Errors 🚧 
 14. Improving Accessibility 🚧 
@@ -58,4 +58,5 @@ Part of this tutorial was to deploy it out to vercel. It was very slick.I took t
 [2-6]: https://github.com/treejamie/next-js-learn/pull/13
 [2-7]: https://github.com/treejamie/next-js-learn/pull/15
 [2-8]: https://github.com/treejamie/next-js-learn/pull/16
-[2-9]: https://github.com/treejamie/next-js-learn/pull/17
+[2-9]: https://github.com/treejamie/next-js-learn/pull/17
+[2-11]: https://github.com/treejamie/next-js-learn/pull/19

app-router/nextjs-dashboard/app/dashboard/invoices/page.tsx

@@ -1,3 +1,39 @@
-export default function Page() {
-    return <p>Invoices Page</p>;
-  }
+import Pagination from '@/app/ui/invoices/pagination';
+import Search from '@/app/ui/search';
+import Table from '@/app/ui/invoices/table';
+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(props: {
+  searchParams?: Promise<{
+    query?: string;
+    page?: string;
+  }>;
+}) {
+  const searchParams = await props.searchParams;
+  const query = searchParams?.query || '';
+  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>
+      </div>
+      <div className="mt-4 flex items-center justify-between gap-2 md:mt-8">
+        <Search placeholder="Search invoices..." />
+        <CreateInvoice />
+      </div>
+      <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
+        <Table query={query} currentPage={currentPage} />
+      </Suspense>
+      <div className="mt-5 flex w-full justify-center">
+      <Pagination totalPages={totalPages} />
+      </div>
+    </div>
+  );
+}

app-router/nextjs-dashboard/app/ui/invoices/pagination.tsx

@@ -4,17 +4,25 @@ import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import Link from 'next/link';
 import { generatePagination } from '@/app/lib/utils';
+import { usePathname, useSearchParams } from 'next/navigation';
 
 export default function Pagination({ totalPages }: { totalPages: number }) {
-  // NOTE: Uncomment this code in Chapter 11
+
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const currentPage = Number(searchParams.get('page')) || 1;
+  const allPages = generatePagination(currentPage, totalPages);
 
-  // const allPages = generatePagination(currentPage, totalPages);
+  const createPageURL = (pageNumber: number | string) => {
+    const params = new URLSearchParams(searchParams);
+    params.set('page', pageNumber.toString());
+    return `${pathname}?${params.toString()}`;
+  };
 
   return (
     <>
-      {/*  NOTE: Uncomment this code in Chapter 11 */}
 
-      {/* <div className="inline-flex">
+      <div className="inline-flex">
         <PaginationArrow
           direction="left"
           href={createPageURL(currentPage - 1)}
@@ -47,7 +55,7 @@ export default function Pagination({ totalPages }: { totalPages: number }) {
           href={createPageURL(currentPage + 1)}
           isDisabled={currentPage >= totalPages}
         />
-      </div> */}
+      </div>
     </>
   );
 }

app-router/nextjs-dashboard/app/ui/search.tsx

@@ -1,8 +1,33 @@
 'use client';
 
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
+import { useDebouncedCallback } from 'use-debounce';
+
+
+
 
 export default function Search({ placeholder }: { placeholder: string }) {
+
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const { replace } = useRouter();
+
+  // Inside the Search Component...
+  const handleSearch = useDebouncedCallback((term) => {
+    console.log(`Searching... ${term}`);
+
+    const params = new URLSearchParams(searchParams);
+    params.set('page', '1');
+    if (term) {
+      params.set('query', term);
+    } else {
+      params.delete('query');
+    }
+    replace(`${pathname}?${params.toString()}`);
+  }, 300);
+
+
   return (
     <div className="relative flex flex-1 flex-shrink-0">
       <label htmlFor="search" className="sr-only">
@@ -11,6 +36,10 @@ export default function Search({ placeholder }: { placeholder: string }) {
       <input
         className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
         placeholder={placeholder}
+        onChange={(e) => {
+          handleSearch(e.target.value);
+        }}
+        defaultValue={searchParams.get('query')?.toString()}
       />
       <MagnifyingGlassIcon className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
     </div>