Level 3

[PrevedMed6]

Функционал на ReactJS

[SergeyK2004]

Резюме:

JavaScript

Критерии, влияющие на работоспособность

• [ ] Функциональность проекта из брифа реализована полностью:
  • Общее
  • Все ссылки и кнопки в проекте работают. Комментарий: При переходе на главную страницу сайта, сайт перезагружается. Сайт не должен перезагружаться при переходе между страницами.
  • Правильно работают оба состояния шапки: если пользователь не залогинился, в шапке должны быть кнопки «Войти» и «Регистрация»; если пользователь залогинился, кнопки исчезают — и появляются кнопки «Фильмы», «Сохранённые фильмы» и «Аккаунт», в том числе и на главной странице.
  • При поиске текст запроса, найденные фильмы и состояние переключателя короткометражек сохраняются в хранилище. Если пользователь повторно переходит на страницу фильмов, то при монтировании компонента данные достаются из локального хранилища. Страница отображается в соответствии с загруженными из хранилища данными.
  • Все формы валидируются и на стороне клиента. Пользователь не может отправить запрос с невалидными данными.
  • Страницы «Регистрация» и «Авторизация»:
  • На странице «Регистрация» клик по кнопке «Зарегистрироваться» отправляет запрос на роут /signup, если данные введены корректно. Если запрос прошёл успешно, то автоматически производится вход и редирект на страницу /movies.
  • На странице «Авторизация» клик по кнопке «Войти» отправляет запрос на роут /signin, если данные введены корректно. Если запрос прошёл успешно, происходит редирект на страницу /movies.
  • Все формы валидируются и на стороне клиента.
  • Страница редактирование профиля:
  • На странице редактирования профиля клик по кнопке «Сохранить» отправляет запрос на роут /users/me, если данные введены корректно.
  • Пользователю отображается уведомление об успешном запросе к серверу при сохранении профиля.
  • Если на странице редактирования профиля введённая информация соответствует текущим данным пользователя, кнопка «Сохранить» заблокирована и нельзя отправить запрос сохранения.
    Комментарий: При редактировании пользователь может ввести текущие данные профиля и сохранить их, а нужно сделать так, чтобы можно было отправить запрос на сохранение, только если данные изменены по сравнению с текущими данными пользователя, которые должны содержаться в текущий момент в контексте. При совпадении данных кнопка сохранения должна быть деактивирована, т.е. отличаться визуально и не иметь эффекта наведения
  • Поиск фильмов:
  • Прелоадер крутится во время выполнения запроса фильмов.
  • Работа с фильтром настроена:
    • Поиск фильмов регистронезависимый.
    • Если запрос выполняется впервые, то работа с фильтром происходит после получения данных. Комментарий: при каждом поиске фильмов данные запрашиваются с сервера, не нужно повторно делать запрос, нужно использовать данные предыдущего т.к. данные сервер возвращает те же самые - по заданию "При запросе к серверу за фильмами на странице «Фильмы» вы получаете сразу все данные и сохраняете их."
    • Если карточки уже были отображены на странице в блоке результатов, клик по чекбоксу «Короткометражки» приводит к повторной фильтрации результата.
  • После успешного сабмита формы поиска появляется блок с результатами.
  • Если ничего не найдено, выводится надпись «Ничего не найдено». Комментарий: https://skr.sh/sJvHefi3wtF Надпись "Ничего не найдено" присутствует на странице фильмов сразу же при входе, когда пользователь ещё ничено не искал, а не только когда ничего не найдено.
  • На странице всех фильмов в блоке результата отображается такое же количество карточек, как в макете. Нажатие на кнопку «Ещё» отображает следующий ряд с тем же числом карточек. При отображении всех карточек кнопка "Ещё" скрывается.
  • Карточки:
  • Карточка состоит из изображения, названия фильма и его длительности. Длительность фильма рассчитывается корректно и соответствует формату в макете. Клик по карточке ведёт на трейлер фильма.
  • Кнопка лайка имеет правильное состояние, в зависимости от того, добавлен ли фильм в сохранённые или нет.
  • При клике на иконку «Лайк» в блоке карточки выполняется запрос к /movies нашего API для установки или снятия лайка, в зависимости от текущего состояния. Комментарий: https://skr.sh/sJvSNarLxdP Новый пользователь первый раз пытается добавить фильм в Сохраненные и может получить такую ошибку.
  • На странице «Сохранённые фильмы»:
  • Отображается форма поиска. Она позволяет искать фильмы по уже полученным данным о сохранённых фильмах.
  • Блок карточки содержит кнопку удаления, а не лайка.
  • При нажатии на кнопку удаления выполняется запрос на удаление фильма. После успешного запроса карточка удаляется со страницы.
