Fix search bug in table (#163)

* add database to project. Seed data. Update customerId to customer_id

* seed customers table data

* use database everywhere

* refactor

* fix ts lint errors

* add type to invoice edit page

* remove fetch-data file and fetch data directly in components

* update lates invoices to use sql

* in invoice table,  search the database here with SQL

* rename tsx files to ts and add node script to seed data

* address rest of PR comments

* move all data fetches to own file

* add types to filter invoices function

* remove unused param

* prettier

* update function names

* switch page back to one when search param changes

* make input auto fill with current search query on page reload

dashboard/15-final/app/ui/invoices/pagination.tsx

@@ -4,6 +4,8 @@ import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
 import { usePathname, useSearchParams } from 'next/navigation';
 import clsx from 'clsx';
 import Link from 'next/link';
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
 
 export default function PaginationButtons({
   totalPages,
@@ -12,6 +14,7 @@ export default function PaginationButtons({
   totalPages: number;
   currentPage: number;
 }) {
+  const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1);
@@ -22,6 +25,11 @@ export default function PaginationButtons({
     return `${pathname}?${newSearchParams.toString()}`;
   };
 
+  useEffect(() => {
+    const newUrl = createPageUrl(currentPage);
+    router.push(newUrl);
+  }, [currentPage]);
+
   const PreviousPageTag = currentPage === 1 ? 'p' : Link;
   const NextPageTag = currentPage === totalPages ? 'p' : Link;
 

dashboard/15-final/app/ui/invoices/table-search.tsx

@@ -2,7 +2,7 @@
 
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useTransition } from 'react';
+import { useState, useTransition } from 'react';
 
 export default function TableSearch() {
   const { replace } = useRouter();
@@ -10,6 +10,9 @@ export default function TableSearch() {
   const pathname = usePathname();
   const [isPending, startTransition] = useTransition();
 
+  const currentQuery = searchParams.get('query') || '';
+  const [inputValue, setInputValue] = useState(currentQuery);
+
   function handleSearch(term: string) {
     const params = new URLSearchParams(searchParams);
     if (term) {
@@ -33,7 +36,11 @@ export default function TableSearch() {
         <input
           type="text"
           placeholder="Search..."
-          onChange={(e) => handleSearch(e.target.value)}
+          value={inputValue}
+          onChange={(e) => {
+            setInputValue(e.target.value);
+            handleSearch(e.target.value);
+          }}
           className="absolute inset-0 w-full rounded-md border border-gray-300 bg-transparent p-2 pl-8 text-sm"
         />
       </div>

dashboard/15-final/app/ui/invoices/table.tsx

@@ -53,7 +53,10 @@ export default async function InvoicesTable({
   };
 }) {
   const searchTerm = searchParams.query ?? '';
-  const currentPage = parseInt(searchParams.page ?? '1');
+  let currentPage = 1;
+  if (!searchTerm) {
+    currentPage = parseInt(searchParams.page ?? '1');
+  }
 
   const invoices = await fetchFilteredInvoices(
     searchTerm,