Таблица с поиском и страницами
Условие
Таблица по rows и columns: [{ key, title }]. Требования: · поиск <input class="q"> фильтрует по подстроке в любом поле, регистр не важен; · строки <tr class="row">, показывается не более pageSize за раз; · <button class="prev">, <button class="next">, индикатор <span class="page"> вида «2 / 5»; · кнопки блокируются на краях (атрибут disabled); · смена поиска возвращает на первую страницу; · пустой результат показывает <div class="empty">; · число страниц считается по отфильтрованным строкам, минимум 1.
Что проверяют тесты
режет по страницам
листает
кнопки блокируются на краях
фильтрует по любому полю
поиск сбрасывает на первую страницу
пустой результат
страница не уезжает за границу после фильтрации
Как подойти
Задача про производные состояния: в состоянии живут только запрос и номер страницы, всё остальное вычисляется. Главная ловушка - рассогласование: после фильтрации текущая страница может оказаться за пределами. Зажим safePage решает это без эффектов-синхронизаторов. Второй важный момент - сброс на первую страницу при изменении запроса, иначе пользователь видит пустоту. Что назвать вслух: debounce на поиск, серверная пагинация с курсором, виртуализация вместо страниц, сохранение состояния в адресной строке.
Подсказки: 3
- Фильтрация и нарезка страниц выводятся из состояния - хранить их не надо.
- Номер страницы обязательно зажимать: список мог стать короче.
- Число страниц считается по отфильтрованным строкам и не может быть нулём.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.