Theorie

Vor der Implementierung der Suchfunktion ist es wichtig, diese Client-Hooks zu verstehen.

• useSearchParams;
  • Ermöglicht den Zugriff auf die aktuellen URL-Parameter;
  • Beispiel: Für die URL /dashboard/invoices?page=1&query=pending liefert es {page: '1', query: 'pending'}.
• usePathname;
  • Liest den aktuellen Pfadnamen der URL aus;
  • Beispiel: Für die Route domain/dashboard/invoices gibt usePathname "/dashboard/invoices" zurück.
• useRouter.
  • Erleichtert die Navigation zwischen Routen innerhalb von Client-Komponenten und bietet verschiedene Methoden.

Übersicht der Implementierungsschritte:

1. Erfassen der Benutzereingabe;
2. Aktualisieren der URL mit Suchparametern;
3. Synchronisieren der URL mit dem Eingabefeld;
4. Aktualisieren der Tabelle entsprechend der Suchanfrage.

Zurück zum Projekt

1. Erfassen der Benutzereingabe

1. Öffnen der Search-Komponente (app/ui/search.tsx);
2. Beachten der Verwendung von 'use client', was auf die Verfügbarkeit von Event-Listenern und Hooks hinweist;
3. Verwendung der Funktion handleSearch, die bei jeder Änderung der Eingabe ausgelöst wird.

Nach der Implementierung die Entwicklerkonsole im Browser öffnen. Jeder eingegebene Text im Eingabefeld sollte in der Browser-Konsole angezeigt werden.

2. Aktualisieren der URL mit Suchparametern

1. Importieren des useSearchParams-Hooks aus 'next/navigation' und Zuweisung zu einer Variablen;
2. Innerhalb der Funktion handleSearch Erstellen einer neuen Instanz von URLSearchParams unter Verwendung der zuvor definierten Variablen (searchParams). Dieses Hilfswerkzeug bietet Methoden zur Manipulation von URL-Query-Parametern;
3. Festlegen des Parameter-Strings basierend auf der Benutzereingabe. Bei leerer Eingabe wird der Parameter gelöscht;
4. Verwendung der Hooks useRouter und usePathname aus 'next/navigation' und Einsatz der replace-Methode von useRouter() innerhalb von handleSearch.
   • ${pathname} steht für den aktuellen Pfad, z. B. "/dashboard/invoices";
   • Während der Benutzer in die Suchleiste tippt, wandelt params.toString() die Eingabe in ein URL-kompatibles Format um;
   • replace(${pathname}?${params.toString()}) aktualisiert die URL mit den Suchdaten des Benutzers (z. B. /dashboard/invoices?query=qwerty).

Die URL wird ohne Seitenneuladen aktualisiert, dank der clientseitigen Navigation von Next.js.

Nach der Implementierung wird jeder in das Eingabefeld eingegebene Text in der URL widergespiegelt.

3. Synchronisierung der URL mit dem Eingabefeld

Um sicherzustellen, dass das Eingabefeld mit der URL übereinstimmt und beim Teilen ausgefüllt wird, sollte defaultValue durch Auslesen von searchParams verwendet werden.

4. Aktualisierung der Tabelle entsprechend der Suchanfrage

Abschließend wird die Table-Komponente aktualisiert, um die Suchanfrage widerzuspiegeln. Seitenkomponenten akzeptieren eine Prop namens searchParams. Übergeben Sie die aktuellen URL-Parameter an die <Table>-Komponente.

Vergessen Sie nicht, die Table-Komponente zu entkommentieren.

Großartig! Die Suchfunktion wurde erfolgreich zu Ihrer Anwendung hinzugefügt. Probieren Sie es aus – funktioniert alles? 😊

Im nächsten Kapitel beschäftigen wir uns mit der Paginierung, da aktuell nur 6 Rechnungen auf der Seite sichtbar sind.

In der Praxis