Посмотреть результат: http://betronic-software-test-task.wirwl.vercel.app
Задание: необходимо реализовать приложение, представляющее из себя роутинг, построенный на основе дерева. Изначально дерево имеет только корень: { route: ‘/main’, nodes: [], title: ‘Main’ }. Все дерево нужно хранить в редаксе. В дерево можно добавлять узлы и удалять их. Находясь на конкретном узле пользователь имеет возможность добавить узлы, для этого он заполняет форму с полями: route, title. После заполнения формы пользователь ее сабмитит (submit) и новый узел добавляется под текущий. Каждый роут приложения по сути представляет из себя визуализацию узла дерева, на странице есть: Title. Находится в хедере Кнопка “Перейти к родительскому узлу”. Находится в хедере Таблица узлов (на флексах или гридах) в формате route - title - amount nodes - кнопка удаления узла. Находится в основном контенте сайта Форма добавления нового узла. Находится в основном контенте сайта Список ссылок на дочерние узлы (Link-и), при нажатии на которые пользователь переходит на данный роут (узел) Если у текущего узла 0 дочерних узлов, то страница оформлена в цветах ВК, если 1, то в цветах Ватсапа, если 2 и больше, то в цветах гитлаба Дерево должно сохраняться даже после перезагрузки страницы Количество и содержание узлов не ограничено Количество дочерних узлов также не ограничено Например, есть дерево с роутами main -> additional -> info - ayf, если я введу в роуте localhost:3000/main/additional/info/ayf, но у меня должен открыться самый дочерний узел Текущий роутинг сайта строится на актуальных данных о состоянии дерева: узел удален - данного роута нет, а все его дочерние узлы первого уровня становятся дочерними узлами его родительского узла. Основной смысл задания - моментально при совершении каких-либо действий с деревом (удаление узлов, добавление) визуальная составляющая должна меняться, как и роутинг. Использовать: react - для пунктов 3-4. react-router - для пунктов 2,5. redux - для всей работы с деревом и его хранения в персисте. scss - для стилей. bem-cn - для БЭМ-а. Любые иные либы, которые могут упростить жизнь, но не делают работу за вас. Верстка должна быть адаптивной и респонсив для мобилки и десктопа. Проект создать через create-react-app.