Level 3

[SergeyK2004]

Резюме:

JavaScript

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

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

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

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

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

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

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

[SergeyK2004]

Резюме:

JavaScript

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

• [ ] Функциональность проекта из брифа реализована полностью:
  • Общее
  • Все ссылки и кнопки в проекте работают.
  • Правильно работают оба состояния шапки: если пользователь не залогинился, в шапке должны быть кнопки «Войти» и «Регистрация», если пользователь залогинился, кнопки исчезают — и появляются кнопки «Фильмы», «Сохранённые фильмы» и «Аккаунт», в том числе и на главной странице.
  • При поиске текст запроса, найденные фильмы и состояние переключателя короткометражек сохраняются в хранилище. Если пользователь повторно переходит на страницу фильмов, то при монтировании компонента данные достаются из локального хранилища. Страница отображается в соответствии с загруженными из хранилища данными. Комментарий: В вашем задании указано: при каждом поиске на странице фильмов результаты поиска фильмов нужно сохранять в localstorage. В сохраняемые данные должны входить и строка поиска и статус чекбокса «Короткометражки», чтобы пользователю при повторном переходе на страницу фильмов, можно было вывести на экран информацию, полностью совпадающую с его последним поиском (с расстановкой актуального состояния лайков) перед уходом на другую страницу или перезагрузкой страницы. Эту информацию можно будет доставать из хранилища при монтировании и перерисовке компоненты фильмов. При логауте пользователя нужно эту информацию в хранилище и стейте (useState, если она там есть) уничтожать. Комментарий: Сейчас пользователь не видит точного результата своего последнего поиска на странице фильмов при повторном переходе на эту страницу с другой страницы, если при поиске был использован чекбокс Короткометражка. Положение чекбокса так-же не восстанавливается. Комментарий: Сохранять данные последнего поиска на странице «Сохранённые фильмы» для их показа при повторном входе на эту страницу не нужно. https://skr.sh/sL71AR8mTAd Нужно, чтобы при входе на страницу «Сохранённые фильмы» пользователь видел все свои сохранённые карточки без задания параметров поиска.
  • Все формы валидируются и на стороне клиента. Пользователь не может отправить запрос с невалидными данными.
  • Страницы «Регистрация» и «Авторизация»:
  • На странице «Регистрация» клик по кнопке «Зарегистрироваться» отправляет запрос на роут /signup, если данные введены корректно. Если запрос прошёл успешно, то автоматически производится вход и редирект на страницу /movies.
  • На странице «Авторизация» клик по кнопке «Войти» отправляет запрос на роут /signin, если данные введены корректно. Если запрос прошёл успешно, происходит редирект на страницу /movies.
  • Все формы валидируются и на стороне клиента.
  • Страница редактирование профиля:
  • На странице редактирования профиля клик по кнопке «Сохранить» отправляет запрос на роут /users/me, если данные введены корректно. Комментарий: https://skr.sh/sNfuFdz0o2Y При попытке сохранить изменения, пользователь получает сообщение об ошибке. Профиль не сохраняется. Запрос на сервер при этом проходит успешно.
  • Пользователю отображается уведомление об успешном запросе к серверу при сохранении профиля. Комментарий: Невозможно проверить, пользователь не сохраняется корректно
  • Если на странице редактирования профиля введённая информация соответствует текущим данным пользователя, кнопка «Сохранить» заблокирована и нельзя отправить запрос сохранения.
  • Поиск фильмов:
  • Прелоадер крутится во время выполнения запроса фильмов.
  • Работа с фильтром настроена:
    • Поиск фильмов регистронезависимый.
    • Если запрос выполняется впервые, то работа с фильтром происходит после получения данных. Комментарий: https://skr.sh/sLMhf6ocdq5 По условию задания запрос к базе с фильмами должен производиться при первом поиске, а не при монтировании компонента или загрузке страницы
    • Если карточки уже были отображены на странице в блоке результатов, клик по чекбоксу «Короткометражки» приводит к повторной фильтрации результата. Комментарий: https://skr.sh/sNazwteLo9O Если поиск произвести с включенным чекбоксом, то в результате показаны все фильмы, без учета их длительности
  • После успешного сабмита формы поиска появляется блок с результатами.
  • Если ничего не найдено, выводится надпись «Ничего не найдено».
  • На странице всех фильмов в блоке результата отображается такое же количество карточек, как в макете. Нажатие на кнопку «Ещё» отображает следующий ряд с тем же числом карточек. При отображении всех карточек кнопка «Ещё» скрывается. Комментарий: https://skr.sh/sL7G8F0GCav по заданию количество карточек должно зависеть от размера экрана и вашего макета. Сейчас условие по выдаче начального количества карточек при поиске и добавляемое количество карточек при нажатии "Еще" не соответствует требованию задания. Комментарий: На странице "Сохраненные фильмы" не предусмотрена кнопка "Еще", необходимо всегда выводить все фильмы пользователя по условию, без ограничения количества. Все условия по количеству фильмов относятся только к странице "Фильмы".
  • Карточки:
  • Карточка состоит из изображения, названия фильма и его длительности. Длительность фильма рассчитывается корректно и соответствует формату в макете. Клик по карточке ведёт на трейлер фильма. Комментарий: Изображение в карточке не является ссылкой на трейлер
  • Кнопка лайка имеет правильное состояние, в зависимости от того, добавлен ли фильм в сохранённые или нет. Комментарий: https://skr.sh/vNf9bEe3yoK После поиска лайки на фильмах отображаются некорректно
  • При клике на иконку «Лайк» в блоке карточки выполняется запрос к /movies нашего API для установки или снятия лайка, в зависимости от текущего состояния.
  • На странице «Сохранённые фильмы»:
  • Отображается форма поиска. Она позволяет искать фильмы по уже полученным данным о сохранённых фильмах. Комментарий: Если выполнить поиск фильмов и затем в блоке результата удалить один фильм, то несмотря на наличие поискового запроса в строке поиска, в блоке результата будут отражены все сохраненные фильмы.
  • Блок карточки содержит кнопку удаления, а не лайка.
  • При нажатии на кнопку удаления выполняется запрос на удаление фильма. После успешного запроса карточка удаляется со страницы.
