Бесконечная лента
Условие
Лента с подгрузкой. Требования: · элементы - <div class="item">; · загрузка идёт функцией loadPage(page), возвращающей промис с массивом; · первая страница грузится при монтировании; · следующая - когда наблюдатель сообщает, что виден якорь <div class="sentinel">; · пока идёт загрузка, показывается <div class="loading"> и новая загрузка не стартует; · когда loadPage вернул пустой массив, якорь и загрузчик исчезают навсегда; · конструктор наблюдателя приходит пропсом Observer.
Что проверяют тесты
грузит первую страницу
подгружает по сигналу наблюдателя
параллельные сигналы не множат запросы
пустой ответ завершает ленту
наблюдатель отключается
Как подойти
Главная ловушка - защита от лавины: наблюдатель может выстрелить несколько раз подряд, а setLoading(true) применится только к следующему рендеру. Поэтому нужен ref как мгновенный замок в дополнение к состоянию для отрисовки. Второе: номер страницы нельзя читать из замыкания эффекта - он устареет. Что назвать вслух: обработка ошибок с повтором, виртуализация при тысячах элементов, курсорная пагинация вместо номеров страниц, восстановление позиции при возврате.
Подсказки: 3
- Флаг «идёт загрузка» нужен и в состоянии (для отрисовки), и в ref (для мгновенной проверки).
- Состояние обновляется асинхронно - к моменту третьего сигнала оно ещё старое.
- Признак конца - пустой ответ, после него наблюдатель не нужен.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.