Три панели с фильтром и выбором
Условие
Экран из трёх частей по записям { id, amount }. · Слева радиокнопки <input type="radio" name="filter" value="all|neg|pos"> - все / меньше нуля / больше или равно нулю, и чекбокс <input class="sorted"> - сортировка по сумме. · В середине отфильтрованный список <label class="row"> с <input type="checkbox" data-id>. · Справа <div class="selected"> - идентификаторы выбранных через запятую. Выбор не должен теряться при переключении фильтра. Без стора.
Что проверяют тесты
показывает все записи
фильтр по отрицательным
ноль относится к неотрицательным
сортировка по сумме
выбор переживает смену фильтра
повторный клик снимает выбор
исходный массив не сортируется на месте
Как подойти
Задача на разделение состояния: три независимых кусочка (фильтр, сортировка, выбор) и один производный список. Требование «выбор не зависит от переключения фильтра» подсказывает хранить его отдельным множеством идентификаторов - если держать флаг внутри записи или полагаться на индексы, выбор поедет. Правая панель - чистая производная от множества. Что назвать вслух: виртуализация при сотнях записей, «выбрать всё видимое», сохранение фильтров в адресной строке.
Подсказки: 3
- Выбор храни множеством идентификаторов, а не флагом внутри записи.
- Отфильтрованный и отсортированный список выводится, а не хранится.
- sort мутирует - копируй перед сортировкой.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.