Резюме:

JavaScript

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

[ ] Функциональность проекта из брифа реализована полностью:
- Общее
- Все ссылки и кнопки в проекте работают.
- Правильно работают оба состояния шапки: если пользователь не залогинился, в шапке должны быть кнопки «Войти» и «Регистрация», если пользователь залогинился, кнопки исчезают — и появляются кнопки «Фильмы», «Сохранённые фильмы» и «Аккаунт», в том числе и на главной странице.
- При поиске текст запроса, найденные фильмы и состояние переключателя короткометражек сохраняются в хранилище. Если пользователь повторно переходит на страницу фильмов, то при монтировании компонента данные достаются из локального хранилища. Страница отображается в соответствии с загруженными из хранилища данными.
- Все формы валидируются и на стороне клиента. Пользователь не может отправить запрос с невалидными данными. Комментарий: не корректно работает валидация формы поиска, по заданию "После сабмита формы поиска производится валидация. Если в поле не введён текст, выводится ошибка «Нужно ввести ключевое слово»." https://skr.sh/sMchmHES0Ta Вместо этого включена браузерная валидация. В вашем проекте браузерной валидации не должно быть. Все ошибки должны обрабатываться и показываться только средствами приложения
- Страницы «Регистрация» и «Авторизация»:
- На странице «Регистрация» клик по кнопке «Зарегистрироваться» отправляет запрос на роут /signup, если данные введены корректно. Если запрос прошёл успешно, то автоматически производится вход и редирект на страницу /movies.
- На странице «Авторизация» клик по кнопке «Войти» отправляет запрос на роут /signin, если данные введены корректно. Если запрос прошёл успешно, происходит редирект на страницу /movies.
- Все формы валидируются и на стороне клиента. Комментарий: https://skr.sh/sMcr4hQ6i3L Форма пользователя валидируется не полностью. Валидация должна быть аналогична валидации на сервере. Сейчас приложение пропускает адрес электронной почты без указания домена первого уровня, а сервер нет.
- Страница редактирование профиля:
- На странице редактирования профиля клик по кнопке «Сохранить» отправляет запрос на роут /users/me, если данные введены корректно. Комментарий: При сохранении пользователя необходимо остаться на странице Аккаунт. Сейчас происходит редирект на Фильмы.
- Пользователю отображается уведомление об успешном запросе к серверу при сохранении профиля. Комментарий: При сохранении профиля пользователь должен увидеть сообщение об успешном сохранении, вид сообщения может быть любым на ваш выбор
- Если на странице редактирования профиля введённая информация соответствует текущим данным пользователя, кнопка «Сохранить» заблокирована и нельзя отправить запрос сохранения.
  Комментарий: При редактировании пользователь может ввести текущие данные профиля и сохранить их, а нужно сделать так, чтобы можно было отправить запрос на сохранение, только если данные изменены по сравнению с текущими данными пользователя, которые должны содержаться в текущий момент в контексте. При совпадении данных кнопка сохранения должна быть деактивирована, т.е. отличаться визуально и не иметь эффекта наведения
- Поиск фильмов:
- Прелоадер крутится во время выполнения запроса фильмов.
- Работа с фильтром настроена:
  - Поиск фильмов регистронезависимый.
  - Если запрос выполняется впервые, то работа с фильтром происходит после получения данных.
  - Если карточки уже были отображены на странице в блоке результатов, клик по чекбоксу «Короткометражки» приводит к повторной фильтрации результата.
