Teoría

Antes de implementar la funcionalidad de búsqueda, es fundamental comprender estos hooks del cliente.

• useSearchParams;
  • Permite acceder a los parámetros actuales de la URL;
  • Ejemplo: Para la URL /dashboard/invoices?page=1&query=pending, proporciona {page: '1', query: 'pending'}.
• usePathname;
  • Lee el pathname actual de la URL;
  • Ejemplo: Para la ruta domain/dashboard/invoices, usePathname retorna "/dashboard/invoices".
• useRouter.
  • Facilita la navegación entre rutas dentro de componentes cliente, ofreciendo múltiples métodos.

Resumen de los pasos de implementación:

1. Capturar la entrada del usuario;
2. Actualizar la URL con los parámetros de búsqueda;
3. Mantener la URL sincronizada con el campo de entrada;
4. Actualizar la tabla para reflejar la consulta de búsqueda.

Volver al proyecto

1. Captura de la entrada del usuario

1. Abrir el componente Search (app/ui/search.tsx);
2. Observar el uso de 'use client', lo que indica la disponibilidad de listeners de eventos y hooks;
3. Utilizar la función handleSearch, que se activa en cada cambio de entrada.

Después de implementar, abre la Consola de Desarrollador en tu navegador. Deberías ver cualquier texto ingresado en el campo de entrada reflejado en la consola del navegador.

2. Actualizar la URL con parámetros de búsqueda

1. Importar el hook useSearchParams desde 'next/navigation' y asignarlo a una variable;
2. Dentro de la función handleSearch, crear una nueva instancia de URLSearchParams utilizando la variable previamente definida (searchParams). Esta utilidad proporciona métodos para manipular los parámetros de consulta de la URL;
3. Establecer la cadena de parámetros según la entrada del usuario. Si la entrada está vacía, eliminarla;
4. Utilizar los hooks useRouter y usePathname de 'next/navigation' y emplear el método replace de useRouter() dentro de handleSearch.
   • ${pathname} representa la ruta actual, por ejemplo, "/dashboard/invoices";
   • A medida que el usuario escribe en la barra de búsqueda, params.toString() convierte la entrada en un formato compatible con la URL;
   • replace(${pathname}?${params.toString()}) actualiza la URL con los datos de búsqueda del usuario (por ejemplo, /dashboard/invoices?query=qwerty).

La URL se actualiza sin recargar la página, gracias a la navegación del lado del cliente de Next.js.

Después de la implementación, cualquier texto ingresado en el campo de entrada se reflejará en la URL.

3. Mantener la URL sincronizada con el campo de entrada

Para asegurar que el campo de entrada coincida con la URL y se complete al compartirla, utilizar defaultValue leyendo desde searchParams.

4. Actualizar la tabla para reflejar la consulta de búsqueda

Finalmente, se actualiza el componente Table para reflejar la consulta de búsqueda. Los componentes de página aceptan una prop llamada searchParams. Pase los parámetros actuales de la URL al componente <Table>.

No olvide descomentar el componente Table.

¡Excelente! Ha añadido correctamente la funcionalidad de búsqueda a su aplicación. Pruébelo, ¿funciona? 😊

En el próximo capítulo, se abordará la paginación, ya que actualmente solo se muestran 6 facturas en la página.

En la práctica