Генерируется массив объектов { label, value }, длиной N ( 10000 по умолчанию ) элементов. Реализовать механизм вывода данных в список любым удобным способом (использование готовых компонент запрещено). Реализовать следующую функциональность для списка:
- Добавление элементов в список
- Удаление элементов из списка
- Редактирование элемента в списке
- Поле фильтрации списка (по label и value)
- Сортировка списка по полю label (как в порядке возрастания, так и убывания)
Реализовать генератор массива длиной k (10 000 000+ по умолчанию) элементов. Элементами данного массива являются случайные строки длинной в 7 символов.
Реализовать чистую функцию filter, которая принимает произвольное количество массивов (из пункта 1) в качестве аргументов функции. Результатом работы фильтра должен быть массив, элементы которого имеют совпадение с указанной строкой фильтрации.
- Подтянуть зависимости
- npm -start
- Я решил несколько усложнить себе задачу. Сделано это было для тренировки верстки на гридах а так же просто для забавы.
- Далее приведён список усложнений:
- На экране выводится 2 списка, один из которых в зависимости от размера экрана выводит разное количество карточек, а второй меняет карточки по размер (что, к слову, привело к ряду дополнительных архитектурных решений)
- фильтр работает не просто как фильтр по полю. Это фильтр по всем полям одновременно. То есть, можно ввести значения в оба фильтра одновременно и это будет работать именно так, как подсказывает интуиция.
- сортировку сделал по всем полям в обоих направлениях
- А еще я не использовал REDUX, хотя у меня догадки, что он бы наверняка помог мне с некоторыми архитектурными проблемами, но увы, до него я еще не добрался
- Приношу извинения за сомнительный внешний вид. Ваш внутренний дизайнер наверняка посмотрит на это с болью...) по крайней мере мой именно это и чувствовал). Однако, задание было не про внешний вид, а про функционал. И он работает
- Я не стал использовать никаких баз данных, так что при обновлении страницы данные теряются. Примеры работ, где обновление страницы не влияет на контент вы можете найти в других моих проектах.
- Данные в обоих списках синхронизированы и это чудесным образом поможет протестировать CRUD :)
Решение можно найти в папке "src/part2" проекта
- Есть несколько вариантов трактовки, но ни один из них не кажется мне адекватным
- Вариант 1: Нам нужно найти все вхождения данной подстроки в строки массивов и вывести эти строки массивом
- Вариант 2: Нам нужно найти первый массив, в котором в какой-то из строк находится подстрока и вывести его (очень странно называть это фильтром, но ктож вас знает...)
- Вариант 3: Самое забавное, что по такой спецификации нам подойдет функция, которая просто вернёт массив из одного элемента - строки, которую мы ищем.
function filter(stringToSearch){ return [stringToSearch]; }Если вчитаться в задание - это вообще одно из лучших решений ибо делает действительно то, что просят безо всяких допущений ради здравого смысла- Вариант 4: "массив, элементы которого имеют совпадение с указанной строкой фильтрации." можно читать как "массив, ВСЕ элементы которого имеют совпадение с указанной строкой фильтрации." Но в этом случае это всё равно больше похоже на поиск... причем, на поиск с чертовски маленькой вероятностью найти хоть какое-то значение
- Я решил реализовать первый вариант, как наиболее близкий к моему ощущению адекватности.
- То, что было реализовано - не совсем "чистая" функция... однако... я бы предложил взглянуть вот на эту статейку, прежде чем говорить о том, что мы понимаем под "чистой функцией" https://medium.com/devschacht/robin-pokorny-do-pure-functions-exist-in-javascript-94fd25180fdc Мое решение было просто не иметь зависимостей от сторонних библиотек.
Суммарное время выполнения = 20 часов. Все необходимые для выполнения навыки я получил в предыдущих двух тестовых заданиях.