Adding search on invoices with debounced searching.

app/dashboard/invoices/page.tsx

@@ -1,3 +1,37 @@
-export default function Page() {
+import { Suspense } from "react";
-	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";
+
+export default async function Page({
+	searchParams,
+}: {
+	searchParams?: {
+		query?: string;
+		page?: string;
+	};
+}) {
+	const query = searchParams?.query || "";
+	const currentPage = Number(searchParams?.page) || 1;
+
+	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/ui/search.tsx

@@ -1,8 +1,25 @@
 'use client';
 
+import { useSearchParams, usePathname, useRouter } from "next/navigation";
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { useDebouncedCallback } from "use-debounce";
 
 export default function Search({ placeholder }: { placeholder: string }) {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const { replace } = useRouter();
+
+  const handleSearch = useDebouncedCallback((term: string) => {
+    console.log(`Searching... ${term}`);
+    const params = new URLSearchParams(searchParams);
+    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 +28,8 @@ 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>

package.json

@@ -20,6 +20,7 @@
 		"react-dom": "18.2.0",
 		"tailwindcss": "3.3.3",
 		"typescript": "5.2.2",
+		"use-debounce": "^9.0.4",
 		"zod": "^3.22.2"
 	},
 	"devDependencies": {

pnpm-lock.yaml

@@ -44,6 +44,9 @@ dependencies:
   typescript:
     specifier: 5.2.2
     version: 5.2.2
+  use-debounce:
+    specifier: ^9.0.4
+    version: 9.0.4(react@18.2.0)
   zod:
     specifier: ^3.22.2
     version: 3.22.4
@@ -1338,6 +1341,15 @@ packages:
       picocolors: 1.0.0
     dev: false
 
+  /use-debounce@9.0.4(react@18.2.0):
+    resolution: {integrity: sha512-6X8H/mikbrt0XE8e+JXRtZ8yYVvKkdYRfmIhWZYsP8rcNs9hk3APV8Ua2mFkKRLcJKVdnX2/Vwrmg2GWKUQEaQ==}
+    engines: {node: '>= 10.0.0'}
+    peerDependencies:
+      react: '>=16.8.0'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /utf-8-validate@6.0.3:
     resolution: {integrity: sha512-uIuGf9TWQ/y+0Lp+KGZCMuJWc3N9BHA+l/UmHd/oUHwJJDeysyTRxNQVkbzsIWfGFbRe3OcgML/i0mvVRPOyDA==}
     engines: {node: '>=6.14.2'}