rastereo / movies-explorer-frontend Goto Github PK

Подготовьте файловую структуру проекта перед тем, как перейти к созданию компонентов. Вот несколько рекомендаций:

• для «Реакт-компонентов» создайте отдельную директорию components/
• для вспомогательных функций, а также для запросов к API — директорию utils/
• для изображений — images/
• для кода или файлов сторонних разработчиков, например шрифтов, — vendor/

• Страница регистрации

При нажатии на кнопку «Регистрация» в шапке сайта на главной странице происходит переход на страницу регистрации по маршруту /signup.

Перед отправкой формы на фронтенде нужно проверить, что:

• все поля обязательные;
• поле email соответствует шаблону электронной почты;
• поле name содержит только латиницу, кириллицу, пробел или дефис.

Для валидации электронной почты можно использовать сторонние библиотеки. Если одно из полей не заполнено или не прошло валидацию, кнопка «Зарегистрироваться» должна быть неактивна. Неактивная кнопка имеет другой цвет, и по ней невозможно кликнуть.

Валидация должна происходить моментально, то есть при вводе нового символа в поле. Ошибки валидации выводите под полями ввода.

Вы уже реализовывали подобный механизм валидации, но делали это на нативном JS. Теперь вам предстоит самостоятельно написать решение для валидации, но на «Реакте». Для этого можно создать отдельный компонент. Если нужно, посмотрите пример такого компонента и почитайте про хук useCallback.

Когда форма заполнена корректно, кнопка «Зарегистрироваться» становится активной. Клик по ней должен отправлять запрос на роут /signup нашего API. Если в ответе на этот запрос сервер возвращает ошибку, сообщение о ней должно располагаться над кнопкой «Зарегистрироваться».

Если ответ на запрос успешен, пользователь сразу авторизуется и будет перенаправлен на страницу «Фильмы».

• Страница логина

При нажатии на кнопку «Войти» в шапке сайта на главной странице происходит переход на страницу авторизации по маршруту /signin.

Форма входа тоже должна валидироваться на фронтенде:

• поля email и пароль обязательны,
• поле email должно соответствовать шаблону почты.

Всё остальное нужно настроить как в форме регистрации: моментальную механику валидации и показ ошибок в интерфейсе.

Если форма заполнена корректно, кнопка «Войти» становится активной. Клик по ней отправляет запрос на роут /signin. Если логин и пароль правильные, сервер возвращает клиенту JWT. При этом токен должен сохраняться в localStorage или куку, а данные о пользователе — в глобальную стейт-переменную currentUser. После этого происходит редирект на страницу «Фильмы».

• Страница редактирования профиля

У авторизованного пользователя в шапке сайта отображается кнопка «Аккаунт». При клике происходит переход на страницу редактирования профиля:

На ней пользователь может изменить свои данные. Валидация происходит так же, как и на предыдущих страницах. Если данные введены корректно и отличаются от изначальных — кнопка «Редактировать» станет активна и пользователь сможет кликнуть по ней. Пользователя нужно уведомить о результате запроса к серверу.

При клике на кнопку «Выйти из аккаунта» происходит редирект на главную страницу и удаление JWT из локального хранилища или куки. Чтобы войти на сайт заново, пользователю потребуется повторно авторизоваться.

Шапка сайта имеет разные пункты в меню в зависимости от того, авторизован ли пользователь. Поговорим об этом дальше.

• App — корневой компонент приложения, его создаёт CRA.

• Main — компонент страницы «О проекте». Он будет содержать только презентационные компоненты и в будущем, за исключением шапки навигации. Вот так выглядит список компонентов, которые будут использоваться только на этой странице:

• Promo — компонент с вёрсткой баннера страницы «О проекте».

• NavTab — компонент с навигацией по странице «О проекте».

• AboutProject — компонент с описанием дипломного проекта.

• Techs — компонент с использованными технологиями.

• AboutMe — компонент с информацией о студенте.

• Portfolio — компонент со ссылками на другие проекты.

• Movies — компонент страницы с поиском по фильмам. В нём пригодятся эти компоненты:

• SearchForm — форма поиска, куда пользователь будет вводить запрос. Обратите внимание на фильтр с чекбоксом «Только короткометражки». Для него можно воспользоваться отдельным управляемым компонентом

• FilterCheckbox.

• Preloader — отвечает за работу прелоадера.

• MoviesCardList — компонент, который управляет отрисовкой карточек фильмов на страницу и их количеством.

