Skip to content

iamdejar/todo-list-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

По умолчанию в стейт загруженны 20 дефолтных задач для демонстрации подгрузки списка при скролле.

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

В компоненте TaskList при загрузке включается обработчик события «scroll» и вычисляется расстояния до конца страницы, когда оно меньше 50px в стейте увеличивается количество выводимых задач, подгружаются новые.

При загрузке приложение берет из Local Storage объекта по ключу todoState и передаёт его в createSlice как preloadedState. Если объект есть, то выводятся значения из него, если нет — то из объекта initialState.

Запись в Local Storage производится в store.subscribe(), то есть при каждом изменении стейта. Это наиболее простой способ реализации синхронизации с Local Storage, более гибко это можно сделать используя middleware.

Все элементы форм выполнены на нативных html-элементах, включая datepicker. Поэтому формат отображения datepicker зависит от браузера и его настроек. Для кастомизации нужно подключить библиотеку компонентов или пакет с отдельным компонентом.

Для добавления новой задачи и редактирования переиспользуется одна форма. При редактировании через пропс компонента Link передаётся id задачи, в форму передаются данные задачи с этим id и action для редактирования. Если id не передан, то форма остаётся пустой и передаётся action для создания новой задачи.

Для обработки дат использовал библиотеку dayjs — более легковесный аналог классической moment.js. Даты можно обрабатывать и нативными методами JS, но при ограниченном времени на разработку и минимальном влиянии на производительность предпочел проверенную библиотеку, в которой обработка формата выполняется в одну строку.

Для генерации уникальных id для задач использована библиотека nanoid.

При фильтрации список можно фильтровать сразу по нескольким параметром. Нереализованный момент, который можно назвать багом — можно поставить дату окончания меньше, чем дату начала.

При организации проекта ориентировался на методологию Feature Sliced Design.

Из четырех дополнительных пунктов ТЗ не реализовал последние три.

About

Simple to-do list in React.js

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published