Блок результатов
Блок результатов появляется только после обработки запроса. Если пользователь ещё ничего не искал, блока с карточками на странице нет. Как только запрос сделан, данные передаются в стейт-переменную и блок появляется. Для отрисовки данных воспользуйтесь хуком.
До получения данных блок содержит прелоадер. Если ничего не найдено, на месте прелоадера появляется надпись «Ничего не найдено».
Если в процессе получения и обработки данных происходит ошибка, в окне результатов выводится надпись: «Во время запроса произошла ошибка. Возможно, проблема с соединением или сервер недоступен. Подождите немного и попробуйте ещё раз».
Когда данные получены, в блоке результатов исчезает прелоадер и появляются карточки фильмов. Их следует расположить в линию. Если сжимать окно браузера, карточки переносятся на следующую строку.
Если карточек больше, чем требуется для отображения 4 рядов, то под ними появляется кнопка «Ещё». По нажатию отрисовываются ещё карточки, а кнопка сдвигается ниже, чтобы оказаться под блоком с карточками.
Обратите внимание, что количество карточек, которые отображаются на странице, зависит от ширины экрана устройства.
Ширина 1280px — 4 ряда карточек. Кнопка «Ещё» загружает дополнительный ряд карточек.
Ширина 768px — 4 ряда карточек. Кнопка «Ещё» загружает дополнительный ряд карточек.
Ширина от 320px до 480px — 5 карточек по 1 в ряд. Кнопка «Ещё» загружает по 2 карточки.
В ряду отображайте столько карточек, сколько отображается в вашем макете на соответствующей ширине экрана.
Подумайте, как реализовать такое поведение и какими JavaScript возможностями можно воспользоваться для создания зависимости между шириной экрана устройства и количеством отображаемых и подгружаемых карточек. Проверяйте ширину устройства при монтировании компонента результатов.
Также пользователь может изменять ширину экрана своего устройства. Например, переводя телефон из портретной ориентации в альбомную и наоборот. Это событие можно отслеживать с помощью слушателя “resize”. Чтобы колбэк-функция слушателя не срабатывала слишком часто, например при изменении ширины экрана в отладчике, мы рекомендуем установить setTimeout на вызов этой функции внутри слушателя “resize”.
Когда все карточки отрисованы, кнопка «Ещё» должна пропасть.
Блок результатов Блок результатов появляется только после обработки запроса. Если пользователь ещё ничего не искал, блока с карточками на странице нет. Как только запрос сделан, данные передаются в стейт-переменную и блок появляется. Для отрисовки данных воспользуйтесь хуком. До получения данных блок содержит прелоадер. Если ничего не найдено, на месте прелоадера появляется надпись «Ничего не найдено». Если в процессе получения и обработки данных происходит ошибка, в окне результатов выводится надпись: «Во время запроса произошла ошибка. Возможно, проблема с соединением или сервер недоступен. Подождите немного и попробуйте ещё раз». Когда данные получены, в блоке результатов исчезает прелоадер и появляются карточки фильмов. Их следует расположить в линию. Если сжимать окно браузера, карточки переносятся на следующую строку. Если карточек больше, чем требуется для отображения 4 рядов, то под ними появляется кнопка «Ещё». По нажатию отрисовываются ещё карточки, а кнопка сдвигается ниже, чтобы оказаться под блоком с карточками. Обратите внимание, что количество карточек, которые отображаются на странице, зависит от ширины экрана устройства. Ширина 1280px — 4 ряда карточек. Кнопка «Ещё» загружает дополнительный ряд карточек. Ширина 768px — 4 ряда карточек. Кнопка «Ещё» загружает дополнительный ряд карточек. Ширина от 320px до 480px — 5 карточек по 1 в ряд. Кнопка «Ещё» загружает по 2 карточки. В ряду отображайте столько карточек, сколько отображается в вашем макете на соответствующей ширине экрана. Подумайте, как реализовать такое поведение и какими JavaScript возможностями можно воспользоваться для создания зависимости между шириной экрана устройства и количеством отображаемых и подгружаемых карточек. Проверяйте ширину устройства при монтировании компонента результатов. Также пользователь может изменять ширину экрана своего устройства. Например, переводя телефон из портретной ориентации в альбомную и наоборот. Это событие можно отслеживать с помощью слушателя “resize”. Чтобы колбэк-функция слушателя не срабатывала слишком часто, например при изменении ширины экрана в отладчике, мы рекомендуем установить setTimeout на вызов этой функции внутри слушателя “resize”. Когда все карточки отрисованы, кнопка «Ещё» должна пропасть.