Theorie

Voordat de zoekfunctionaliteit wordt geïmplementeerd, is het essentieel om deze client hooks te begrijpen.

• useSearchParams;
  • Biedt toegang tot de huidige URL-parameters;
  • Voorbeeld: Voor de URL /dashboard/invoices?page=1&query=pending, levert het {page: '1', query: 'pending'}.
• usePathname;
  • Leest het huidige pad van de URL;
  • Voorbeeld: Voor de route domain/dashboard/invoices, geeft usePathname "/dashboard/invoices" terug.
• useRouter.
  • Maakt navigeren tussen routes binnen clientcomponenten mogelijk en biedt meerdere methoden.

Overzicht van implementatiestappen:

1. Gebruikersinvoer vastleggen;
2. De URL bijwerken met zoekparameters;
3. De URL gesynchroniseerd houden met het invoerveld;
4. De tabel bijwerken om de zoekopdracht weer te geven.

Terug naar het project

1. Gebruikersinvoer vastleggen

1. Open het Search-component (app/ui/search.tsx);
2. Let op het gebruik van 'use client', wat aangeeft dat event listeners en hooks beschikbaar zijn;
3. Gebruik de functie handleSearch, die wordt geactiveerd bij elke wijziging van de invoer.

Na implementatie, open de Developer Console in de browser. Alle tekst die in het invoerveld wordt getypt, moet zichtbaar zijn in de browserconsole.

2. Werk de URL bij met zoekparameters

1. Importeer de useSearchParams hook uit 'next/navigation' en wijs deze toe aan een variabele;
2. Maak binnen de functie handleSearch een nieuwe instantie van URLSearchParams aan met behulp van de eerder gedefinieerde variabele (searchParams). Deze utility biedt methoden om URL-queryparameters te beheren;
3. Stel de parameterstring in op basis van de invoer van de gebruiker. Als de invoer leeg is, verwijder deze dan;
4. Gebruik de hooks useRouter en usePathname uit 'next/navigation' en pas de replace-methode van useRouter() toe binnen handleSearch.
   • ${pathname} vertegenwoordigt het huidige pad, bijvoorbeeld "/dashboard/invoices";
   • Terwijl de gebruiker typt in de zoekbalk, zet params.toString() de invoer om naar een URL-vriendelijk formaat;
   • replace(${pathname}?${params.toString()}) werkt de URL bij met de zoekgegevens van de gebruiker (bijvoorbeeld /dashboard/invoices?query=qwerty).

De URL wordt bijgewerkt zonder dat de pagina wordt herladen, dankzij client-side navigatie van Next.js.

Na implementatie wordt alle tekst die in het invoerveld wordt getypt, weergegeven in de URL.

3. Houd de URL gesynchroniseerd met het invoerveld

Om ervoor te zorgen dat het invoerveld overeenkomt met de URL en wordt ingevuld wanneer deze wordt gedeeld, gebruik defaultValue door te lezen uit searchParams.

4. Werk de tabel bij om de zoekopdracht weer te geven

Tot slot werken we de Table-component bij om de zoekopdracht weer te geven. Pagina-componenten accepteren een prop genaamd searchParams. Geef de huidige URL-parameters door aan de <Table>-component.

Vergeet niet de Table-component te decommentariëren.

Geweldig! Je hebt met succes zoekfunctionaliteit aan je app toegevoegd. Probeer het uit – werkt het? 😊

In het volgende hoofdstuk behandelen we paginering, aangezien er momenteel slechts 6 facturen op de pagina zichtbaar zijn.

In de praktijk