• MoviesCard — компонент одной карточки фильма.

• SavedMovies — компонент страницы с сохранёнными карточками фильмов. Пригодятся эти компоненты:

• MoviesCardList — компонент, который управляет отрисовкой карточек фильмов на страницу и их количеством.

• MoviesCard — компонент одной карточки фильма.

• Для работы со страницами регистрации, авторизации и редактирования профиля создайте три компонента:

• Register — компонент страницы регистрации.

• Login — компонент страницы авторизации.

• Profile — компонент страницы изменения профиля.

• Компоненты, которые понадобятся на каждой из основных страниц:

• Header — компонент, который отрисовывает шапку сайта на страницу.

• Navigation — компонент, который отвечает за меню навигации на сайте.

• Footer — презентационный компонент, который отрисовывает подвал.

• 404

Это базовые компоненты этого этапа. Вы можете создать дополнительные компоненты, например для элементов форм. Кроме этого, мы рекомендуем создать отдельный компонент для вывода ошибок при работе с API — это может быть модальное окно или текстовое сообщение в соответствующих частях проекта.
На следующем этапе у вас появятся новые компоненты или дополнятся существующие, которые отвечают за функциональность:
регистрации,
авторизации,
защищённых роутов.
Вы можете использовать как функциональные компоненты, так и классовые.

Сверстайте все блоки сайта по сгенерированному макету. Вёрстка должна отвечать определённым HTML- и CSS-требованиям.
HTML:

• Разметка портирована в JSX.
• Разметка семантическая.
• Все классы названы по БЭМ.
• Навигация должна работать: ни одна ссылка не ведёт «в никуда».

CSS:

• Для стилизации каждого блока выбраны правильные инструменты, которые подходят для задачи.
• Вёрстка на Flex layout и/или Grid layout.
• Адаптивность под указанные в макете разрешения и отсутствие поломок в промежуточных значениях.
• Шрифты подключены через @font-face.
• Элементы правильно позиционированы.
• Сделана микроанимация кнопок, ссылок и инпутов.
• Использован normalize.сss или стилизован строго по БЭМ — без внешних файлов.
• Формы и плейсхолдеры стилизованы верно.
• В разных частях проекта есть переиспользуемые блоки.
• Все изображения оптимизированы — в том числе и .svg.

Полный список требований находится в критериях к диплому. Обратите внимание, что делать файловую структуру по БЭМ не требуется.

• Блок поиска по фильмам

После сабмита формы поиска производится валидация. Если в поле не введён текст, выводится ошибка «Нужно ввести ключевое слово».

Если слово введено, то осуществляется запрос к API. Сервис, к которому нужно обратиться — https://api.nomoreparties.co/beatfilm-movies. Вам не нужно настраивать параметры запроса — получите все данные с сервиса, а фильтровать их вы уже будете на клиентской части.

После получения данных от сервера нужно отобразить их в блоке результатов. О нём далее.

• О реализации запросов

Для работы с нашим и сторонним сервисом в директории utils/ создайте два файла:

• MainApi.js,
• MoviesApi.js.

Первый файл будет содержать описание запросов к нашему Api. Второй — к сервису beatfilm-movies. Напишите этот код на нативном JS, применяя fetch. Вы можете использовать как обычные функции с импортом в нужные компоненты, так и классовую структуру.

• Блок результатов

Блок результатов появляется только после обработки запроса. Если пользователь ещё ничего не искал, блока с карточками на странице нет. Как только запрос сделан, данные передаются в стейт-переменную и блок появляется. Для отрисовки данных воспользуйтесь хуком.

До получения данных блок содержит прелоадер. Если ничего не найдено, на месте прелоадера появляется надпись «Ничего не найдено».

Если в процессе получения и обработки данных происходит ошибка, в окне результатов выводится надпись: «Во время запроса произошла ошибка. Возможно, проблема с соединением или сервер недоступен. Подождите немного и попробуйте ещё раз».

Когда данные получены, в блоке результатов исчезает прелоадер и появляются карточки фильмов. Их следует расположить в линию. Если сжимать окно браузера, карточки переносятся на следующую строку.
Если карточек больше, чем требуется для отображения 4 рядов, то под ними появляется кнопка «Ещё». По нажатию отрисовываются ещё карточки, а кнопка сдвигается ниже, чтобы оказаться под блоком с карточками.

