Финальная работа по курсу React.js в WebHeroSchool
Демонстрация проекта (ссылка)
- Написание сложной логики приложения
- Опыт разработки на React.js в связке с Redux
- Работа с CSS-modules
- Работа с React router DOM
- Адаптирование приложения под разные устройства
- Деплой приложения на Github pages
Самописный механизм, работает с указателем мыши и сенсорными экранами.
Не просто меняет местами два элемента, а визуально сдвигает список и сохраняет его новое состояние.
В списке задач есть сортировка по алфавиту, по дате создания записи и переворот списка задач.
Переворот списка работает как сас по себе, переворачивая выведеную на экран информация, так и поверх алфавитной и временной сортировки.
Сортировки работают с таким же функционалом и внутри фильтров по выполненным задачам.
У приложения есть три раздела:
- Обо мне
- Репозитории
- Дела
Здесь отображена информация с контактами и репозиториями полученная запросом с Github'а, по нику пользователя. Во время запроса отображается прелоудер.
Здесь находится todo-приложение.
Функционал приложения:
- Добавить дело
- Обязательная валидация поля
- Нельзя добавлять пустое дело
- Нельзя добавлять дело, которое уже есть
- Выводить сообщение об ошибке или ограничении пользователю
- Удалить дело
- Изменить статус дела на выполнено/не выполнено
- Отображение счетчика дел
- Фильтр для отображения
- Все дела
- Выполненные
- Не выполненные
- Редактирование дела (по двойному клику на текст дела)
- Сортировка
- Перетаскивание (менять местами элементы списка)
Реализован самописный drag n drop с анимацией и поддержкой touch-устройств.
Drag n drop - работает непосредственно с DOM-узлами. При перетаскивании одной карточки на другую, та отпускается ниже или поднимается выше перетаскиваемой, в завсимости от ее направления.
При длинных списках дел, если подтащить элемент к границе списка, то начнется скроллинг вниз или вверх.
Для тач-устройств нужно ненадолго задержать палец на иконке сортировки списка, пока перетаскиваемая задача не подсветится заленым цветом.
Можно фильтровать дела по:
- выполненные
- не выполненные
- все дела
Сортировать их по:
- алфавиту
- дате добавления в список
- инвертировать списки, вне зависимости какая сортировка выбрана в данный момент
Сортировка по алфавиту и дате добавления работает поверх фитрации по выполненности, то есть можно отобразить только выполненные дела и отфильтровать только их по алфавиту.
Функционал реверсирования сортирует список в обратном порядке.
Сброс фильтра вернет список в пользовательское состояние, которое записано в local storage.
Написана функция создающая пагинацию на странице с репозиториями:
- При количестве страниц не более чем 4шт отображается только 4 кнопки переключения между страницами.
- Если сгенерировано 5 и более страниц, лишние кнопки скрываются за тремя точками, что бы не занимать все пространство в блоке информации.
- Три точки добавляются в начало списка страниц или в его конец, в зависимости от текущей выбранной страницы.
У меня сейчас не так много репозиториев, что бы увидеть все кейсы отображения пагинации, так что вот тут демо-концепт её работы: Pagination (Figma)
Если страница открывается с мобильного устройства, то с api.hithub подгружается по 3 репозитория, если с компьютера, то по 6, что бы появилась полоса прокрутки.
Системный скролл бар спрятан за overflow границей родительского контейнера, на его месте расположен вручную нарисованный скроллбар.
JavaScript'ом определяем величину прокрутки контейнера с информацией, подставляем соответствующее значение в .style.transform() что бы эмулировать прокрутку скролла.
Скроллбар вынесен в ХОК, и может быть использован на других страницах, где нужена прокрутка длинного списка.
Сокрытие скроллбара, если внутри елемента мало контента
Можно добавлять дела как по клику на соответствующию иконку, так и по нажатии клавиши enter или numpad enter
Инпут умеет валидировать введенные значение по критериям:
- нельзя добавить пустую строку
- нельзя дублировать задачи
- строка должна начинаться с текстового символа
- слово не может быть слишком длинным
- пробелы перед первым символом и после последнего обрезаются автоматически
Можно редактровать дела по двойному клику
При сохранении дела во время редактирования оно не сохранится если будет пустым или состоять только из пробелов.
Если при редактировании дела в нем есть слишком длинные слова, то дело не сохранится и появится подсказка, что введено слишком длинное слово, а само дело обведется крассной рамкой.
Сохранить дело и выйти из режима редактирования можно нажав клавишу Enter, NunEnter, Tab или просто кликнув куда ни будь мышкой.
При нажатии клавиши Escape в режиме редактирования, произойдет выход, а изменения откатятся на состояние до начала редактирования дела.
Redux - добавлен как возможность разобраться в технологии. Позже на него была сгружена логика редактирования списка дел по двойному клику.
В редьюссерах реализована логика формирования списков репозоториев и дел, а так же фильтрация, сортиовка, перемещение элемнтов списка и прочее.
Применена библиотека Material UI и нативный CSS
Для запроса данных с Github реализован механизм запроса данных с помощью fetch() с Basic http authorization.
Во время запроса данных, приложение рисует лоадеры:
- При загрузке приложение (когда в кэше нет данных)
- При запросе, отображается лоадер на месте компонента
- При загрузки аватара пользователя, так как он прописан через тэг <img.. />
- При переключении между страницами с репозиториями
Обрабатываются следующие типы ошибок при загрузке данных:
- Не удалось установить соединение с api,github.com
- Запрашиваемый пользователь не найден
- Список репозоториев пользователя пуст
В случае, когда в разделе ToDo список задач пуст, поведение обрабатывается как ошибка, с соответствующими входными параметрами.
По клику на ссылку "Загрузить данные повторно" подменяется значение пропса (true/false), на который ссылается useEffect()=>{...}[prop], что и запускает повторный запрос на сервер.
Элементы в списке репозиториев - svg файлы, цвет который изменяется по css-свойству {fill: ...;}