Hakutoiminnallisuuden Kehittäminen

Teoria

Ennen hakutoiminnallisuuden toteuttamista on tärkeää ymmärtää nämä client hookit.

• useSearchParams;
  • Mahdollistaa nykyisten URL-parametrien lukemisen;
  • Esimerkki: URL-osoitteessa /dashboard/invoices?page=1&query=pending se palauttaa {page: '1', query: 'pending'}.
• usePathname;
  • Lukee nykyisen URL-osoitteen polun;
  • Esimerkki: Reitillä domain/dashboard/invoices usePathname palauttaa "/dashboard/invoices".
• useRouter.
  • Mahdollistaa reittien vaihtamisen client-komponenteissa useilla eri tavoilla.

Toteutusvaiheiden yleiskatsaus:

1. Käyttäjän syötteen tallentaminen;
2. URL-osoitteen päivittäminen hakuparametreilla;
3. URL-osoitteen ja syötekentän synkronointi;
4. Taulukon päivittäminen hakukyselyn mukaisesti.

Takaisin projektiin

1. Käyttäjän syötteen tallentaminen

1. Avaa Search-komponentti (app/ui/search.tsx);
2. Huomioi 'use client' -käytön, joka mahdollistaa tapahtumankuuntelijat ja hookit;
3. Hyödynnä handleSearch-funktiota, joka käynnistyy jokaisella syötteen muutoksella.

Toteutuksen jälkeen avaa selaimen kehittäjäkonsoli. Kaikki syöttökenttään kirjoitettu teksti näkyy nyt konsolissa.

2. Päivitä URL hakuehdoilla

1. Tuo useSearchParams-hook osoitteesta 'next/navigation' ja aseta se muuttujaan;
2. Luo handleSearch-funktion sisällä uusi URLSearchParams-instanssi käyttäen aiemmin määriteltyä muuttujaa (searchParams). Tämä apuluokka tarjoaa menetelmiä URL-kyselyparametrien käsittelyyn;
3. Aseta parametrimerkkijono käyttäjän syötteen perusteella. Jos syöte on tyhjä, poista se;
4. Hyödynnä useRouter- ja usePathname-hookeja osoitteesta 'next/navigation' ja käytä replace-metodia useRouter()-hookista handleSearch-funktion sisällä.
   • ${pathname} viittaa nykyiseen polkuun, esim. "/dashboard/invoices";
   • Kun käyttäjä kirjoittaa hakukenttään, params.toString() muuntaa syötteen URL-yhteensopivaan muotoon;
   • replace(${pathname}?${params.toString()}) päivittää URL-osoitteen käyttäjän hakutiedoilla (esim. /dashboard/invoices?query=qwerty).

URL päivittyy ilman sivun uudelleenlatausta Next.js:n asiakaspuolen navigoinnin ansiosta.

Toteutuksen jälkeen kaikki syötteeseen kirjoitettu teksti näkyy URL-osoitteessa.

3. Pidä URL ja syötekenttä synkronoituna

Jotta syötekenttä vastaa URL:ia ja täyttyy jaettaessa, käytä defaultValue-ominaisuutta lukemalla arvo searchParams-muuttujasta.

4. Päivitä taulukko hakukyselyn mukaisesti

Lopuksi päivitetään Table-komponentti heijastamaan hakukyselyä. Sivukomponentit hyväksyvät propin nimeltä searchParams. Välitä nykyiset URL-parametrit <Table>-komponentille.

Muista poistaa kommentointi Table-komponentilta.

Hienoa! Olet onnistuneesti lisännyt hakutoiminnon sovellukseesi. Kokeile – toimiiko se? 😊

Seuraavassa luvussa perehdytään sivutukseen, sillä tällä hetkellä sivulla näkyy vain 6 laskua.

Käytännössä