Разработка ведётся по методологии TDD: вначале пишем тесты, потом пишем компонент, который проходит тесты. Если это тяжело психологически, можно параллельно писать компонент и тест.
В этой лабораторной надо реализовать динамический список с фильтрацией и поиском. Примерный скриншот:
- Аккуратно перенести компоненты и стор из третьей лабы.
- Прикрутить Redux Provider.
- В компонентах использовать useSelect и useDispatch вместо пробрасывания state и dispatch.
- Сделать в фильтре набор значений (селектбокс/радиобатон/нажимаемые ссылки): "все", "сделанные", "не сделанные".
- При изменении складываем в стор.
- Сделать в фильтре текстовое поле поиска.
- Складывать введённое значение в стор.
- Показывать в списке элементы с учётом фильтра:
- Элементы, у которых в title встречается строка, введённая в поле (регистронезависимо).
- Элементы с учётом выполненности.
- Сделать компонент Alert, показывающий всплывающий и исчезающий массив ошибок.
- Ошибки показываются, потом скрываются через 3 секунды.
- Ошибки хранятся в сторе в state.errors:
- messages: string[];
- isShowing: boolean;
- Показывать ошибку при попытке создать пустой элемент.
- Показывать ошибку при попытке создать элемент с таким же title.
- Когда все ошибки показаны, сбрасывать флаг ошибки, очищать messages.
(те же требования, что и в третьей лабе)
- Отображает селектбокс с вариантами фильтрации "все", "сделанные", "не сделанные".
- Отображает поле ввода, при вводе в которое осуществляется фильтрация по подстроке.
- Пропсы:
- isShown: boolean; при изменении в true начинается показ сообщений.
- messages: string[]; список показываемых сообщений.
- delay: number = 3000; через сколько миллисекунд скрывать.
- onClose: () => {}; обработчик закрытия.
- Можно сделать кнопку досрочного закрытия.
- В сторе хранится текущее состояние приложения:
- Массив элементов.
- Текущее значение фильтра состояния (все/сделанные/не сделанные).
- Текущее значение фильтра подстроки.
- Выдаёт актуальный список элементов в соответствии со значениями фильтров.
- Можно комбинировать селекторы:
- Написать селектор по подстроке.
- Написать селектор по состоянию.
- Вызвать один на результатах другого.