• [ ] Отсутствуют серьёзные баги, которые возникают при работе с сервисом, например:
  • Удалённые или добавленные карточки фильмов появляются только после перезагрузки страницы. Комментарий: если фильм был ранее сохранен, то иконка лайка должна остаться активной, если этот фильм появился в поиске
  • Если осталось отобразить меньше карточек фильмов, чем в полном ряду, то нажатие кнопки «Ещё» вызывает появление ошибок в консоли.
  • При удалении сохранённых карточек на соответствующей странице «Сохранённые фильмы» их по-прежнему можно найти через поиск. Поиск начинает корректно работать только после перезагрузки страницы.
  • Другие баги, которые возникают при работе с сервисом и требуют перезагрузки страницы или «ломают» пользовательский опыт.
• Регистрация и авторизация:
  • [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.
  • [ ] Не выполняются лишние запросы к бэкенду, например: запрос всех фильмов с сервиса beatfilm-movies производится только при первом поиске, все сохранённые фильмы не запрашиваются с сервера при каждом лайке или дизлайке, данные пользователя запрашиваются один раз при запуске приложения. Комментарий: При каждом лайке происходит дополнительное обращение за получением данных с movies
• [x] Именование:
  • имена переменных, функций и параметров написаны в camelCase,
  • имена переменных — существительные,
  • имена переменных, функций и компонентов соответствуют содержимому,
  • имена коллекций NodeList — существительные во множественном числе,
  • имя функции начинается с глагола и отражает то, что она делает,
  • для именования запрещены: транслит и неуместные сокращения.

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

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

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

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

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

[SergeyK2004]

Резюме:

JavaScript

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

• [ ] Функциональность проекта из брифа реализована полностью:
  • Общее
  • Все ссылки и кнопки в проекте работают.
  • Правильно работают оба состояния шапки: если пользователь не залогинился, в шапке должны быть кнопки «Войти» и «Регистрация», если пользователь залогинился, кнопки исчезают — и появляются кнопки «Фильмы», «Сохранённые фильмы» и «Аккаунт», в том числе и на главной странице.
  • При поиске текст запроса, найденные фильмы и состояние переключателя короткометражек сохраняются в хранилище. Если пользователь повторно переходит на страницу фильмов, то при монтировании компонента данные достаются из локального хранилища. Страница отображается в соответствии с загруженными из хранилища данными.
  • Все формы валидируются и на стороне клиента. Пользователь не может отправить запрос с невалидными данными.
  • Страницы «Регистрация» и «Авторизация»:
  • На странице «Регистрация» клик по кнопке «Зарегистрироваться» отправляет запрос на роут /signup, если данные введены корректно. Если запрос прошёл успешно, то автоматически производится вход и редирект на страницу /movies.
  • На странице «Авторизация» клик по кнопке «Войти» отправляет запрос на роут /signin, если данные введены корректно. Если запрос прошёл успешно, происходит редирект на страницу /movies.
  • Все формы валидируются и на стороне клиента.
  • Страница редактирование профиля:
  • На странице редактирования профиля клик по кнопке «Сохранить» отправляет запрос на роут /users/me, если данные введены корректно.
  • Пользователю отображается уведомление об успешном запросе к серверу при сохранении профиля.
  • Если на странице редактирования профиля введённая информация соответствует текущим данным пользователя, кнопка «Сохранить» заблокирована и нельзя отправить запрос сохранения.
  • Поиск фильмов:
  • Прелоадер крутится во время выполнения запроса фильмов.
  • Работа с фильтром настроена:
    • Поиск фильмов регистронезависимый.
    • Если запрос выполняется впервые, то работа с фильтром происходит после получения данных.
    • Если карточки уже были отображены на странице в блоке результатов, клик по чекбоксу «Короткометражки» приводит к повторной фильтрации результата.
  • После успешного сабмита формы поиска появляется блок с результатами.
  • Если ничего не найдено, выводится надпись «Ничего не найдено».
  • На странице всех фильмов в блоке результата отображается такое же количество карточек, как в макете. Нажатие на кнопку «Ещё» отображает следующий ряд с тем же числом карточек. При отображении всех карточек кнопка «Ещё» скрывается. Комментарий: https://skr.sh/sL7G8F0GCav по заданию количество карточек должно зависеть от размера экрана и вашего макета. Сейчас условие по выдаче начального количества карточек при поиске и добавляемое количество карточек при нажатии "Еще" не соответствует требованию задания. Например здесь https://skr.sh/vNhM4tee06c
  • Карточки:
  • Карточка состоит из изображения, названия фильма и его длительности. Длительность фильма рассчитывается корректно и соответствует формату в макете. Клик по карточке ведёт на трейлер фильма.
  • Кнопка лайка имеет правильное состояние, в зависимости от того, добавлен ли фильм в сохранённые или нет.
  • При клике на иконку «Лайк» в блоке карточки выполняется запрос к /movies нашего API для установки или снятия лайка, в зависимости от текущего состояния.
  • На странице «Сохранённые фильмы»:
  • Отображается форма поиска. Она позволяет искать фильмы по уже полученным данным о сохранённых фильмах. Комментарий: https://skr.sh/vNhJ83BggKG После использования поиска и перехода между страницами, Сохраненные фильмы открываются с ошибкой поиска
  • Блок карточки содержит кнопку удаления, а не лайка.
  • При нажатии на кнопку удаления выполняется запрос на удаление фильма. После успешного запроса карточка удаляется со страницы. Комментарий: Если выполнен поиск на странице Сохраненных фильмов, то удаление карточки не приводит к ее удалению из блока результата.
• [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] Отсутствует «мусор» в коде:
  • нет беспорядка в коде,
  • нет лишнего кода: переменная объявлена, но не используется или есть какая-то лишняя логика,
  • код форматирован одинаково, соблюдается иерархия отступов.

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

[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] Фиксированные значения (константы) именуются заглавными буквами и вынесены в отдельный конфиг-файл.

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

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

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

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

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

• сверстайте несколько небольших проектов для себя, для закрепления знаний и что бы можно добавить их в портфолио
• еще немного попрактиковаться с React, например изучить redux
• будет большим плюсом при поиске работы, если немного изучите TypeScript т.к. на него переходят многие компании
• ходить на собеседования, опыт прохождения собеседований не менее важен, чем знание теории, и Вы поймете какие знания требуются на рынке и где Вы проседаете
• читайте habr и слушайте подкаксты, они очень хорошо расширяют кругозор, и позволяют узнать, что происходит в отрасли: https://podlodka.io/ https://vk.com/everyonecanyp https://music.yandex.ru/album/6880234?dir=desc&activeTab=about https://soundcloud.com/begebot https://web-standards.ru/podcast/ https://www.youtube.com/channel/UCZeU17nbVfzczAkJVTay9vw

[mormolad]

done