Add support for saving draft as root todo item

Author: zerobias

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

@@ -156,28 +156,44 @@ 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 = [] }) => ({
+export const addTodo = createAction({
+  source: $todoDraft,
+  target: {
+    add: todoList.edit.add,
+    todoDraft: $todoDraft,
+  },
+  fn(target, todoDraft) {
+    if (!todoDraft.trim()) return;
+    target.add({
       id: createID(),
-      title,
-      subtasks: addIds(subtasks),
-    }));
-  }
-  return addIds(inputs);
+      title: todoDraft.trim(),
+      subtasks: [],
+    });
+    target.todoDraft.reinit();
+  },
 });
 
-addTodo([
-  { title: '🖱 Double-click to edit' },
-  { title: 'Effector models' },
-  {
-    title: 'Example task',
-    subtasks: [
-      {
-        title: 'subtask #1',
-        subtasks: [{ title: 'Foo' }, { title: 'Bar' }],
-      },
-      { title: 'subtask #2' },
-    ],
-  },
-]);
+function addIds(inputs: InputTodo[]): TodoInputShape[] {
+  return inputs.map(({ title, subtasks = [] }) => ({
+    id: createID(),
+    title,
+    subtasks: addIds(subtasks),
+  }));
+}
+
+todoList.edit.add(
+  addIds([
+    { title: '🖱 Double-click to edit' },
+    { title: 'Effector models' },
+    {
+      title: 'Example task',
+      subtasks: [
+        {
+          title: 'subtask #1',
+          subtasks: [{ title: 'Foo' }, { title: 'Bar' }],
+        },
+        { title: 'subtask #2' },
+      ],
+    },
+  ]),
+);

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

@@ -1,19 +1,28 @@
-import { ChangeEvent } from 'react';
+import type { KeyboardEvent, ChangeEvent } from 'react';
 import { useUnit } from 'effector-react';
 import { useEntityList } from '@effector/model-react';
 
-import { todoList, $todoDraft, editDraft } from '../model';
+import { todoList, $todoDraft, editDraft, addTodo } from '../model';
 import { TodoCount } from './TodoCount';
 import { TodoFilters } from './TodoFilters';
 import { TodoItem } from './TodoItem';
 
 import './main.css';
 
 export const App = () => {
-  const [todoDraft, onDraftChange] = useUnit([$todoDraft, editDraft]);
+  const [todoDraft, onDraftChange, saveDraft] = useUnit([
+    $todoDraft,
+    editDraft,
+    addTodo,
+  ]);
   const onChangeDraft = (e: ChangeEvent<HTMLInputElement>) => {
     onDraftChange(e.target.value);
   };
+  const onAddTodo = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key !== 'Enter') return;
+    e.preventDefault();
+    saveDraft();
+  };
   const onToggleAll = (e: ChangeEvent<HTMLInputElement>) => {
     // toggleAll(e.currentTarget.checked);
   };
@@ -28,6 +37,7 @@ export const App = () => {
           <input
             className="new-todo"
             placeholder="What needs to be done?"
+            onKeyDown={onAddTodo}
             onChange={onChangeDraft}
             value={todoDraft}
           />