Оглавление
Ссылка на макеты:
https://www.figma.com/file/2cn9N9jSkmxD84oJik7xL7/JavaScript.-Sprint-4?node-id=0%3A1
https://www.figma.com/file/bjyvbKKJN2naO0ucURl2Z0/JavaScript.-Sprint-5?node-id=0%3A1
https://www.figma.com/file/kRVLKwYG3d1HGLvh7JFWRT/JavaScript.-Sprint-6?node-id=0%3A1
https://www.figma.com/file/PSdQFRHoxXJFs2FH8IXViF/JavaScript-9-sprint?node-id=0%3A1
https://www.figma.com/file/5H3gsn5lIGPwzBPby9jAOo/Sprint-14-RU?node-id=0%3A1
Ссылка на проект: https://elrouss.github.io/react-mesto-auth/
* - проект прошел код-ревью
3. Установка и запуск приложения в локальном репозитории, эксплуатация (пп. 4-5 актуальны также при работе на Github Pages)
git clone https://github.com/elrouss/react-mesto-auth.git
- клонировать репозиторий (с использованием HTTPS) на свое устройствоnpm i
- установить зависимостиnpm run start
- запустить приложение в режиме разработчика (в браузере ввести ссылкуhttp://localhost:3000/react-mesto-auth/sign-in
, если приложение не открылось там автоматически)- При использовании приложения для входа в личный кабинет пользователю требуется зарегистрироваться (
https://elrouss.github.io/react-mesto-auth/sign-up
) и пройти авторизацию (https://elrouss.github.io/react-mesto-auth/sign-in
). Можно воспользоваться уже зарегистрированным аккаунтом: email -[email protected]
, пароль -[email protected]
- При авторизации в локальном хранилище сохраняется токен пользователя, который при закрытии вкладки с приложением и возвращении позволяет оставаться авторизованным на сайте. Он удаляется после нажатия на кнопку выхода из личного кабинета
NB! В связи с особенностями совместимости Github Pages с модулем маршрутизации (React Router DOM) в удаленном репозитории не рекомендуется обновление страниц приложения, имеющих добавочные эндпоинты к корневой ссылке /react-mesto-auth
NB!! На данном этапе не настроена отрисовка ошибок при попытке регистрации пользователя с ранее зарегистрированным электронным адресом, неправильном вводе электронного адреса и/или пароля и т.п. Эти ошибки можно проверить самостоятельно в консоли разработчика во вкладке «Network» (ответ с сервера будет выделен красным цветом)
Работа выполнена в 1 этап:Верстка дополнительных компонентов (стартовых окон с формами регистрации и авторизации пользователей) и элементов (гамбургер-меню, кнопка выхода из личного кабинета), написание функционала
- Вынос общих компонентов для нескольких страниц и перерисовка элементов
Решение: выделено 2 компонента - Header и WelcomeWindowWithForm. В первом из них для перерисовки элемента (ссылки на страницу авторизации/регистрации, кнопки выхода из личного кабинета, гамбургер-меню) написаны функции, которые отслеживают endpoint открытого у пользователя url, а также разрешение экрана. Второй компонент сделан по типу PopupWithForm, в который в свою очередь вставляются Register и Login
- Проблема отрисовки стартового окна с формой авторизации на несколько миллисекунд при обновлении страницы в личном кабинете
Решение: в компоненте App создан стейт-заглушка, ставящийся на этапе загрузки приложения, когда происходит проверка наличия токена и переадресация пользователю по нужному роуту
- Переписать код валидации форм под кастомный хук
Решение: в старом проекте в компонентах 3 модальных окон (EditAvatarPopup, EditProfilePopup, AddPlacePopup) была реализована собственноручно написанная валидация, которая получилась несколько громоздкой. С появлением 2 новых компонентов (Register и Login) составлен хук, примененный ко всем названным компонентам, который в итоге сделал код более читаемым, сократил его в 1,5 раза и сделал функцию валидации универсальной. Кроме того, в верстке и стилях переписан код отрисовки ошибок валидации (ранее - применялось абсолютное позиционирование, что некорректно отображало ошибки на мобильных разрешениях (с попаданием в фокус инпутов) и требовало высчитывание точек местоположения (top, left) для промежуточных разрешений
- В прошлой версии проекта при закрытии модального окна с фотографией карточки резко исчезал снимок и появлялся undefined
Решение: открытие и закрытие модального окна происходило только при наличии данных в передаваемом объекте (стейт selectedCard), появлявшихся и исчезавших во время клика по изображению карточки. Соответственно, закрытие окна начиналось только при очистке данных в объекте карточки (Object.keys(card).length !== 0, отсюда - undefined). В качестве решения этой проблемы был введен новый стейт isImagePopupOpened с булевым значением, который меняется при клике на карточку, что приводит к открытию и закрытию модального окна (объект карточки продолжает храниться в стейте selectedCard). Для очистки данных в модальном окне при закрытии во избежание "моргания" изображения при открытии модального окна другой карточки добавлен хук useEffect с методом setTimeout, который возвращает стейт selectedCard в исходное состояние сразу же после завершения анимации плавного закрытия модального окна
Страница 404 (не будет видна на Github Pages)
![](https://user-images.githubusercontent.com/108838349/215304244-bd854ae2-0066-416d-a516-3b29f4028363.gif)
* - жирным курсивом выделен дополнительный функционал, не входящий в обязательный перечень требований для получения зачета по проектной работе
- Оптимизация лишних ререндеров
- Вывод в модальном окне после неудачной попытки регистрации/авторизации текста ошибок ("Пользователь с таким электронным адресом уже зарегистрирован", "Неправильный электронный адрес/пароль" и проч.)
- Исправление зависания анимации при открытии/закрытии бургерного меню на iPhone
- Оптимизация приложения для людей с ограниченными возможностями (напр., label для инпутов форм)
- Добавление автоматического обновления галереи карточек
- Добавление функции сабмита форм нажатием на клавишу "Enter" (в настоящий момент работает только в случае клика пользоватем по полю формы)