- После успешного сабмита формы поиска появляется блок с результатами.
- Если ничего не найдено, выводится надпись «Ничего не найдено». Комментарий: https://skr.sh/sMca5xLFGzq Надпись "Ничего не найдено" присутствует на странице фильмов сразу же при входе, когда пользователь ещё ничего не искал, а не только когда ничего не найдено.
- На странице всех фильмов в блоке результата отображается такое же количество карточек, как в макете. Нажатие на кнопку «Ещё» отображает следующий ряд с тем же числом карточек. При отображении всех карточек кнопка «Ещё» скрывается.
- Карточки:
- Карточка состоит из изображения, названия фильма и его длительности. Длительность фильма рассчитывается корректно и соответствует формату в макете. Клик по карточке ведёт на трейлер фильма.
- Кнопка лайка имеет правильное состояние, в зависимости от того, добавлен ли фильм в сохранённые или нет.
- При клике на иконку «Лайк» в блоке карточки выполняется запрос к /movies нашего API для установки или снятия лайка, в зависимости от текущего состояния.
- На странице «Сохранённые фильмы»:
- Отображается форма поиска. Она позволяет искать фильмы по уже полученным данным о сохранённых фильмах.
- Блок карточки содержит кнопку удаления, а не лайка.
- При нажатии на кнопку удаления выполняется запрос на удаление фильма. После успешного запроса карточка удаляется со страницы.
[x] Отсутствуют серьёзные баги, которые возникают при работе с сервисом, например:
- Удалённые или добавленные карточки фильмов появляются только после перезагрузки страницы.
- Если осталось отобразить меньше карточек фильмов, чем в полном ряду, то нажатие кнопки «Ещё» вызывает появление ошибок в консоли.
- При удалении сохранённых карточек на соответствующей странице «Сохранённые фильмы» их по-прежнему можно найти через поиск. Поиск начинает корректно работать только после перезагрузки страницы.
- Другие баги, которые возникают при работе с сервисом и требуют перезагрузки страницы или «ломают» пользовательский опыт.
Регистрация и авторизация:
- [x] Роуты /saved-movies, /movies, /profile защищёны HOC-компонентом ProtectedRoute. Роуты / , /signin, /signup не являются защищёнными.
- [x] При попытке перейти на любой защищённый роут происходит редирект на / .
- [ ] Если пользователь был авторизован и закрыл вкладку, он может вернуться сразу на любую страницу приложения по URL-адресу, кроме страниц авторизации и регистрации. Комментарий: авторизированный пользователь может попасть на /signin, /signup Комментарий: При попытке авторизованного пользователя войти на любую страницу по её URL-адресу в адресной строке, происходит вход пользователя на главную страницу, а не на эти страницы, хотя редирект на /movies или главную страницу должен быть только при попытке авторизованного пользователя выйти на страницы авторизации и регистрации.
- [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. Можно лучше: Будет гораздо лучше, если вы не будете прописывать функционал обработки результатов запросов в самом модуле Api. Т.е. более корректно разделять модуль для запросов и обработку результатов. очень важно понять принципы SOLID. Можно загуглить. Это очень хороший и полезный навык на будущее.
- [x] Первый обработчик then возвращает res.json. res проверяется на корректность.
- [ ] Цепочка обработки промисов завершается блоком catch. Комментарий: блоков catch не должно быть в самих запросах, следует их расположить только в конце цепочки
- [ ] Не выполняются лишние запросы к бэкенду, например: запрос всех фильмов с сервиса beatfilm-movies производится только при первом поиске, все сохранённые фильмы не запрашиваются с сервера при каждом лайке или дизлайке, данные пользователя запрашиваются один раз при запуске приложения. Комментарий: при каждом поиске фильмов данные запрашиваются с сервера, не нужно повторно делать запрос, нужно использовать данные предыдущего т.к. данные сервер возвращает те же самые - по заданию "При запросе к серверу за фильмами на странице «Фильмы» вы получаете сразу все данные и сохраняете их."
[x] Именование:
- имена переменных, функций и параметров написаны в camelCase,
- имена переменных — существительные,
- имена переменных, функций и компонентов соответствуют содержимому,
- имена коллекций NodeList — существительные во множественном числе,
- имя функции начинается с глагола и отражает то, что она делает,
- для именования запрещены: транслит и неуместные сокращения.

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

[x] Начальное состояние стейт-переменных содержит корректный тип данных.
[x] Для элементов списка используется уникальный ключ key, а не индекс массива.
[x] Запросы к API описаны внутри компонента App или в корневых компонентах страниц.
[x] Для внутренних ссылок в приложении используются компоненты из библиотеки react-router.
[x] Не происходит утечки памяти при навешивании обработчиков. Все обработчики, добавленные через addEventListener, удаляются при размонтировании компонента.
Обработка ошибок API:
- [ ] пользователь получает сообщение в случае любой ошибки, Комментарий: https://skr.sh/sMcAJRvFIxm Если была ошибка на странице Авторизации, то при переходе на страницу Регистрации пользователь видит ошибку, хотя форма еще даже не заполнялась.
- [ ] поля формы заблокированы во время отправки запросов и у пользователя нет возможности отправить новый запрос до завершения предыдущего. Комментарий: на время выполнения запроса считается хорошей практикой блокировать поля ввода и кнопку отправки формы, что бы пользователь не мог выполнить новые запросы до завершения предыдущего
[x] Фиксированные значения (константы) именуются заглавными буквами и вынесены в отдельный конфиг-файл.
Рекомендации
[x] Сторонние JavaScript-библиотеки не применяются.
[x] Используются семантически правильные блоки для компонентов. Не используются div или иные лишние HTML-тэги для компонентов, которые состоят из одноуровневых блоков.
[x] Отсутствует «мусор» в коде:
- нет беспорядка в коде,
- нет лишнего кода: переменная объявлена, но не используется или есть какая-то лишняя логика,
- код форматирован одинаково, соблюдается иерархия отступов.

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

JavaScript

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

[x] Функциональность проекта из брифа реализована полностью:

Общее
Все ссылки и кнопки в проекте работают.
Правильно работают оба состояния шапки: если пользователь не залогинился, в шапке должны быть кнопки «Войти» и «Регистрация», если пользователь залогинился, кнопки исчезают — и появляются кнопки «Фильмы», «Сохранённые фильмы» и «Аккаунт», в том числе и на главной странице.
При поиске текст запроса, найденные фильмы и состояние переключателя короткометражек сохраняются в хранилище. Если пользователь повторно переходит на страницу фильмов, то при монтировании компонента данные достаются из локального хранилища. Страница отображается в соответствии с загруженными из хранилища данными.
Все формы валидируются и на стороне клиента. Пользователь не может отправить запрос с невалидными данными.
Страницы «Регистрация» и «Авторизация»:
На странице «Регистрация» клик по кнопке «Зарегистрироваться» отправляет запрос на роут /signup, если данные введены корректно. Если запрос прошёл успешно, то автоматически производится вход и редирект на страницу /movies.
На странице «Авторизация» клик по кнопке «Войти» отправляет запрос на роут /signin, если данные введены корректно. Если запрос прошёл успешно, происходит редирект на страницу /movies.
Все формы валидируются и на стороне клиента.
Страница редактирование профиля:
На странице редактирования профиля клик по кнопке «Сохранить» отправляет запрос на роут /users/me, если данные введены корректно.
Пользователю отображается уведомление об успешном запросе к серверу при сохранении профиля.
Если на странице редактирования профиля введённая информация соответствует текущим данным пользователя, кнопка «Сохранить» заблокирована и нельзя отправить запрос сохранения.
Поиск фильмов:
Прелоадер крутится во время выполнения запроса фильмов.
Работа с фильтром настроена:
- Поиск фильмов регистронезависимый.
- Если запрос выполняется впервые, то работа с фильтром происходит после получения данных.
- Если карточки уже были отображены на странице в блоке результатов, клик по чекбоксу «Короткометражки» приводит к повторной фильтрации результата.
После успешного сабмита формы поиска появляется блок с результатами.
Если ничего не найдено, выводится надпись «Ничего не найдено».
На странице всех фильмов в блоке результата отображается такое же количество карточек, как в макете. Нажатие на кнопку «Ещё» отображает следующий ряд с тем же числом карточек. При отображении всех карточек кнопка «Ещё» скрывается.
Карточки:
Карточка состоит из изображения, названия фильма и его длительности. Длительность фильма рассчитывается корректно и соответствует формату в макете. Клик по карточке ведёт на трейлер фильма.
Кнопка лайка имеет правильное состояние, в зависимости от того, добавлен ли фильм в сохранённые или нет.
При клике на иконку «Лайк» в блоке карточки выполняется запрос к /movies нашего API для установки или снятия лайка, в зависимости от текущего состояния.
На странице «Сохранённые фильмы»:
Отображается форма поиска. Она позволяет искать фильмы по уже полученным данным о сохранённых фильмах.
Блок карточки содержит кнопку удаления, а не лайка.
При нажатии на кнопку удаления выполняется запрос на удаление фильма. После успешного запроса карточка удаляется со страницы.

[x] Отсутствуют серьёзные баги, которые возникают при работе с сервисом, например:

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

Регистрация и авторизация:

[x] Роуты /saved-movies, /movies, /profile защищёны HOC-компонентом ProtectedRoute. Роуты / , /signin, /signup не являются защищёнными.
[x] При попытке перейти на любой защищённый роут происходит редирект на / .
[ ] Если пользователь был авторизован и закрыл вкладку, он может вернуться сразу на любую страницу приложения по URL-адресу, кроме страниц авторизации и регистрации. Комментарий: авторизированный пользователь может попасть на /signin, /signup Комментарий: При попытке авторизованного пользователя войти на любую страницу по её URL-адресу в адресной строке, происходит вход пользователя на главную страницу, а не на эти страницы, хотя редирект на /movies или главную страницу должен быть только при попытке авторизованного пользователя выйти на страницы авторизации и регистрации.
[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 проверяется на корректность.
[ ] Цепочка обработки промисов завершается блоком catch. Комментарий: блоков catch не должно быть в самих запросах, следует их расположить только в конце цепочки
[ ] Не выполняются лишние запросы к бэкенду, например: запрос всех фильмов с сервиса beatfilm-movies производится только при первом поиске, все сохранённые фильмы не запрашиваются с сервера при каждом лайке или дизлайке, данные пользователя запрашиваются один раз при запуске приложения. Комментарий: при каждом поиске фильмов данные запрашиваются с сервера, не нужно повторно делать запрос, нужно использовать данные предыдущего т.к. данные сервер возвращает те же самые - по заданию "При запросе к серверу за фильмами на странице «Фильмы» вы получаете сразу все данные и сохраняете их."

[x] Именование:

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

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

[x] Начальное состояние стейт-переменных содержит корректный тип данных.

[x] Для элементов списка используется уникальный ключ key, а не индекс массива.

[x] Запросы к API описаны внутри компонента App или в корневых компонентах страниц.

[x] Для внутренних ссылок в приложении используются компоненты из библиотеки react-router.

[x] Не происходит утечки памяти при навешивании обработчиков. Все обработчики, добавленные через addEventListener, удаляются при размонтировании компонента.

Обработка ошибок API:

[ ] пользователь получает сообщение в случае любой ошибки, Комментарий: https://skr.sh/sMcAJRvFIxm Если была ошибка на странице Авторизации, то при переходе на страницу Регистрации пользователь видит ошибку, хотя форма еще даже не заполнялась.
[x] поля формы заблокированы во время отправки запросов и у пользователя нет возможности отправить новый запрос до завершения предыдущего.

[x] Фиксированные значения (константы) именуются заглавными буквами и вынесены в отдельный конфиг-файл.

IlushinGL / movies-explorer-frontend

Level 3 #2

Резюме:

JavaScript

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

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

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

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

Резюме:

JavaScript

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

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

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

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

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

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