Оглавление
Ссылка на макеты:
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://elrouss.github.io/mesto-react/
git clone https://github.com/elrouss/mesto-react.git
- клонировать репозиторий (с использованием HTTPS) на свое устройствоnpm i
- установить зависимостиnpm run start
- запустить приложение в режиме разработчика (в браузере ввести ссылкуhttp://localhost:3000/
, если приложение не открылось там автоматически)
- Портирование HTML-разметки, CSS-стилей, реализация открытия и закрытия 5 модальных окон (EditProfilePopup, EditAvatarPopup, AddPlacePopup, ConfirmCardDeletionPopup, ImagePopup), загрузка данных с сервера
- Написание функционала с передачей данных на сервер (см.: п. 5)
- Удаление карточки в окне подтверждения
Решение: при реализации окна подтверждения удаления карточки сделовало учесть прокидывание _id конкретно открытой карточки, в противном случае либо не работала функция удаления, либо предпринималась попытка удаления всех карточек в галерее (неудачная в связи с контролем сервера). Для этого был создан стейт activeCardId, в который записывается _id открываемой карточки и соответственно используется в функции ее удаления
- Пустые элементы верстки и "дерганье" в процессе отрисовки после получения данных с сервера
Решение: для скрытия страницы до ответа с сервера и вставки их в верстку добавлено окно-заглушка
- Валидация форм и усиленный контроль за типом данных, вводимых пользователем
Решение: для валидации форм написана логика, которая проверяет в компонентах сохраняемые в стейтах данные, вводимые пользователем в инпутах (url, длина слова). Далее в зависимости от установленных правил отдельная функция проверяет, можно ли считать форму валидной или нет, и пробрасывает булево значение через пропс в родительский компонент PopupWithForm. Там в свою очередь стилизуется и блокируется/активируется кнопка того или иного дочернего компонента формы. Кроме того, во избежание передачи url-ов, которые могли бы случайно начинаться с пустого пробела (следовательно, вызывать ошибку при сабмите), и двойных пробелов при отправке данных на сервер методом trim обрезаются лишние пробелы по краям строки, а регулярным выражением убираются все неодинарные пробелы
- Проблема добавления пользователем нескольких однотипных карточек при клике на кнопку сабмита в процесса обмена данными с сервером
Решение: блокировать кнопку
* - жирным курсивом выделен дополнительный функционал, не входящий в обязательный перечень требований для получения зачета по проектной работе
Исправление ошибки при закрытии модального окна с фотографией карточки (реализовано в следующем проекте)Оптимизирование валидации форм под кастомный хук (также реализовано в следующем проекте)- Оптимизация лишних ререндеров
- Оптимизация приложения для людей с ограниченными возможностями (напр., label для инпутов форм)
- Добавление автоматического обновления галереи карточек
- Добавление функции сабмита форм нажатием на клавишу "Enter" (в настоящий момент работает только в случае клика пользоватем по полю формы)