Para permitir que los usuarios naveguen por diferentes páginas y visualicen todas las facturas, implementar paginación utilizando parámetros de URL, de manera similar a la funcionalidad de búsqueda.

Volver al proyecto

Paso 1

1. Al navegar al componente Pagination, se observa que es un componente de cliente. Para evitar exponer secretos de la base de datos, evitar obtener datos del lado del cliente. En su lugar, obtener los datos en el servidor y pasarlos como una prop al componente;
2. En app/dashboard/invoices/page.tsx, importar una nueva función llamada fetchInvoicesPages y pasar la consulta de búsqueda desde searchParams como argumento:
   • fetchInvoicesPages calcula el número total de páginas en función de la consulta de búsqueda. Por ejemplo, si hay 12 facturas coincidentes y se muestran 6 por página, el número total de páginas sería 2.
3. Pasar la prop totalPages al componente <Pagination/>.

Paso 2

1. Navegar a app/ui/invoices/pagination.tsx;
2. Importar los hooks usePathname y useSearchParams;
3. Utilizar estos hooks para obtener la página actual y establecer la nueva página;
4. Descomentar el código en este componente.

Nota

La aplicación puede dejar de funcionar temporalmente ya que la lógica de <Pagination/> aún no está implementada. Se trabajará en ello más adelante.

Paso 3

1. Dentro del componente <Pagination>, crear una nueva función llamada createPageURL;
2. De manera similar a la funcionalidad de búsqueda, utilizar URLSearchParams para establecer el nuevo número de página;
3. Utilizar pathName para construir la cadena de URL;
4. Descomentar la variable allPages.

Paso 4

Paso final: cuando el usuario introduce una nueva consulta de búsqueda, es fundamental restablecer el número de página a 1. Para lograr esto, actualiza la función handleSearch en app/ui/search.tsx.

En la práctica