• [x] Отсутствуют серьёзные баги, которые возникают при работе с сервисом, например:
  • Удалённые или добавленные карточки фильмов появляются только после перезагрузки страницы.
  • Если осталось отобразить меньше карточек фильмов, чем в полном ряду, то нажатие кнопки «Ещё» вызывает появление ошибок в консоли.
  • При удалении сохранённых карточек на соответствующей странице «Сохранённые фильмы» их по-прежнему можно найти через поиск. Поиск начинает корректно работать только после перезагрузки страницы.
  • Другие баги, которые возникают при работе с сервисом и требуют перезагрузки страницы или «ломают» пользовательский опыт.
• Регистрация и авторизация:
  • [x] Роуты /saved-movies, /movies, /profile защищёны HOC-компонентом ProtectedRoute. Роуты / , /signin, /signup не являются защищёнными.
  • [x] При попытке перейти на любой защищённый роут происходит редирект на / .
  • [x] Если пользователь был авторизован и закрыл вкладку, он может вернуться сразу на любую страницу приложения по URL-адресу, кроме страниц авторизации и регистрации.
  • [x] После успешного вызова обработчика onSignOut происходит редирект на /.
  • [x] Корректно используются хуки роутинга.
  • [ ] При попытке перейти на несуществующую страницу происходит редирект на страницу «404». Кнопка «Назад» работает корректно. Комментарий: Страница 404 отображается, но при нажатии на кнопку "Назад" происходит редирект на главную.
  • [x] Корректно используются компоненты <Switch />, <Route /> и <Redirect />.
• Работа с JWT выполнена корректно:
  • [x] JWT-токен хранится в localStorage или в cookie;
  • [x] Jwt проверяется запросом к серверу, а не только в локальном хранилище.
  • [x] При выходе из аккаунта jwt удаляется.
• Хуки:
  • [x] Хуки не используются внутри условных блоков или циклов.
  • [x] Хуки вызываются в основной функции компонента.
  • [x] При использовании классовых компонентов эффекты описаны внутри методов жизненного цикла компонента.
  • [x] Имена пользовательских хуков начинаются с use.
• Контекст:
  • [x] В корневом компоненте App создана стейт-переменная, которая хранит данные пользователя. Она используется в качестве значения для провайдера контекста.
  • [x] В компонент App внедрён контекст через CurrentUserContext.Provider.
  • [x] Компоненты, в которых используются данные профиля, подписаны на контекст.
• Асинхронные запросы к API:
  • [x] Запросы можно осуществлять через Fetch API или XMLHttpRequest, сторонние библиотеки, такие как axios или jQuery, не применяются.
  • [x] Запросы к API вынесены в отдельные файлы: MainApi.js и MoviesApi.js.
  • [x] Первый обработчик then возвращает res.json. res проверяется на корректность.
  • [x] Цепочка обработки промисов завершается блоком catch.
  • [x] Не выполняются лишние запросы к бэкенду, например: запрос всех фильмов с сервиса beatfilm-movies производится только при первом поиске; все сохранённые фильмы не запрашиваются с сервера при каждом лайке или дизлайке; данные пользователя запрашиваются один раз при запуске приложения.
• [x] Именование:
  • имена переменных, функций и параметров написаны в camelCase;
  • имена переменных — существительные;
  • имена переменных, функций и компонентов соответствуют содержимому;
  • имена коллекций NodeList — существительные во множественном числе;
  • имя функции начинается с глагола и отражает то, что она делает;
  • для именования запрещены: транслит и неуместные сокращения.

Хорошие практики

• [x] Начальное состояние стейт-переменных содержит корректный тип данных.
• [x] Для элементов списка используется уникальный ключ key, а не индекс массива.
• [x] Запросы к API описаны внутри компонента App или в корневых компонентах страниц.
• [x] Для внутренних ссылок в приложении используются компоненты из библиотеки react-router.
• [x] Не происходит утечки памяти при навешивании обработчиков. Все обработчики, добавленные через addEventListener, удаляются при размонтировании компонента.
• Обработка ошибок API:
  • [x] пользователь получает сообщение в случае любой ошибки;
  • [ ] поля формы заблокированы во время отправки запросов и у пользователя нет возможности отправить новый запрос до завершения предыдущего. Комментарий: на время выполнения запроса считается хорошей практикой блокировать поля ввода и кнопку отправки формы, что бы пользователь не мог выполнить новые запросы до завершения предыдущего
• [ ] Фиксированные значения (константы) именуются заглавными буквами и вынесены в отдельный конфиг-файл. Комментарий: длительность короткометражек, количество фильмов, отображаемое при поиске или нажатии кнопки "Еще" на разных размерах экрана и точки перестроения экрана нужно вынести в константы

Рекомендации

