[10기 김장후] TodoList with CRUD

index.html

@@ -16,7 +16,20 @@ <h1>TODOS</h1>
     <main>
       <input class="toggle-all" type="checkbox" />
       <ul id="todo-list" class="todo-list"></ul>
-      <div class="count-container"></div>
+      <div class="count-container">
+        <span class="todo-count"></span>
+        <ul class="filters">
+          <li>
+            <a class="all selected" href="#">전체보기</a>
+          </li>
+          <li>
+            <a class="active" href="#active">해야할 일</a>
+          </li>
+          <li>
+            <a class="completed" href="#completed">완료한 일</a>
+          </li>
+        </ul>
+      </div>
     </main>
   </div>
 </body>

src/App.js

@@ -3,36 +3,75 @@ import TodoCount from './components/TodoCount.js';
 import TodoList from './components/TodoList.js';
 import Component from './core/component.js';
 import State from './core/State.js';
-import { $ } from './utils/utils.js';
+import { FILTER_TYPES, STORAGE_KEY } from './utils/constants.js';
+import { $, setLocalStorageItem, getLocalStorageItem } from './utils/utils.js';
 
 export default class App extends Component {
   setState() {
-    this.todoList = new State([]);
+    this.todoList = new State(getLocalStorageItem(STORAGE_KEY.TODO) || []);
+    this.filteredTodoList = new State(null);
+    this.filterState = new State('all');
   }
 
   render() {
     this.mountChildren();
+    this.mountTodoList();
+  }
+
+  setFilteredTodoList() {
+    const filterTodo = Object.freeze({
+      [FILTER_TYPES.ALL]: this.viewAllTodo.bind(this),
+      [FILTER_TYPES.ACTIVE]: this.viewActiveTodo.bind(this),
+      [FILTER_TYPES.COMPLETED]: this.viewCompletedTodo.bind(this),
+    });
+    filterTodo[this.filterState.get()]();
+    // this.todoListView.setState(this.filteredTodoList.get());
+    // this.todoListView.render();
+    this.renderComponent(this.todoListView);
+    this.renderComponent(this.todoCountView);
+    this.todoCountView.setState(this.filteredTodoList.get());
+    this.todoCountView.render();
+  }
+
+  renderComponent(view) {
+    view.setState(this.filteredTodoList.get());
+    view.render();
+  }
+
+  viewAllTodo() {
+    this.filteredTodoList.set(this.todoList.get());
+  }
+
+  viewActiveTodo() {
+    const activeTodo = this.todoList.get().filter((todo) => todo.checked === false);
+    this.filteredTodoList.set(activeTodo);
+  }
+
+  viewCompletedTodo() {
+    const completedTodo = this.todoList.get().filter((todo) => todo.checked === true);
+    this.filteredTodoList.set(completedTodo);
   }
 
   mountChildren() {
     new NewTodoInput($('#new-todo-title'), {
       todoList: this.todoList,
       onSubmitTodo: this.mountTodoList.bind(this),
     });
-
-    this.todoCountView = new TodoCount($('.count-container'), {
-      todoList: this.todoList,
-    });
   }
 
   mountTodoList() {
     this.todoListView = new TodoList($('#todo-list'), {
-      todoList: this.todoList,
+      todoList: this.filteredTodoList.get() === null ? this.todoList.get() : this.filteredTodoList.get(),
       checkTodo: this.checkTodo.bind(this),
       deleteTodo: this.deleteTodo.bind(this),
       editTodo: this.editTodo.bind(this),
     });
-    this.todoCountView.render();
+
+    this.todoCountView = new TodoCount($('.count-container'), {
+      todoList: this.filteredTodoList.get() === null ? this.todoList.get() : this.filteredTodoList.get(),
+      filterState: this.filterState,
+      onClickTodoRender: this.setFilteredTodoList.bind(this),
+    });
   }
 
   checkTodo(id) {
@@ -44,22 +83,26 @@ export default class App extends Component {
       return todo;
     });
     this.todoList.set([...todoList]);
+    setLocalStorageItem(STORAGE_KEY, todoList);
   }
 
   deleteTodo(id) {
     const todoList = this.todoList.get().filter((todo) => todo.id !== id);
+    setLocalStorageItem(STORAGE_KEY.TODO, todoList);
     this.todoList.set([...todoList]);
     this.todoCountView.render();
   }
 
   editTodo(id, value) {
-    this.todoList.get().map((todo) => {
+    const todoList = this.todoList.get().map((todo) => {
       if (todo.id === id) {
         todo.todo = value;
         return todo;
       }
       return todo;
     });
+    setLocalStorageItem(STORAGE_KEY.TODO, todoList);
+    this.todoList.set([...todoList]);
     this.todoListView.render();
   }
 }

src/components/NewTodoInput.js

@@ -1,4 +1,6 @@
 import Component from '../core/component.js';
+import { STORAGE_KEY } from '../utils/constants.js';
+import { setLocalStorageItem } from '../utils/utils.js';
 
 export default class NewTodoInput extends Component {
   bindEvents() {
@@ -18,5 +20,6 @@ export default class NewTodoInput extends Component {
       checked: false,
     });
     this.props.todoList.set(todoList);
+    setLocalStorageItem(STORAGE_KEY.TODO, todoList);
   }
 }

src/components/TodoCount.js

@@ -1,20 +1,39 @@
 import Component from '../core/component.js';
