AIM1rage/todo-list

TODO List

В этом задании мы напишем свой фреймворк. Небольшая заготовка уже есть, но она туповата, а мы сделаем ее умной.

1. Давай избавимся от повторяющегося кода. Заведи в конструкторе TodoList обьект state, куда положи информацию о задачах. Итерируйся по state в render.

2. Давай оживим добавление новой задачи.

   Создай у класса TodoList методы onAddTask и onAddInputChange.

   Улучши функцию createElement: помимо атрибутов и детей она также должна принимать список коллбэков, которые она будет навешивать.

   Навесь как коллбеки функции onAddTask на нажатие кнопки и onAddInputChange на изменение текста в input. onAddTask должна добавлять в state новое задание, а onAddInputChange должна добавлять в state то, что сейчас написано в input (чтобы потом на это посмотрел onAddTask)

3. Мы научились изменять state, но на экране ничего не поменялось :( Давай исправим это. Создай в классе Component метод update, который мы будем вызывать тогда, когда нам нужно перерендерить компонент. Метод update должен вызывать render и изменять DOM-ноду (или контент в DOM-ноде) на новую.

4. Сделай так, чтобы у текста выполненных задач был серый цвет. Также реализуй удаление задачи.

5. В нашем компоненте стало сильно много логики. Давай вынесем добавление задачи и элемент списка задач в отдельные компоненты (назвать их можно, например, AddTask и Task). Используй их в render компонента TodoList так же, как используется сам TodoList.

   При этом этим компонентам нужно каким-то образом изменять state родительского компонента. Давай прокинем onAddTask в конструктор компонента AddTask, а коллбэки удаления задачи и пометки/снятия пометки задачи как выполненной в Task.

6. Давай сделаем защиту от дурака. При первом нажатии на кнопку "Удалить" ее цвет меняется на красный. При втором нажатии задача действительно удаляется. Информацию о том, первое это нажатие или нет, храни в state компонента Task.

7. (*) При перезагрузке страницы все состояние нашего списка должно оставаться сохраненным. Давай хранить его еще и в localStorage, а при загрузке страницы доставать его оттуда.

8. (*) Сейчас при ререндере родителя потеряется state детей. Давай изменим наш фреймворк так, чтобы при изменении props state дочернего компонента оставался.