Week1/8/todo edit

src/js/TodoApp.js

@@ -7,15 +7,13 @@ export default function TodoApp($app) {
     todoes: [
       {
         idx: 0,
-        content: 'hi EveryOne',
+        content: 'hiEvery One',
         state: '',
-        edit: '',
       },
       {
         idx: 1,
-        content: "I'm Tami",
+        content: 'Im Tami',
         state: '',
-        edit: '',
       },
     ],
   };
@@ -24,10 +22,12 @@ export default function TodoApp($app) {
     this.state = nextState;
     todoList.setState(this.state.todoes);
     todoCount.setState(this.state.todoes);
+    todoInput.setState(this.state.todoes);
   };
 
-  new TodoInput({
+  const todoInput = new TodoInput({
     $app,
+    initialState: this.state.todoes,
     onAdd: (contents) => addTodo(contents),
   });
 
@@ -36,6 +36,7 @@ export default function TodoApp($app) {
     initialState: this.state.todoes,
     onToggle: (idx) => toggleTodo(idx),
     onDelete: (idx) => deleteTodo(idx),
+    onEdit: (idx, isEdit, newContent) => editTodo(idx, isEdit, newContent),
   });
   const todoCount = new TodoCount({
     $app,
@@ -67,10 +68,9 @@ export default function TodoApp($app) {
 
   const toggleTodo = (idx) => {
     const todos = this.state.todoes;
-
     todos.map((todo) => {
       if (todo.idx === idx) {
-        todo.state = todo.state === '' ? 'complete' : '';
+        todo.state = todo.state === '' ? 'completed' : '';
       }
     });
     this.setState({
@@ -88,4 +88,19 @@ export default function TodoApp($app) {
       todoes: newTodos,
     });
   };
+
+  const editTodo = (idx, isEdit, newContent) => {
+    const todos = this.state.todoes;
+    todos.map((todo) => {
+      if (todo.idx === idx) {
+        todo.state = todo.state === '' ? 'editing' : '';
+        if (isEdit) {
+          todo.content = newContent;
+        }
+      }
+    });
+    this.setState({
+      ...this.state,
+    });
+  };
 }

src/js/TodoCount.js

@@ -11,8 +11,9 @@ export default function TodoCount({ $app, initialState }) {
   };
 
   this.render = () => {
+    const todoCount = this.state.length;
     const todoCountTemplate = `
-      <span class="todo-count">총 <strong>${this.state}</strong> 개</span>
+      <span class="todo-count">총 <strong>${todoCount}</strong> 개</span>
       <ul class="filters">
         <li>
           <a class="all selected" href="#">전체보기</a>

src/js/TodoInput.js

@@ -1,4 +1,5 @@
-export default function TodoInput({ $app, onAdd }) {
+export default function TodoInput({ $app, initialState, onAdd }) {
+  this.state = initialState;
   this.$target = document.createElement('input');
   this.$target.id = 'new-todo-title';
   this.$target.className = 'new-todo';
@@ -7,8 +8,7 @@ export default function TodoInput({ $app, onAdd }) {
   $app.appendChild(this.$target);
 
   this.setState = (nextState) => {
-    this.setState = nextState;
-    this.render();
+    this.state = nextState;
   };
 
   this.$target.addEventListener('keydown', (e) => {
@@ -18,11 +18,9 @@ export default function TodoInput({ $app, onAdd }) {
   this.addTodoItem = (e) => {
     const $newTodoTarget = e.target;
 
-    if (e.code === 'Enter') {
+    if (e.keyCode === 13) {
       onAdd($newTodoTarget.value);
       $newTodoTarget.value = '';
     }
   };
-
-  this.render = () => {};
 }

src/js/TodoList.js

@@ -1,50 +1,89 @@
-export default function TodoList({ $app, initialState, onToggle, onDelete }) {
-  //렌더링할 DOM 생성
-
+export default function TodoList({
+  $app,
+  initialState,
+  onToggle,
+  onDelete,
+  onEdit,
+}) {
   this.state = initialState;
-
   this.$target = document.createElement('ul');
   this.$target.className = 'todo-list';
   this.$target.id = 'todo-list';
   $app.appendChild(this.$target);
+  const $nodeTodoList = this.$target;
 
   this.setState = (nextState) => {
     this.state = nextState;
     this.render();
   };
 
-  this.$target.addEventListener('click', (e) => {
+  $nodeTodoList.addEventListener('click', (e) => {
     const $node = e.target;
-    const $viewnode = e.target.closest('.view');
-    const { nodeId } = $viewnode.dataset;
 
-    if ($node.className == 'toggle') {
-      this.toggleTodoItem(parseInt(nodeId));
+    if ($node.className === 'toggle') {
+      this.toggleTodoItem($node);
     }
-    if ($node.className == 'destroy') {
-      this.deleteTodoItem(parseInt(nodeId));
+    if ($node.className === 'destroy') {
+      this.deleteTodoItem($node);
+    }
+
+    if ($node.className === 'edit') {
+      this.editTodoItem($node);
     }
   });
-  this.toggleTodoItem = (nodeId) => {
-    onToggle(nodeId);
+
+  $nodeTodoList.addEventListener('dblclick', (e) => {
+    const $node = e.target;
+    this.editTodoItem($node);
+  });
+
+  this.toggleTodoItem = ($node) => {
+    const { nodeId } = $node.closest('.view').parentNode.dataset;
+    onToggle(parseInt(nodeId));
+  };
+
+  this.deleteTodoItem = ($node) => {
+    const { nodeId } = $node.closest('.view').parentNode.dataset;
+    onDelete(parseInt(nodeId));
   };
-  this.deleteTodoItem = (nodeId) => {
-    onDelete(nodeId);
+
+  this.editTodoItem = ($node) => {
+    if ($node.className === 'edit') {
+      const { nodeId } = $node.parentNode.dataset;
+      $node.addEventListener('keydown', (e) => {
+        //Enter key 입력
+        if (e.keyCode === 13) {
+          onEdit(parseInt(nodeId), true, $node.value);
+        } //esc key 입력
+        else if (e.keyCode === 27) {
+          onEdit(parseInt(nodeId), false, '');
+        }
+      });
+    } else {
+      const { nodeId } = $node.closest('.view').parentNode.dataset;
+      if ($node.className === 'label') {
+        onEdit(parseInt(nodeId), false, '');
+      }
+    }
   };
+
   this.render = () => {
-    const todoTemplate = `${this.state
+    const todos = this.state;
+    const todoTemplate = `${todos
       .map(
         (todo, idx) =>
-          `<li  class="${todo.state === 'complete' ? 'completed' : ''}">
-          <div class="view" data-node-id=${todo.idx} >
+          `<li class="${todo.state === 'completed' ? 'completed' : ''} ${
+            todo.state === 'editing' ? 'editing' : ''
+          }" data-node-id="${todo.idx}">
+          <div class="view"  >
             <input class="toggle" type="checkbox" />
             <label class="label">${todo.content}</label>
             <button class="destroy"></button>
           </div>
-          <input class="edit " value=${todo.content}/>
+          <input class="edit" value="${todo.content}"/>
         </li>`
       )
       .join('')}`;
-    this.$target.innerHTML = todoTemplate;
+    $nodeTodoList.innerHTML = todoTemplate;
   };
 }