Teoria

Prima di implementare la funzionalità di ricerca, è fondamentale comprendere questi hook client.

• useSearchParams;
  • Consente l'accesso ai parametri attuali dell'URL;
  • Esempio: Per l'URL /dashboard/invoices?page=1&query=pending, restituisce {page: '1', query: 'pending'}.
• usePathname;
  • Legge il pathname attuale dell'URL;
  • Esempio: Per la rotta domain/dashboard/invoices, usePathname restituisce "/dashboard/invoices".
• useRouter.
  • Facilita la navigazione tra le rotte all'interno dei componenti client, offrendo diversi metodi.

Panoramica dei passaggi di implementazione:

1. Acquisizione dell'input utente;
2. Aggiornamento dell'URL con i parametri di ricerca;
3. Sincronizzazione dell'URL con il campo di input;
4. Aggiornamento della tabella per riflettere la query di ricerca.

Torna al progetto

1. Acquisizione dell'input utente

1. Aprire il componente Search (app/ui/search.tsx);
2. Osservare l'utilizzo di 'use client', che indica la disponibilità di listener di eventi e hook;
3. Utilizzare la funzione handleSearch, che si attiva a ogni modifica dell'input.

Dopo l'implementazione, aprire la Console Sviluppatore nel browser. Qualsiasi testo inserito nel campo di input dovrebbe essere visualizzato nella console del browser.

2. Aggiornare l'URL con i parametri di ricerca

1. Importare l'hook useSearchParams da 'next/navigation' e assegnarlo a una variabile;
2. All'interno della funzione handleSearch, creare una nuova istanza di URLSearchParams utilizzando la variabile precedentemente definita (searchParams). Questa utility fornisce metodi per manipolare i parametri di query dell'URL;
3. Impostare la stringa dei parametri in base all'input dell'utente. Se l'input è vuoto, eliminarlo;
4. Utilizzare gli hook useRouter e usePathname da 'next/navigation' e usare il metodo replace di useRouter() all'interno di handleSearch.
   • ${pathname} rappresenta il percorso corrente, ad esempio "/dashboard/invoices";
   • Mentre l'utente digita nella barra di ricerca, params.toString() converte l'input in un formato compatibile con l'URL;
   • replace(${pathname}?${params.toString()}) aggiorna l'URL con i dati di ricerca dell'utente (ad esempio, /dashboard/invoices?query=qwerty).

L'URL viene aggiornato senza ricaricare la pagina, grazie alla navigazione client-side di Next.js.

Dopo l'implementazione, qualsiasi testo inserito nell'input sarà riflesso nell'URL.

3. Mantenere l'URL sincronizzato con il campo di input

Per garantire che il campo di input corrisponda all'URL e venga compilato quando condiviso, utilizzare defaultValue leggendo da searchParams.

4. Aggiornare la tabella per riflettere la query di ricerca

Infine, aggiorniamo il componente Table per riflettere la query di ricerca. I componenti di pagina accettano una prop chiamata searchParams. Passare i parametri URL correnti al componente <Table>.

Non dimenticare di decommentare il componente Table.

Ottimo! Hai aggiunto con successo la funzionalità di ricerca alla tua applicazione. Provala: funziona? 😊

Nel prossimo capitolo, approfondiremo la paginazione poiché attualmente sono visibili solo 6 fatture nella pagina.

In pratica