DKU-D-Coding · chchaeun · Feb 20, 2023 · Feb 20, 2023 · Feb 20, 2023 · Feb 20, 2023
diff --git a/vanilla-todo/index.html b/vanilla-todo/index.html
@@ -7,7 +7,6 @@
   </head>
   <body>
     <div id="App"></div>
-    <script src="./src/App.js" type="module"></script>
-    <script src="./src/observer.js" type="module"></script>
+    <script src="./src/route.js" type="module"></script>
   </body>
 </html>
diff --git a/vanilla-todo/src/App.js b/vanilla-todo/src/App.js
diff --git a/vanilla-todo/src/Component.js b/vanilla-todo/src/Component.js
diff --git a/vanilla-todo/src/components/AddForm.js b/vanilla-todo/src/components/AddForm.js
@@ -1,24 +1,34 @@
-import Component from "../Component.js";
-import Selector from "../constants/Selector.js";
+import Component from "../core/Component.js";
+import { SELECTOR } from "../constants/_index.js";
+import { store, SET_TODO, todoService } from "../store.js";
+
 export default class AddForm extends Component {
   html() {
     return `
-        <form id="addForm">
+        <form id="${SELECTOR.ADD_FORM_ID}">
             <input placeholder="Enter Todo..." />
             <button type="submit">Submit</button>
         </form>`;
   }
-  setEvent() {
-    const handleSubmitAdding = (event) => {
-      event.preventDefault();
-
-      const $addForm = document.getElementById(Selector.ADD_FORM_ID);
-      const $todoInput = $addForm.querySelector("input");
+  event() {
+    return [
+      {
+        type: "submit",
+        target: `#${SELECTOR.ADD_FORM_ID}`,
+        handler: this.handleSubmitAdding.bind(this),
+      },
+    ];
+  }
+  handleSubmitAdding(event) {
+    event.preventDefault();
 
-      this.props.addTodo($todoInput.value);
+    const $addForm = document.getElementById(SELECTOR.ADD_FORM_ID);
+    const $todoInput = $addForm.querySelector("input");
 
-      $todoInput.value = "";
-    };
-    this.addEvent("submit", `#${Selector.ADD_FORM_ID}`, handleSubmitAdding);
+    store.dispatch({
+      type: SET_TODO,
+      payload: todoService.addTodo($todoInput.value),
+    });
+    $todoInput.value = "";
   }
 }
diff --git a/vanilla-todo/src/components/EditForm.js b/vanilla-todo/src/components/EditForm.js
@@ -0,0 +1,44 @@
+import Component from "../core/Component.js";
+import { SELECTOR } from "../constants/_index.js";
+import { store, SET_TODO, SET_EDITING_NULL, todoService } from "../store.js";
+
+export default class EditForm extends Component {
+  html() {
+    const { editingId, todos } = store.getState();
+    if (!editingId) {
+      return;
+    }
+
+    const editingTodo = todos.find((value) => value.id === editingId);
+
+    return `
+        <form class="${SELECTOR.EDIT_FORM_CLASSNAME}">
+          <input value="${editingTodo.content}">
+          <button type="submit">Submit</button>
+        </form>
+        `;
+  }
+  event() {
+    return [
+      {
+        type: "submit",
+        target: `.${SELECTOR.EDIT_FORM_CLASSNAME}`,
+        handler: this.handleSubmitEditing.bind(this),
+      },
+    ];
+  }
+
+  handleSubmitEditing(event) {
+    event.preventDefault();
+    store.dispatch({
+      type: SET_TODO,
+      payload: todoService.editTodo({
+        content: event.target[0].value,
+        id: store.getState().editingId,
+      }),
+    });
+    store.dispatch({
+      type: SET_EDITING_NULL,
+    });
+  }
+}
diff --git a/vanilla-todo/src/components/Filter.js b/vanilla-todo/src/components/Filter.js
@@ -0,0 +1,27 @@
+import Component from "../core/Component.js";
+import { CONTAINER, TODO_FILTER } from "../constants/_index.js";
+import { SET_FILTER, store } from "../store.js";
+export default class Filter extends Component {
+  html() {
+    return `
+    <button id="${TODO_FILTER.TODO}">To do</button>
+    <button id="${TODO_FILTER.DONE}">Done</button>
+    <button id="${TODO_FILTER.ALL}">All</button>
+        `;
+  }
+  event() {
+    return [
+      {
+        type: "click",
+        target: `#${CONTAINER.FILTER}`,
+        handler: this.handleClickFilter.bind(this),
+      },
+    ];
+  }
+  handleClickFilter(event) {
+    store.dispatch({
+      type: SET_FILTER,
+      payload: event.target.id,
+    });
+  }
+}
diff --git a/vanilla-todo/src/components/Title.js b/vanilla-todo/src/components/Title.js
@@ -1,7 +1,3 @@
-import Component from "../Component.js";
-export default class Title extends Component {
-  html() {
-    return `
-        <h1>To do List</h1>`;
-  }
-}
+const Title = () => `<h1>To do List</h1>`;
+
+export default Title;