npm i - сборка

npm run build - билд

npm run dev - dev сервер

npm run storybook - поднять локальный сервер с storybook

npm run lint - линтер

Стек

• React 16
• Redux
• Stylus
• CSS-modules
• Webpack
• Storybook
• Immutable.js

Дополнительно

• Lodash
• Moment
• Husky

Моменты, заслуживающие упоминания

Алиасы

У нас используется всего два алиаса:

• @ - соответствует абсолютному пути src
• @@ - соответствует абсолютному пути src/components/

Они прописаны в файле jsconfig.json, так что, все подсказки редактора должны работать при их использовании.

Store

Вся логика, связанная со Store'ом хранится в папке ./src/store/. Внутри неё находятся:

• папка reducers - содержит редьюсеры, в которых лежат экшены, селекторы и мутации.
• файл index.js, где создается и экспортируется стор и все, что с ним связанно.

Каждый редьюсер имеет следующую файловую структуру:

• index.js - место где создается и экспортируется редьюсер и где лежат все мутации
• mutations.js - логика редьюсера
• selectors.js - селекторы

Всё что может понадобится от стора экспортится в основном index.js файле. Соответственно, любой экшен-крейтор, селектор или танк можно заимпортить, прописав только import { ... } from '@/store'.

Для удобной организации стора использовался redux-actions. Весь стор построен на Immutable.js

Известные проблемы, которые мы не успели исправить

• В сторе используется Immutable.js, а в компонентах - нет. Хоть преимущества Immutable.js и на месте, благодаря использованию reselect в селекторах, лучше, всё же, было бы перевести компоненты на работу с Immutable.js-структурами вместо обычных объектов
• Связано с первым, иногда в селекторах можно встретить метод toJS, который попал туда, при приближении дедлайнов, что очень нехорошо с точки зрения производительности
• Некоторые компоненты следует разбить на более мелкие и вынести некоторые методы, ради уменьшения модулей и улучшения читаемости
• Почему-то событие отмены драга попадает в функцию placeEventOnDay, скорее всего из-за названия (пропса называется event) (сейчас это пофикшено, но теперь он ругается)
• Список дел без срока не должен раскрываться вниз, когда есть события только с одной меткой, нужно добавить доп условие в функцию positionInSameColorArray.
• Неправильно обрабатываются события на весь день, которые начинаются на одной неделе, а заканчиваются на другой, нужно сделать так, чтобы проверялся не только startTs, но и endTs при выборке событий.
• При переключении обратно с недели на месяц будет выбрана первая неделя месяца, что не очень удобно, хотелось бы запоминать неделю, на которой был пользователь до переключения режима отображения.
• На маке из-за скролл бара неудобно пользоваться чекбоксом.
• Функционал создания и редактировния событий не полный - нужно переиспользовать то, что сейчас в проде календаря.
• При группировки по метками нужно показывать дела без срока только для выбранных меток. Можно переиспользовать компонент дел без срока для каждой метки (Как в старом макете).
• Нет возможно сделать из дела со сроком дело без срока

*Внутри некоторых компонентов есть TODO, где написано, что исправить или как можно сделать лучше.

Фичи, которые хотелось бы когда-нибудь добавить

• Добавить окно подтверждения для критических действий (удаление списка дел).
• Добавить react-router
• Добавить возможность сортировать дела внутри контейнера дел без срока.
• Добавить возможность группировки и сортировки выполненных и невыполненных дел.
• Показывать название дела при наведении на дело.
• Что-то придумать при кейсе, когда у пользователя очень много событий без срока. Как вариант - показывать 10 карточек, а остальные скрывать под кнопочкой + (если дел всего 15, то будет показно 10 карточек и кнопка "+5"). Другой вариант - добавить скролл.