- Сделать папки Components и UI (компонент для общих компонентов, которые имеют какую-то логику, UI для “глупых” компонентов, которые используются только в некоторых местах)
- Отрефакторить LitstItem - удалить состояния отвечающие за открытие модалок и передавать два колбэка, отвечающих за открытие модалок. Вынести tasks и categories и так же передавать их пропсом в ListItem. Перенести ListItem в папку UI
- Перенести ListItem в папку UI
- Перенести Header в Components
- Перенести отрисовку модалок в компонент верхенего уровня (например App) и рисовать их через React.createPortal
- Можно придумать какой-то механизм, например хук, который под капотом будет использовать useContext (как вариант можно и в Redux, но всё-таки в Redux лучше хранить бизнес логику, а тут чисто логика отображения. В общем стоит подумать.), который позволит из любого места приложения открывать модалки (для того чтобы не хранить логику в каждом ListItem и для унификации работы с модалками)
- Данных хук юзать в Categories и Tasks и из него доставать два колбэка для управления модалками и их передавать в пропсами в ListItem;
- Папку Modal переименовать в Modals, на верхнем уровне оставить только ModalRemoveItem и ModalCreateItem, остальные модалки вынести в папку components
- Компонент Modal вынести в UI, т.к. компонент не умный.
- app переименовать в store, reduxStore, чтобы было понятнее
- в папке features создать две подпапки categories (categoriesSlice.ts, categories.tsx) и tasks (tasksSlice.ts, tasks.tsx) для соответсвия с FSD, чтобы каждая папка содержала всё необходимое для данной фичи.
- Накидал схему с идеями по архитектуре:
- Так же можно в папку Categories добавить файл types.ts и из него экспортировать enum (для дефолтных категории), который будет использоваться в тасках, чтобы иметь единственный источник правды для статичных id. Такое разрешается в модульной архитектуре, но не уверен, на счет FSD 😢
enum CategoriesIds {
CATEGORY_1 = "d485a644-5a24-4f55-b3f7-a083338be879"
CATEGORY_2 = "52f7451a-0f06-4ddc-affa-b1d8ed24aee3"
CATEGORY_2 = "36704c57-4575-4112-b962-948b04a20506"
} - Обернуть все составные компоненты модалок CreateItem и RemoveItem в React.memo()
- Все функции внутри CreateItem и RemoveItem, которые передаются пропсами обернуть в useCallback
- Поменять использование svg с помощью тега img, так как можем столкнуться с некоторыми проблемами, например с использованием hover и сменой цвета svg.
- Добавить ограничение на кол-во симоволов в описании задании и категории и добавить кнопку вроде "читать далее" или полосу прокрутки, чтобы не отрисовывать большой объем текста сразу
- Внес изменения в CSS, чтобы описание категории и таски, не сдвигало кнопки
- Все useDispatch и useSelector заменил на useAppDispatch и useAppSelector
- Поменял нейминг редьюсеров и поправил их типизацию
- Поправил некоторые баги связанные с удалением категорий и тасок. И прикрепление категории при создании таски
- Так же внес еще несколько мелких правок, связанных с неймингом, неиспользуемым кодом и код стайл