+import { FILTER_TYPES, TODO_BUTTONS } from '../utils/constants.js';
+import { $, $$ } from '../utils/utils.js';
 
 export default class TodoCount extends Component {
+  setState(newState) {
+    this.todoList = newState || this.props.todoList;
+  }
+
   render() {
-    this.$target.innerHTML = `
-      <span class="todo-count">총 <strong>${this.props.todoList.get().length}</strong> 개</span>
-      <ul class="filters">
-        <li>
-          <a class="all selected" href="#">전체보기</a>
-        </li>
-        <li>
-          <a class="active" href="#active">해야할 일</a>
-        </li>
-        <li>
-          <a class="completed" href="#completed">완료한 일</a>
-        </li>
-      </ul>
-    `;
+    $('.todo-count').innerHTML = `총 <strong>${this.todoList.length}</strong> 개`;
+  }
+
+  bindEvents() {
+    $('.filters').addEventListener('click', ({ target }) => {
+      if (target.classList.contains(FILTER_TYPES.ALL)) {
+        this.props.filterState.set(FILTER_TYPES.ALL);
+        this.selectFilterTypeBtn(FILTER_TYPES.ALL);
+      }
+      if (target.classList.contains(FILTER_TYPES.ACTIVE)) {
+        this.props.filterState.set(FILTER_TYPES.ACTIVE);
+        this.selectFilterTypeBtn(FILTER_TYPES.ACTIVE);
+      }
+      if (target.classList.contains(FILTER_TYPES.COMPLETED)) {
+        this.props.filterState.set(FILTER_TYPES.COMPLETED);
+        this.selectFilterTypeBtn(FILTER_TYPES.COMPLETED);
+      }
+      this.props.onClickTodoRender();
+    });
+  }
+
+  selectFilterTypeBtn(type) {
+    $$('a', $('.filters')).forEach((tag) => {
+      tag.classList.remove(TODO_BUTTONS.SELECTED);
+    });
+
+    $(`.${type}`, $('.filters')).classList.add(TODO_BUTTONS.SELECTED);
   }
 }

src/components/TodoList.js

@@ -3,18 +3,25 @@ import { $, $$ } from '../utils/utils.js';
 import { TODO_BUTTONS } from '../utils/constants.js';
 
 export default class TodoList extends Component {
+  setState(newState) {
+    this.todoList = newState || this.props.todoList;
+  }
+
   render() {
-    const todoList = this.props.todoList
-      .get()
-      .reduce((html, { id, todo }) => (html += this.renderTodo({ id, todo })), '');
+    console.log(this.todoList);
+    const todoList = this.todoList.reduce(
+      (html, { id, todo, checked }) => (html += this.renderTodo({ id, todo, checked })),
+      '',
+    );
     this.$target.innerHTML = todoList;
   }
 
-  renderTodo({ id, todo }) {
+  renderTodo({ id, todo, checked }) {
+    const checkTodo = checked ? 'completed' : '';
     return `
-      <li class="todo" data-id=${id}>
+      <li class="todo ${checkTodo}" data-id=${id}>
         <div class="view">
-          <input class="toggle" type="checkbox" data-id=${id} />
+          ${this.checkCheckbox(id, checked)}
           <label class="label">${todo}</label>
           <button class="destroy" data-id=${id}></button>
         </div>
@@ -23,6 +30,12 @@ export default class TodoList extends Component {
     `;
   }
 
+  checkCheckbox(id, checked) {
+    return checked
+      ? `<input class="toggle" type="checkbox" data-id=${id} checked />`
+      : `<input class="toggle" type="checkbox" data-id=${id} />`;
+  }
+
   bindEvents() {
     $$('.todo').forEach((item) => {
       item.addEventListener('click', ({ target }) => {
@@ -31,6 +44,7 @@ export default class TodoList extends Component {
         if (classList.contains(TODO_BUTTONS.TOGGLE)) {
           target.closest('.todo').classList.toggle('completed');
           this.props.checkTodo(targetId);
+          console.log(targetId);
         }
 
         if (classList.contains(TODO_BUTTONS.DESTROY)) {

src/utils/constants.js

@@ -1,10 +1,21 @@
-const TODO_BUTTONS = {
+const TODO_BUTTONS = Object.freeze({
   TOGGLE: 'toggle',
   LABEL: 'label',
   DESTROY: 'destroy',
   EDIT: 'edit',
   EDITING: 'editing',
   COMPLETED: 'completed',
-};
+  SELECTED: 'selected',
+});
 
-export { TODO_BUTTONS };
+const FILTER_TYPES = Object.freeze({
+  ALL: 'all',
+  ACTIVE: 'active',
+  COMPLETED: 'completed',
+});
+
+const STORAGE_KEY = Object.freeze({
+  TODO: 'todoList',
+});
+
+export { TODO_BUTTONS, FILTER_TYPES, STORAGE_KEY };

src/utils/utils.js

@@ -1,4 +1,9 @@
-const $ = (selector) => document.querySelector(selector);
-const $$ = (selector) => document.querySelectorAll(selector);
+const $ = (selector, tag = document) => tag.querySelector(selector);
+const $$ = (selector, tag = document) => tag.querySelectorAll(selector);
+const setLocalStorageItem = (key, value) => localStorage.setItem(key, JSON.stringify(value));
+const getLocalStorageItem = (key) => {
+  const todoList = localStorage.getItem(key);
+  return JSON.parse(todoList);
+};
 
-export { $, $$ };
+export { $, $$, setLocalStorageItem, getLocalStorageItem };