Adds methods to edit the task's title

jdubray · Jul 19, 2019 · 3813627 · 3813627
1 parent ea8abf0
commit 3813627
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 30 deletions.
diff --git a/todomvc-app-vue/app.js b/todomvc-app-vue/app.js
@@ -1,55 +1,45 @@
 const localState = (prop) => {
   if (prop && typeof prop === 'object') {
-    const todos = state()._todos
-    const index = todos.indexOf(prop)
-    return todos[index]
+    const todos = state()._todos;
+    const index = todos.indexOf(prop);
+    return todos[index];
   }
   if (prop === 'todos') {
-    return state('_todos')
+    return state('_todos');
   }
-  return state(prop)
+  return state(prop);
 }
 
 const todoComponent = Vue.component('todo-app', {
   data() {
-    return localState()
+    return localState();
   },
   methods: {
     destroy: deleteIntent,
-    startEditing(todo) {
-      // this.editingTodo = todo;
-      // this.beforeText = todo.text;
-    },
-    finishEditing(todo) {
-      // this.editingTodo = null;
-    },
-    cancelEditing(todo) {
-      // this.editingTodo = null;
-      // todo.text = this.beforeText;
-    },
+    startEditing: startEditingIntent,
+    finishEditing: finishEditingIntent,
+    cancelEditing: cancelEditingIntent,
     complete: completeIntent,
-    createTodo(event) {
-      createTodoIntent(event)
-      this.newTodo = null
-    },
+    createTodo: createTodoIntent,
     clearCompleted: clearIntent
   },
   computed: {
     todos() {
-        return localState('_todos').filter(todo => !todo.isDeleted);
+        return localState('todos');
     },
     status() {
       return this.$route.params.status;
     },
     filteredTodos () {
+      this.newTodo = null;
       switch (this.status) {
         case 'active':
           return localState('activeTodos');
         case 'completed':
           return localState('completedTodos');
 
         default:
-          return localState('_todos').filter(todo => !todo.isDeleted);
+          return localState('todos');
       }
     }
   },

diff --git a/todomvc-app-vue/sam.js b/todomvc-app-vue/sam.js
@@ -1,4 +1,4 @@
-const { addInitialState, addComponent, setRender } = tp
+const { addInitialState, addComponent, setRender } = tp;
 
 const LOCAL_STORAGE_KEY = 'todo-app-vue';
 // wire it up
@@ -10,15 +10,18 @@ addInitialState({
     ],
     editingTodo: null,
     newTodo: null,
-})
+});
 
 const { intents, state } = addComponent({
     actions:[
         () => ({}),
         todo => ({ complete: todo }),
         todo => ({ del: todo }),
         () => ({ clear: true }),
-        (event) => ({ text: event.target.value })
+        event => ({ text: event.target.value }),
+        todo => ({ startEditing: todo }),
+        () => ({ finishEditing: true }),
+        todo => ({ cancelEditing: todo })
     ],
     acceptors:[
         model => ({ complete }) => {
@@ -41,16 +44,37 @@ const { intents, state } = addComponent({
             if (text) {
                 model._todos.push({ text, isDone: false, isDeleted: false });
             }
+        },
+        model => ({ startEditing }) => {
+            if (startEditing) {
+                model._editingTodo = startEditing;
+                model._beforeText = startEditing.text;
+            }
+        },
+        model => ({ finishEditing }) => {
+            if (finishEditing) {
+                model._editingTodo = null;
+                model._beforeText = '';
+            }
+        },
+        model => ({ cancelEditing }) => {
+            if (cancelEditing) {
+                model._editingTodo = null;
+                cancelEditing.text = model._beforeText;
+            }
         }
     ],
     reactors: [
         model => () => model.activeTodos = model._todos.filter(t => !t.isDone && !t.isDeleted),
         model => () => model.completedTodos = model._todos.filter(t => t.isDone && !t.isDeleted),
         model => () => model.itemsLeft = model._todos.filter(t => !t.isDone && !t.isDeleted).length,
-        model => () => model._todos.forEach(t => t.isDeleted = t.isDeleted === undefined ? false : t.isDeleted) 
+        model => () => model._todos.forEach(t => t.isDeleted = t.isDeleted === undefined ? false : t.isDeleted),
+        model => () => model.editingTodo = model._editingTodo,
+        model => () => model.beforeText = model._beforeText,
+        model => () => model._todos = model._todos.filter(todo => !todo.isDeleted)
     ]
-})
+});
 
-const [start, completeIntent, deleteIntent, clearIntent, createTodoIntent] = intents
+const [start, completeIntent, deleteIntent, clearIntent, createTodoIntent, startEditingIntent, finishEditingIntent, cancelEditingIntent] = intents;
 
-start()
+start();