Теорія

Перш ніж реалізовувати функціонал пошуку, важливо ознайомитися з цими клієнтськими хуками.

• useSearchParams;
  • Надає доступ до поточних параметрів URL;
  • Приклад: Для URL /dashboard/invoices?page=1&query=pending повертає {page: '1', query: 'pending'}.
• usePathname;
  • Зчитує поточний шлях URL;
  • Приклад: Для маршруту domain/dashboard/invoices, usePathname повертає "/dashboard/invoices".
• useRouter.
  • Дозволяє навігацію між маршрутами у клієнтських компонентах, пропонуючи декілька методів.

Огляд етапів реалізації:

1. Отримання введення користувача;
2. Оновлення URL з параметрами пошуку;
3. Синхронізація URL з полем введення;
4. Оновлення таблиці відповідно до пошукового запиту.

Повернення до проєкту

1. Отримання введення користувача

1. Відкрити компонент Search (app/ui/search.tsx);
2. Звернути увагу на використання 'use client', що вказує на доступність обробників подій та хуків;
3. Використати функцію handleSearch, яка викликається при кожній зміні введення.

Після впровадження відкрийте Консоль розробника у вашому браузері. Ви повинні побачити будь-який текст, введений у поле введення, відображений у консолі браузера.

2. Оновлення URL з параметрами пошуку

1. Імпортувати хук useSearchParams з 'next/navigation' та присвоїти його змінній;
2. Усередині функції handleSearch створити новий екземпляр URLSearchParams, використовуючи раніше визначену змінну (searchParams). Ця утиліта надає методи для роботи з параметрами запиту в URL;
3. Встановити рядок параметрів відповідно до введення користувача. Якщо поле порожнє — видалити його;
4. Використати хуки useRouter та usePathname з 'next/navigation' і застосувати метод replace з useRouter() у межах handleSearch.
   • ${pathname} — поточний шлях, наприклад, "/dashboard/invoices";
   • Під час введення в пошуковий рядок params.toString() перетворює введене у формат, придатний для URL;
   • replace(${pathname}?${params.toString()}) оновлює URL з даними пошуку користувача (наприклад, /dashboard/invoices?query=qwerty).

URL оновлюється без перезавантаження сторінки завдяки клієнтській навігації Next.js.

Після впровадження будь-який текст, введений у поле, буде відображатися в URL.

3. Синхронізація URL з полем введення

Щоб поле введення відповідало URL і автоматично заповнювалося при поширенні посилання, використовуйте defaultValue, зчитуючи значення з searchParams.

4. Оновлення таблиці відповідно до пошукового запиту

Нарешті, оновіть компонент Table, щоб він відображав результати пошуку. Компоненти сторінок приймають проп під назвою searchParams. Передайте поточні параметри URL до компонента <Table>.

Не забудьте розкоментувати компонент Table.

Чудово! Ви успішно додали функціонал пошуку до свого застосунку. Спробуйте — чи працює він? 😊

У наступному розділі розглянемо пагінацію, оскільки наразі на сторінці відображається лише 6 рахунків.

На практиці