Implement adding child subtasks

Author: zerobias

apps/tree-todo-list/src/model.ts

@@ -106,6 +106,21 @@ export const todoList = keyval(() => {
     target: $completed,
   });
 
+  const [addSubtask] = lazy(['event'], () => [
+    createAction({
+      source: $todoDraft,
+      target: { todoDraft: $todoDraft, add: childsList.edit.add },
+      fn(target, todoDraft) {
+        target.add({
+          id: createID(),
+          title: todoDraft,
+          subtasks: [],
+        });
+        target.todoDraft.reinit();
+      },
+    }),
+  ]);
+
   return {
     key: 'id',
     state: {
@@ -123,6 +138,7 @@ export const todoList = keyval(() => {
       saveDraft,
       editMode,
       toggleCompleted,
+      addSubtask,
     },
     optional: ['completed', 'editing', 'titleDraft'],
   };
@@ -132,10 +148,18 @@ export const $totalSize = combine(todoList.$items, (items) => {
   return items.reduce((acc, { subtasksTotal }) => acc + 1 + subtasksTotal, 0);
 });
 
+export const $todoDraft = createStore('');
+export const editDraft = createEvent<string>();
+sample({ clock: editDraft, target: $todoDraft });
+
+function createID() {
+  return `id-${Math.random().toString(36).slice(2, 10)}`;
+}
+
 export const addTodo = todoList.edit.add.prepend((inputs: InputTodo[]) => {
   function addIds(inputs: InputTodo[]): TodoInputShape[] {
     return inputs.map(({ title, subtasks = [] }) => ({
-      id: `id-${Math.random().toString(36).slice(2, 10)}`,
+      id: createID(),
       title,
       subtasks: addIds(subtasks),
     }));

apps/tree-todo-list/src/view/App.tsx

@@ -1,31 +1,18 @@
-import { KeyboardEvent, ChangeEvent } from 'react';
+import { ChangeEvent } from 'react';
 import { useUnit } from 'effector-react';
 import { useEntityList } from '@effector/model-react';
 
-import { todoList, addTodo } from '../model';
+import { todoList, $todoDraft, editDraft } from '../model';
 import { TodoCount } from './TodoCount';
 import { TodoFilters } from './TodoFilters';
 import { TodoItem } from './TodoItem';
 
 import './main.css';
 
 export const App = () => {
-  const [addTodoClicked] = useUnit([addTodo]);
-  // const draft = useUnit($descriptionDraft);
+  const [todoDraft, onDraftChange] = useUnit([$todoDraft, editDraft]);
   const onChangeDraft = (e: ChangeEvent<HTMLInputElement>) => {
-    // changeDraft(e.target.value);
-  };
-  const onAddTodo = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key !== 'Enter') return;
-    e.preventDefault();
-    const input = e.currentTarget;
-    if (input.value && input.value.trim()) {
-      addTodoClicked([
-        {
-          title: input.value.trim(),
-        },
-      ]);
-    }
+    onDraftChange(e.target.value);
   };
   const onToggleAll = (e: ChangeEvent<HTMLInputElement>) => {
     // toggleAll(e.currentTarget.checked);
@@ -41,9 +28,8 @@ export const App = () => {
           <input
             className="new-todo"
             placeholder="What needs to be done?"
-            onKeyDown={onAddTodo}
             onChange={onChangeDraft}
-            value={'---'}
+            value={todoDraft}
           />
         </header>
         <section className="main">

apps/tree-todo-list/src/view/TodoItem.tsx

@@ -28,7 +28,7 @@ export const TodoItem = ({ nesting }: { nesting: number }) => {
     remove(id);
   };
   const onAddChild = () => {
-    // addTodoFromDraft({ childOf: id });
+    api.addSubtask();
   };
   const onEdit = () => api.editMode('on');
   const onSave = () => api.saveDraft();