Diploma (frontend) +JS: fix after 1 review

[MalakhN]

No description provided.

[SergeyK2004]

Резюме:

JavaScript

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

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

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

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

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

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

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

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

==========================================================

Однако, если планируете использовать проект в портфолио, то советую ещё поработать над ним, исправить оставшиеся замечания и ещё раз перепроверить функционал

=================================================================

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

• сверстайте несколько небольших проектов для себя, для закрепления знаний и что бы можно добавить их в портфолио
• еще немного попрактиковаться с 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