Utveckling av Sökfunktionalitet

Teori

Innan sökfunktionen implementeras är det viktigt att förstå dessa klient-hooks.

• useSearchParams;
  • Ger åtkomst till aktuella URL-parametrar;
  • Exempel: För URL:en /dashboard/invoices?page=1&query=pending returneras {page: '1', query: 'pending'}.
• usePathname;
  • Läser av den aktuella URL:ens sökväg;
  • Exempel: För routen domain/dashboard/invoices returnerar usePathname "/dashboard/invoices".
• useRouter.
  • Underlättar navigering mellan rutter i klientkomponenter och erbjuder flera metoder.

Översikt av implementeringssteg:

1. Fånga användarens inmatning;
2. Uppdatera URL:en med sökparametrar;
3. Håll URL:en synkroniserad med inmatningsfältet;
4. Uppdatera tabellen för att återspegla sökfrågan.

Tillbaka till projektet

1. Fånga användarens inmatning

1. Öppna Search-komponenten (app/ui/search.tsx);
2. Observera användningen av 'use client', vilket indikerar tillgänglighet för eventlyssnare och hooks;
3. Använd funktionen handleSearch, som utlöses vid varje ändring i inmatningsfältet.

Efter implementering, öppna utvecklarkonsolen i din webbläsare. All text som matas in i inmatningsfältet ska nu visas i webbläsarens konsol.

2. Uppdatera URL:en med sökparametrar

1. Importera hooken useSearchParams från 'next/navigation' och tilldela den till en variabel;
2. Skapa inuti funktionen handleSearch en ny instans av URLSearchParams med hjälp av den tidigare definierade variabeln (searchParams). Detta verktyg tillhandahåller metoder för att hantera URL:ens frågeparametrar;
3. Ange parametersträngen baserat på användarens inmatning. Om inmatningen är tom, ta bort den;
4. Använd hookarna useRouter och usePathname från 'next/navigation' och använd metoden replace från useRouter() i handleSearch.
   • ${pathname} representerar den aktuella sökvägen, t.ex. "/dashboard/invoices";
   • När användaren skriver i sökfältet konverterar params.toString() inmatningen till ett URL-vänligt format;
   • replace(${pathname}?${params.toString()}) uppdaterar URL:en med användarens sökdata (t.ex. /dashboard/invoices?query=qwerty).

URL:en uppdateras utan sidomladdning tack vare Next.js klientbaserade navigering.

Efter implementering kommer all text som skrivs in i fältet att återspeglas i URL:en.

3. Håll URL:en synkroniserad med inmatningsfältet

För att säkerställa att inmatningsfältet matchar URL:en och fylls i när den delas, använd defaultValue genom att läsa från searchParams.

4. Uppdatera tabellen för att återspegla sökfrågan

Slutligen uppdaterar vi Table-komponenten för att återspegla sökfrågan. Sidkomponenter accepterar en prop som heter searchParams. Skicka aktuella URL-parametrar till <Table>-komponenten.

Glöm inte att avkommentera Table-komponenten.

Fantastiskt! Du har nu lagt till sökfunktionalitet i din app. Prova gärna – fungerar det? 😊

I nästa kapitel går vi igenom paginering eftersom endast 6 fakturor för närvarande visas på sidan.

I praktiken