Задание

Реализовать приложение с древовидной структурой элементов с возможностью:

• Добавлять новый элемент в конец списка или в произвольную позицию (следом за выбранным элементом)
• Удалить элемент (вместе со всеми вложенными элементами)
• Редактировать текст внутри элемента
• Отменить редактирование (и вернуть в элемент исходный текст)
• Сбросить список до начального состояния

При этом необходимо реализовать возможность работы приложения с тремя разными вариантами структуры исходных данных.

Требования:

• React JS
• Адаптивная вёрстка
• Разделение логики обработки данных и отрисовки

Реализация

Краткий список оставшихся задач:

• Реализовать третий вариант
• Вынести отрисовку компонентов отдельно (так, чтобы все три реализации использовали одни и те же jsx), логику отдельно
• Полностью отделить отрисовку компонентов от логики формирования данных - убрать из CRUD*.js файлов.
• Оптимизировать код, вынести повторяющиеся участки в отдельные функции/файлы
• Заменить все key (реализовано не идеальное решение, но т.к. у объектов нет уникальных id, другого пока нет)
• Для первой реализации изменить логику поднятия элемента. Если сверху уже родитель - то не поднимать (ожидается, что пользователь сначала должен перенести этот элемент на уровень выше)
• Для первой реализации изменить логику "влево". Если это не последний элемент на своём уровне - то он должен перемещаться в родительский элемент в самую последнюю позицию.
• Реализовать возможность добавления элемента списка в указанную позицию для третьей реализации
• Переписать код на TypeScript (написал сначала на JS, т.к. это быстрее)

Элементы управления

Интерфейс приложения интуитивно понятный. У каждого элемента справа есть кнопки для перемещения и удаления. Для редактирования достаточно нажать на текст элемента. Для сохранения изменений нужно нажать Enter.

Варианты реализаций исходных данных:

1. Массив элементов без вложенности, каждый из элементов хранит значение своего уровня вложенности.

Пример:

[{
    text: 'Text 1',
    level: 1,
},
{
    text: 'Text 1-1',
    level: 2,
},
{
    text: 'Text 1-1-1',
    level: 3,
},
{
    text: 'Text 1-1-2',
    level: 3,
},
{
    text: 'Text 1-2',
    level: 2,
},
{
    text: 'Text 2',
    level: 1,
}]

2. Многомерная структура данных из вложенных массивов, которая повторяет структуру элементов списка при их отображении.

Пример:

[{
    name: 'Text 1',
    child: [
        {
            text: 'Text 1-1',
            child: [
                {
                    text: 'Text 1-1-1',
                    child: null,
                },
                {
                    text: 'Text 1-1-2',
                    child: null,
                },
            ],
        },
        {
            text: 'Text 1-2',
            child: null,
        },
    ],
},
{
    text: 'Text 2',
    child: null,
}]

3. Одномерная структура данных с полями-указателями на родительский элемент.

Пример:

[{
    id: 1,
    text: 'Text 1',
    parent: null,
},
{
    id: 2,
    text: 'Text 1-1',
    parent: 1,
},
{
    id: 6,
    text: 'Text 2',
    parent: null,
},
{
    id: 3,
    text: 'Text 1-1-1',
    parent: 2,
},
{
    id: 5,
    text: 'Text 1-2',
    parent: 1,
},
{
    id: 4,
    text: 'Text 1-1-2',
    parent: 2,
}]

Сравнение трёх вариантов