В втором задании необходимо оживить страницу списка приключений: добавить поиск по названию и тегам, подгрузку по скроллу, получение данных с сервера и рендер на клиенте.
Все требования относятся исключительно к главной странице,
остальные страницы необходимо оставить без изменений.
-
Список приключений при первой загрузке страницы должен содержать не более 5 приключений
- Как только пользователь прокрутил страницу до последнего из пяти – появился заголовок, необходимо асинхронно загрузить следующую пачку из 5. И так до тех пор, пока приключения не закончатся. В последней пачке может быть менее 5.
- Если экран пользователя настолько большой, что влезли все первые 5 приключений – можно загружать следующую пачку асинхронно сразу после загрузки страницы.
- На клиент должны приходить только данные, а не отрендеренные шаблоны. Не HTML, а например JSON формат.
- Используя DOM API необходимо отрендерить очередную пачку приключений по полученным с сервера данным.
- В случае ошибки необходимо показывать сообщение «Не удалось загрузить приключения»
-
Над списком приключений необходимо вывести фильтр приключений
- Фильтр состоит из поля для ввода произвольного запроса, поля для ввода хештегов и кнопки «Найти»
- Поле для ввода хештегов позволяет набрать хештеги для фильтрации
- По мере ввода, показываем список-подсказку из уже имеющихся хештегов, содержащих введённый текст (как в поиске Яндекса, например)
- Пользователь может перемещаться по списку стрелками «вверх» и «вниз»
- По нажатию на enter или клику на элементе списка, выбранный хештег фиксируется слева от поля для ввода, а строка для ввода очищается, позволяя ввести следующий
- Набранных хештегов может быть сколь угодно много
- Можно удалить набранный хештег, нажав на «крестик»
- По нажатию на кнопку «Найти», необходимо асинхронно запросить подходящие приключения
- Выбранные приключения должны содержать один из введённых пользователями хештегов
- Названия или описание выбранных приключений должны соответствовать произвольному запросу пользователя. Для этого можно использовать возможности полнотекстового поиска в PostgreSQL.
- Выбранные приключения должны загружаться так же, как и неотфильтрованный их список – в первой пачке 5, следующие по мере прокрутки страницы
- В случае ошибки необходимо показывать сообщение «Не удалось загрузить приключения»
Вторая версия приложения должна быть построена на тех же технологиях, что и первая.
Но для клиентской логики на стороне браузера теперь необходимо использовать чистый JavaScript, DOM API и другие API браузера. Без React, Redux, jQuery и других сторонних библиотек.
Для клиентского JavaScript кода можно использовать самый современный стандарт (let, const, и даже async и await). Проверять будем в последней версии Яндекс.Браузера.
При этом для организации взаимодействия между сервером и браузером можете выбрать любой подход и стороннюю библиотеку.
React будет позже :). А в остальном на ваше усмотрение.