Teoria

Antes de implementar a funcionalidade de busca, é fundamental compreender estes hooks do cliente.

• useSearchParams;
  • Permite acesso aos parâmetros atuais da URL;
  • Exemplo: Para a URL /dashboard/invoices?page=1&query=pending, fornece {page: '1', query: 'pending'}.
• usePathname;
  • Lê o pathname atual da URL;
  • Exemplo: Para a rota domain/dashboard/invoices, usePathname retorna "/dashboard/invoices".
• useRouter.
  • Facilita a navegação entre rotas dentro de componentes do cliente, oferecendo múltiplos métodos.

Visão Geral das Etapas de Implementação:

1. Captura da entrada do usuário;
2. Atualização da URL com os parâmetros de busca;
3. Sincronização da URL com o campo de entrada;
4. Atualização da tabela para refletir a consulta de busca.

De volta ao projeto

1. Captura da entrada do usuário

1. Abra o componente Search (app/ui/search.tsx);
2. Observe o uso de 'use client', indicando a disponibilidade de listeners de eventos e hooks;
3. Utilize a função handleSearch, que é acionada a cada alteração no campo de entrada.

Após a implementação, abra o Console do Desenvolvedor no navegador. Qualquer texto inserido no campo de entrada deve ser exibido no console do navegador.

2. Atualizar a URL com parâmetros de busca

1. Importe o hook useSearchParams de 'next/navigation' e atribua-o a uma variável;
2. Dentro da função handleSearch, crie uma nova instância de URLSearchParams utilizando a variável definida anteriormente (searchParams). Essa utilidade fornece métodos para manipular os parâmetros de consulta da URL;
3. Defina a string de parâmetros com base na entrada do usuário. Se a entrada estiver vazia, exclua-a;
4. Utilize os hooks useRouter e usePathname de 'next/navigation' e use o método replace de useRouter() dentro de handleSearch.
   • ${pathname} representa o caminho atual, por exemplo, "/dashboard/invoices";
   • À medida que o usuário digita na barra de busca, params.toString() converte a entrada para um formato compatível com URL;
   • replace(${pathname}?${params.toString()}) atualiza a URL com os dados de busca do usuário (por exemplo, /dashboard/invoices?query=qwerty).

A URL é atualizada sem recarregar a página, graças à navegação do lado do cliente do Next.js.

Após a implementação, qualquer texto inserido no campo de entrada será refletido na URL.

3. Manter a URL sincronizada com o campo de entrada

Para garantir que o campo de entrada corresponda à URL e seja preenchido ao ser compartilhado, utilize defaultValue lendo de searchParams.

4. Atualizar a tabela para refletir a consulta de busca

Por fim, atualize o componente Table para refletir a consulta de busca. Componentes de página aceitam uma propriedade chamada searchParams. Passe os parâmetros atuais da URL para o componente <Table>.

Não se esqueça de descomentar o componente Table.

Excelente! A funcionalidade de busca foi adicionada com sucesso ao seu aplicativo. Experimente – está funcionando? 😊

No próximo capítulo, abordaremos a paginação, já que apenas 6 faturas estão visíveis na página no momento.

Na Prática