Щоб надати користувачам можливість переходити між різними сторінками та переглядати всі рахунки, реалізуйте пагінацію за допомогою параметрів URL, подібно до функціоналу пошуку.

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

Крок 1

1. Якщо перейти до компонента Pagination, можна побачити, що це клієнтський компонент. Щоб уникнути розкриття секретів бази даних, не отримуйте дані на клієнтській стороні. Натомість отримуйте дані на сервері та передавайте їх як проп до компонента;
2. У файлі app/dashboard/invoices/page.tsx імпортуйте нову функцію під назвою fetchInvoicesPages і передайте пошуковий запит із searchParams як аргумент:
   • fetchInvoicesPages обчислює загальну кількість сторінок на основі пошукового запиту. Наприклад, якщо є 12 відповідних рахунків-фактур із відображенням по 6 на сторінці, загальна кількість сторінок становитиме 2.
3. Передайте проп totalPages до компонента <Pagination/>.

Крок 2

1. Перейдіть до app/ui/invoices/pagination.tsx;
2. Імпортуйте хуки usePathname та useSearchParams;
3. Використайте ці хуки для отримання поточної сторінки та встановлення нової сторінки;
4. Розкоментуйте код у цьому компоненті.

Примітка

Ваш застосунок може тимчасово не працювати, оскільки логіка <Pagination/> ще не реалізована. Ми повернемося до цього пізніше.

Крок 3

1. Усередині компонента <Pagination> створіть нову функцію під назвою createPageURL;
2. Аналогічно до пошукової функціональності, використайте URLSearchParams для встановлення нового номера сторінки;
3. Використайте pathName для побудови рядка URL;
4. Розкоментуйте змінну allPages.

Крок 4

Останній крок — коли користувач вводить новий пошуковий запит, необхідно скинути номер сторінки на 1. Для цього оновіть функцію handleSearch у файлі app/ui/search.tsx.

На практиці