• [x] Сторонние JavaScript-библиотеки не применяются.
• [x] Используются семантически правильные блоки для компонентов. Не используются div или иные лишние HTML-тэги для компонентов, которые состоят из одноуровневых блоков.
• [x] Отсутствует «мусор» в коде:
  • нет беспорядка в коде;
  • нет лишнего кода: переменная объявлена, но не используется или есть какая-то лишняя логика;
  • код форматирован одинаково, соблюдается иерархия отступов.

Количество баллов: 59

[SergeyK2004]

Резюме:

JavaScript

Критерии, влияющие на работоспособность

• [x] Функциональность проекта из брифа реализована полностью:
  • Общее
  • Все ссылки и кнопки в проекте работают.
  • Правильно работают оба состояния шапки: если пользователь не залогинился, в шапке должны быть кнопки «Войти» и «Регистрация»; если пользователь залогинился, кнопки исчезают — и появляются кнопки «Фильмы», «Сохранённые фильмы» и «Аккаунт», в том числе и на главной странице.
  • При поиске текст запроса, найденные фильмы и состояние переключателя короткометражек сохраняются в хранилище. Если пользователь повторно переходит на страницу фильмов, то при монтировании компонента данные достаются из локального хранилища. Страница отображается в соответствии с загруженными из хранилища данными.
  • Все формы валидируются и на стороне клиента. Пользователь не может отправить запрос с невалидными данными.
  • Страницы «Регистрация» и «Авторизация»:
  • На странице «Регистрация» клик по кнопке «Зарегистрироваться» отправляет запрос на роут /signup, если данные введены корректно. Если запрос прошёл успешно, то автоматически производится вход и редирект на страницу /movies.
  • На странице «Авторизация» клик по кнопке «Войти» отправляет запрос на роут /signin, если данные введены корректно. Если запрос прошёл успешно, происходит редирект на страницу /movies.
  • Все формы валидируются и на стороне клиента.
  • Страница редактирование профиля:
  • На странице редактирования профиля клик по кнопке «Сохранить» отправляет запрос на роут /users/me, если данные введены корректно.
  • Пользователю отображается уведомление об успешном запросе к серверу при сохранении профиля.
  • Если на странице редактирования профиля введённая информация соответствует текущим данным пользователя, кнопка «Сохранить» заблокирована и нельзя отправить запрос сохранения.
  • Поиск фильмов:
  • Прелоадер крутится во время выполнения запроса фильмов.
  • Работа с фильтром настроена:
    • Поиск фильмов регистронезависимый.
    • Если запрос выполняется впервые, то работа с фильтром происходит после получения данных.
    • Если карточки уже были отображены на странице в блоке результатов, клик по чекбоксу «Короткометражки» приводит к повторной фильтрации результата.
  • После успешного сабмита формы поиска появляется блок с результатами.
  • Если ничего не найдено, выводится надпись «Ничего не найдено».
  • На странице всех фильмов в блоке результата отображается такое же количество карточек, как в макете. Нажатие на кнопку «Ещё» отображает следующий ряд с тем же числом карточек. При отображении всех карточек кнопка "Ещё" скрывается.
  • Карточки:
  • Карточка состоит из изображения, названия фильма и его длительности. Длительность фильма рассчитывается корректно и соответствует формату в макете. Клик по карточке ведёт на трейлер фильма.
  • Кнопка лайка имеет правильное состояние, в зависимости от того, добавлен ли фильм в сохранённые или нет.
  • При клике на иконку «Лайк» в блоке карточки выполняется запрос к /movies нашего API для установки или снятия лайка, в зависимости от текущего состояния.
  • На странице «Сохранённые фильмы»:
  • Отображается форма поиска. Она позволяет искать фильмы по уже полученным данным о сохранённых фильмах.
  • Блок карточки содержит кнопку удаления, а не лайка.
  • При нажатии на кнопку удаления выполняется запрос на удаление фильма. После успешного запроса карточка удаляется со страницы.
• [x] Отсутствуют серьёзные баги, которые возникают при работе с сервисом, например:
  • Удалённые или добавленные карточки фильмов появляются только после перезагрузки страницы.
  • Если осталось отобразить меньше карточек фильмов, чем в полном ряду, то нажатие кнопки «Ещё» вызывает появление ошибок в консоли.
  • При удалении сохранённых карточек на соответствующей странице «Сохранённые фильмы» их по-прежнему можно найти через поиск. Поиск начинает корректно работать только после перезагрузки страницы.
  • Другие баги, которые возникают при работе с сервисом и требуют перезагрузки страницы или «ломают» пользовательский опыт.
