Para permitir que os usuários naveguem entre diferentes páginas e visualizem todas as faturas, implemente a paginação utilizando parâmetros de URL, de forma semelhante à funcionalidade de busca.

De volta ao projeto

Etapa 1

1. Ao navegar até o componente Pagination, observe que ele é um componente de cliente. Para evitar a exposição de segredos do banco de dados, evite buscar dados no lado do cliente. Em vez disso, realize a busca dos dados no servidor e passe-os como uma propriedade para o componente;
2. Em app/dashboard/invoices/page.tsx, importe uma nova função chamada fetchInvoicesPages e passe a consulta de busca de searchParams como argumento:
   • fetchInvoicesPages calcula o número total de páginas com base na consulta de busca. Por exemplo, se houver 12 faturas correspondentes com exibição de 6 por página, o número total de páginas será 2.
3. Passe a propriedade totalPages para o componente <Pagination/>.

Etapa 2

1. Navegue até app/ui/invoices/pagination.tsx;
2. Importe os hooks usePathname e useSearchParams;
3. Utilize esses hooks para recuperar a página atual e definir a nova página;
4. Descomente o código neste componente.

Nota

Sua aplicação pode apresentar falhas temporárias, pois a lógica do <Pagination/> ainda não foi implementada. Trabalharemos nisso posteriormente.

Etapa 3

1. Dentro do componente <Pagination>, crie uma nova função chamada createPageURL;
2. De forma semelhante à funcionalidade de busca, utilize URLSearchParams para definir o novo número da página;
3. Utilize pathName para construir a string da URL;
4. Descomente a variável allPages.

Etapa 4

Etapa final - quando o usuário inserir uma nova consulta de pesquisa, é fundamental redefinir o número da página para 1. Para isso, atualize a função handleSearch em app/ui/search.tsx.

Na Prática