* - проект прошел код-ревью

1. git clone https://github.com/elrouss/react-mesto-auth.git - клонировать репозиторий (с использованием HTTPS) на свое устройство
2. npm i - установить зависимости
3. npm run start - запустить приложение в режиме разработчика (в браузере ввести ссылку http://localhost:3000/react-mesto-auth/sign-in, если приложение не открылось там автоматически)
4. При использовании приложения для входа в личный кабинет пользователю требуется зарегистрироваться (https://elrouss.github.io/react-mesto-auth/sign-up) и пройти авторизацию (https://elrouss.github.io/react-mesto-auth/sign-in). Можно воспользоваться уже зарегистрированным аккаунтом: email - test-acc@test.ru, пароль - test-acc@test.ru
5. При авторизации в локальном хранилище сохраняется токен пользователя, который при закрытии вкладки с приложением и возвращении позволяет оставаться авторизованным на сайте. Он удаляется после нажатия на кнопку выхода из личного кабинета

NB! В связи с особенностями совместимости Github Pages с модулем маршрутизации (React Router DOM) в удаленном репозитории не рекомендуется обновление страниц приложения, имеющих добавочные эндпоинты к корневой ссылке /react-mesto-auth

NB!! На данном этапе не настроена отрисовка ошибок при попытке регистрации пользователя с ранее зарегистрированным электронным адресом, неправильном вводе электронного адреса и/или пароля и т.п. Эти ошибки можно проверить самостоятельно в консоли разработчика во вкладке «Network» (ответ с сервера будет выделен красным цветом)

1. Вынос общих компонентов для нескольких страниц и перерисовка элементов

Решение: выделено 2 компонента - Header и WelcomeWindowWithForm. В первом из них для перерисовки элемента (ссылки на страницу авторизации/регистрации, кнопки выхода из личного кабинета, гамбургер-меню) написаны функции, которые отслеживают endpoint открытого у пользователя url, а также разрешение экрана. Второй компонент сделан по типу PopupWithForm, в который в свою очередь вставляются Register и Login

1. Проблема отрисовки стартового окна с формой авторизации на несколько миллисекунд при обновлении страницы в личном кабинете

Решение: в компоненте App создан стейт-заглушка, ставящийся на этапе загрузки приложения, когда происходит проверка наличия токена и переадресация пользователю по нужному роуту

1. Переписать код валидации форм под кастомный хук

Решение: в старом проекте в компонентах 3 модальных окон (EditAvatarPopup, EditProfilePopup, AddPlacePopup) была реализована собственноручно написанная валидация, которая получилась несколько громоздкой. С появлением 2 новых компонентов (Register и Login) составлен хук, примененный ко всем названным компонентам, который в итоге сделал код более читаемым, сократил его в 1,5 раза и сделал функцию валидации универсальной. Кроме того, в верстке и стилях переписан код отрисовки ошибок валидации (ранее - применялось абсолютное позиционирование, что некорректно отображало ошибки на мобильных разрешениях (с попаданием в фокус инпутов) и требовало высчитывание точек местоположения (top, left) для промежуточных разрешений

1. В прошлой версии проекта при закрытии модального окна с фотографией карточки резко исчезал снимок и появлялся undefined

Решение: открытие и закрытие модального окна происходило только при наличии данных в передаваемом объекте (стейт selectedCard), появлявшихся и исчезавших во время клика по изображению карточки. Соответственно, закрытие окна начиналось только при очистке данных в объекте карточки (Object.keys(card).length !== 0, отсюда - undefined). В качестве решения этой проблемы был введен новый стейт isImagePopupOpened с булевым значением, который меняется при клике на карточку, что приводит к открытию и закрытию модального окна (объект карточки продолжает храниться в стейте selectedCard). Для очистки данных в модальном окне при закрытии во избежание "моргания" изображения при открытии модального окна другой карточки добавлен хук useEffect с методом setTimeout, который возвращает стейт selectedCard в исходное состояние сразу же после завершения анимации плавного закрытия модального окна

Адаптивный интерфейс (в т. ч. новых компонентов и элементов)

Регистрация и авторизация пользователей

Редактирование данных пользователя

Обновление аватара

Добавление новой карточки

Добавление и снятие лайка (включая счетчик лайков)

Удаление карточки с модальным окном подтверждения действия

Модальное окно успешной/неудачной регистрации на сайте

Модальное окно с увеличенной фотографией карточки

Открытие и закрытие модальных окон (по кнопке, оверлею и клавише "Escape")

Спиннеры загрузки

Валидация форм

Окно предварительной загрузки страницы

Страница 404 (не будет видна на Github Pages)

• Оптимизация лишних ререндеров
• Вывод в модальном окне после неудачной попытки регистрации/авторизации текста ошибок ("Пользователь с таким электронным адресом уже зарегистрирован", "Неправильный электронный адрес/пароль" и проч.)
• Исправление зависания анимации при открытии/закрытии бургерного меню на iPhone
• Оптимизация приложения для людей с ограниченными возможностями (напр., label для инпутов форм)
• Добавление автоматического обновления галереи карточек
• Добавление функции сабмита форм нажатием на клавишу "Enter" (в настоящий момент работает только в случае клика пользоватем по полю формы)