Обратите внимание, что количество карточек, которые отображаются на странице, зависит от ширины экрана устройства.

• Ширина 1280px — 4 ряда карточек. Кнопка «Ещё» загружает дополнительный ряд карточек.
• Ширина 768px — 4 ряда карточек. Кнопка «Ещё» загружает дополнительный ряд карточек.
• Ширина от 320px до 480px — 5 карточек по 1 в ряд. Кнопка «Ещё» загружает по 2 карточки.

В ряду отображайте столько карточек, сколько отображается в вашем макете на соответствующей ширине экрана.

Подумайте, как реализовать такое поведение и какими JavaScript возможностями можно воспользоваться для создания зависимости между шириной экрана устройства и количеством отображаемых и подгружаемых карточек. Проверяйте ширину устройства при монтировании компонента результатов.

Также пользователь может изменять ширину экрана своего устройства. Например, переводя телефон из портретной ориентации в альбомную и наоборот. Это событие можно отслеживать с помощью слушателя “resize”. Чтобы колбэк-функция слушателя не срабатывала слишком часто, например при изменении ширины экрана в отладчике, мы рекомендуем установить setTimeout на вызов этой функции внутри слушателя “resize”.

Когда все карточки отрисованы, кнопка «Ещё» должна пропасть.

• Восстановление результатов предыдущего поиска на странице всех фильмов

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

Для этого после поиска фильмов сохраните в localStorage текст запроса, состояние переключателя короткометражек и найденные фильмы.

Если пользователь повторно переходит на страницу фильмов, то при монтировании компонента доставайте данные из локального хранилища. В соответствии с этими данными устанавливайте текст в строке поиска, правильное состояние переключателя короткометражек и отображайте на странице ранее найденные фильмы, взятые из хранилища.

Обратите внимание, кнопка «Ещё» при отображении ранее найденных фильмов должна продолжать работать корректно. Выстройте работу с локальным хранилищем и стейт-переменной в правильном порядке.

При обработке данных хранилища предусмотрите ситуацию, при которой данных в нём может и не быть. Например, по какой-то причине хранилище было очищено или зашёл новый пользователь, который ещё ни разу не искал фильмы. При отсутствии данных в хранилище приложение не должно падать с ошибкой.

Также не забудьте при выходе пользователя с сайта вызывать очистку хранилища, иначе другой пользователь зайдёт на сайт и увидит запрос предыдущего пользователя, что не всегда допустимо.

Сохранять данные поиска на странице «Сохранённые фильмы» в localStorage не требуется. При переходе пользователя на страницу сохранённых фильмов ему должны быть отображены все его фильмы.

• Карточка

Такие данные карточки мы получаем в ответе BeatfilmMoviesApi:

• название фильма на русском языке находится в свойстве nameRU;
• изображение — в image.url;
• Изображения приходят с сервера с относительным, а не абсолютным URL. Не забудьте добавить к ним URL сервера — https://api.nomoreparties.co/.
• ссылка на трейлер — в trailerLink;
• длительность фильма рассчитывается на основе поля duration и должна отображаться в часах и минутах.

Рядом с заголовком есть иконка лайка. Если пользователь лайкнул фильм — иконка отображается в активном состоянии с заливкой. При повторном нажатии — иконка остаётся без заливки.

Клик по иконке без заливки должен отправлять запрос к /movies нашего API на сохранение фильма. Клик по иконке с заливкой — запрос на удаление. Добавленный фильм будет отображаться на странице сохранённых фильмов. При удалении фильм отображаться не будет.

При сохранении и удалении фильма заливка иконки должна изменяться.

В качестве инфраструктуры проекта используйте пакет CRA, который содержит всё необходимое для работы.

Подготовьте необходимые маршруты:

• по роуту / отображается страница «О проекте»;
• по роуту /movies отображается страница «Фильмы»;
• по роуту /saved-movies отображается страница «Сохранённые фильмы»;
• по роуту /profile отображается страница с профилем пользователя;
• по роутам /signin и /signup отображаются страницы авторизации и регистрации.

Защищать маршруты авторизацией пока не требуется. Достаточно наладить работу всех ссылок:

• нажатие на логотип ведёт на страницу «О проекте»;
• нажатие на «Фильмы» — на роут /movies;
• нажатие на «Сохранённые фильмы» — на роут /saved-movies;
• нажатие на «Регистрация», «Авторизация», «Аккаунт» — на соответствующие роуты /signup, /signin и /profile.