• Регистрация и авторизация:
  • [x] Роуты /saved-movies, /movies, /profile защищёны HOC-компонентом ProtectedRoute. Роуты / , /signin, /signup не являются защищёнными.
  • [x] При попытке перейти на любой защищённый роут происходит редирект на / .
  • [x] Если пользователь был авторизован и закрыл вкладку, он может вернуться сразу на любую страницу приложения по URL-адресу, кроме страниц авторизации и регистрации.
  • [x] После успешного вызова обработчика onSignOut происходит редирект на /.
  • [x] Корректно используются хуки роутинга.
  • [x] При попытке перейти на несуществующую страницу происходит редирект на страницу «404». Кнопка «Назад» работает корректно.
  • [x] Корректно используются компоненты <Switch />, <Route /> и <Redirect />.
• Работа с JWT выполнена корректно:
  • [x] JWT-токен хранится в localStorage или в cookie;
  • [x] Jwt проверяется запросом к серверу, а не только в локальном хранилище.
  • [x] При выходе из аккаунта jwt удаляется.
• Хуки:
  • [x] Хуки не используются внутри условных блоков или циклов.
  • [x] Хуки вызываются в основной функции компонента.
  • [x] При использовании классовых компонентов эффекты описаны внутри методов жизненного цикла компонента.
  • [x] Имена пользовательских хуков начинаются с use.
• Контекст:
  • [x] В корневом компоненте App создана стейт-переменная, которая хранит данные пользователя. Она используется в качестве значения для провайдера контекста.
  • [x] В компонент App внедрён контекст через CurrentUserContext.Provider.
  • [x] Компоненты, в которых используются данные профиля, подписаны на контекст.
• Асинхронные запросы к API:
  • [x] Запросы можно осуществлять через Fetch API или XMLHttpRequest, сторонние библиотеки, такие как axios или jQuery, не применяются.
  • [x] Запросы к API вынесены в отдельные файлы: MainApi.js и MoviesApi.js.
  • [x] Первый обработчик then возвращает res.json. res проверяется на корректность.
  • [x] Цепочка обработки промисов завершается блоком catch.
  • [x] Не выполняются лишние запросы к бэкенду, например: запрос всех фильмов с сервиса beatfilm-movies производится только при первом поиске; все сохранённые фильмы не запрашиваются с сервера при каждом лайке или дизлайке; данные пользователя запрашиваются один раз при запуске приложения.
• [x] Именование:
  • имена переменных, функций и параметров написаны в camelCase;
  • имена переменных — существительные;
  • имена переменных, функций и компонентов соответствуют содержимому;
  • имена коллекций NodeList — существительные во множественном числе;
  • имя функции начинается с глагола и отражает то, что она делает;
  • для именования запрещены: транслит и неуместные сокращения.

Хорошие практики

• [x] Начальное состояние стейт-переменных содержит корректный тип данных.
• [x] Для элементов списка используется уникальный ключ key, а не индекс массива.
• [x] Запросы к API описаны внутри компонента App или в корневых компонентах страниц.
• [x] Для внутренних ссылок в приложении используются компоненты из библиотеки react-router.
• [x] Не происходит утечки памяти при навешивании обработчиков. Все обработчики, добавленные через addEventListener, удаляются при размонтировании компонента.
• Обработка ошибок API:
  • [x] пользователь получает сообщение в случае любой ошибки;
  • [ ] поля формы заблокированы во время отправки запросов и у пользователя нет возможности отправить новый запрос до завершения предыдущего. Комментарий: на время выполнения запроса считается хорошей практикой блокировать поля ввода и кнопку отправки формы, что бы пользователь не мог выполнить новые запросы до завершения предыдущего
• [x] Фиксированные значения (константы) именуются заглавными буквами и вынесены в отдельный конфиг-файл.

Рекомендации

• [x] Сторонние JavaScript-библиотеки не применяются.
• [x] Используются семантически правильные блоки для компонентов. Не используются div или иные лишние HTML-тэги для компонентов, которые состоят из одноуровневых блоков.
• [x] Отсутствует «мусор» в коде:
  • нет беспорядка в коде;
  • нет лишнего кода: переменная объявлена, но не используется или есть какая-то лишняя логика;
  • код форматирован одинаково, соблюдается иерархия отступов.

Количество баллов: 98

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

Несколько советов для дальнейшего развития:

• сверстайте несколько небольших проектов для себя, для закрепления знаний и что бы можно добавить их в портфолио
• еще немного попрактиковаться с React, например изучить redux
• будет большим плюсом при поиске работы, если немного изучите TypeScript т.к. на него переходят многие компании
• ходить на собеседования, опыт прохождения собеседований не менее важен, чем знание теории, и Вы поймете какие знания требуются на рынке и где Вы проседаете
• читайте habr и слушайте подкаксты, они очень хорошо расширяют кругозор, и позволяют узнать, что происходит в отрасли: https://soundcloud.com/everyonecan https://soundcloud.com/podlodka https://soundcloud.com/devschacht https://soundcloud.com/begebot https://soundcloud.com/web-standards https://www.youtube.com/channel/UCZeU17nbVfzczAkJVTay9vw