drill searchParams prop to paginatin and search instead of using useS…

…earchParams and state for the input
vercel · Sep 18, 2023 · 344b63c · 344b63c
1 parent f423968
commit 344b63c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 46 deletions.
diff --git a/dashboard/15-final/app/ui/invoices/pagination.tsx b/dashboard/15-final/app/ui/invoices/pagination.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
-import { usePathname, useSearchParams } from 'next/navigation';
+import { usePathname } from 'next/navigation';
 import clsx from 'clsx';
 import Link from 'next/link';
 import { useEffect } from 'react';
@@ -10,13 +10,14 @@ import { useRouter } from 'next/navigation';
 export default function PaginationButtons({
   totalPages,
   currentPage,
+  searchParams,
 }: {
   totalPages: number;
   currentPage: number;
+  searchParams: { query: string; page: string };
 }) {
   const router = useRouter();
   const pathname = usePathname();
-  const searchParams = useSearchParams();
   const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1);
 
   const createPageUrl = (pageNumber: number) => {

diff --git a/dashboard/15-final/app/ui/invoices/table-search.tsx b/dashboard/15-final/app/ui/invoices/table-search.tsx
@@ -1,17 +1,15 @@
 'use client';
 
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useState, useTransition } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
 
-export default function TableSearch() {
+export default function TableSearch({
+  searchParams,
+}: {
+  searchParams: { query: string; page: string };
+}) {
   const { replace } = useRouter();
-  const searchParams = useSearchParams()!;
   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);
@@ -20,10 +18,7 @@ export default function TableSearch() {
     } else {
       params.delete('query');
     }
-
-    startTransition(() => {
-      replace(`${pathname}?${params.toString()}`);
-    });
+    replace(`${pathname}?${params.toString()}`);
   }
 
   return (
@@ -36,42 +31,13 @@ export default function TableSearch() {
         <input
           type="text"
           placeholder="Search..."
-          value={inputValue}
+          value={searchParams.query || ''}
           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>
-      {isPending && <LoadingIcon />}
-    </div>
-  );
-}
-
-function LoadingIcon() {
-  return (
-    <div className="absolute bottom-0 right-0 top-0 flex items-center justify-center">
-      <svg
-        className="-ml-1 mr-3 h-5 w-5 animate-spin text-gray-700"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <circle
-          className="opacity-25"
-          cx="12"
-          cy="12"
-          r="10"
-          stroke="currentColor"
-          stroke-width="4"
-        />
-        <path
-          className="opacity-75"
-          fill="currentColor"
-          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-        />
-      </svg>
     </div>
   );
 }
diff --git a/dashboard/15-final/app/ui/invoices/table.tsx b/dashboard/15-final/app/ui/invoices/table.tsx
@@ -79,8 +79,12 @@ export default async function InvoicesTable({
         </Link>
       </div>
       <div className="mt-8 flex items-center justify-between gap-2">
-        <TableSearch />
-        <PaginationButtons totalPages={totalPages} currentPage={currentPage} />
+        <TableSearch searchParams={searchParams} />
+        <PaginationButtons
+          searchParams={searchParams}
+          totalPages={totalPages}
+          currentPage={currentPage}
+        />
       </div>
       <div className="mt-4 flow-root">
         <div className="overflow-x-auto">