diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6b665aaa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/index.html b/index.html index f5cacfa8..18fdb6a1 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,13 @@
-

TODOS

+

+ TODOS +

diff --git a/index.js b/index.js index fbb77074..c4fff7ae 100644 --- a/index.js +++ b/index.js @@ -1,2 +1,4 @@ +import TodoLocalStore from './src/js/core/TodoLocalStore.js'; import TodoApp from './src/js/TodoApp.js'; +import { FILTER_TYPES } from './src/utils/const.js'; new TodoApp(document.querySelector('.App')); diff --git a/src/js/TodoApp.js b/src/js/TodoApp.js index e7651b3c..8d9e1262 100644 --- a/src/js/TodoApp.js +++ b/src/js/TodoApp.js @@ -1,10 +1,13 @@ import TodoFilter from './components/TodoFilter.js'; import TodoInput from './components/TodoInput.js'; import TodoList from './components/TodoList.js'; +import TodoLocalStore from './core/TodoLocalStore.js'; import { FILTER_TYPES } from '../utils/const.js'; export default function TodoApp($app) { - this.state = { + // localStorage.clear(); + + const initialDtate = { todoes: [ { idx: 0, @@ -18,9 +21,12 @@ export default function TodoApp($app) { }, ], todoesFiltered: [], - isFilter: false, + filterState: FILTER_TYPES.ALL, todoesCount: '0', }; + const localData = JSON.parse(localStorage.getItem('state')); + const viewData = localData ? localData : initialDtate; + this.state = viewData; this.setState = (nextState) => { this.state = nextState; @@ -44,7 +50,7 @@ export default function TodoApp($app) { }); const todoFilter = new TodoFilter({ $app, - initialState: this.state, + onFilter: (filterType) => filterTodo(filterType), }); @@ -65,7 +71,9 @@ export default function TodoApp($app) { edit: '', }; todoes.push(newTodo); - + localStorage.clear(); + localStorage.setItem('state', JSON.stringify({ ...this.state })); + this.state = JSON.parse(localStorage.getItem('state')); this.setState({ ...this.state, }); @@ -79,6 +87,9 @@ export default function TodoApp($app) { todo.state = todo.state === '' ? FILTER_TYPES.COMPLETE : ''; } }); + localStorage.clear(); + localStorage.setItem('state', JSON.stringify({ ...this.state })); + this.state = JSON.parse(localStorage.getItem('state')); this.setState({ ...this.state, }); @@ -90,9 +101,12 @@ export default function TodoApp($app) { const resetTodoes = todoes.filter((todo) => { return todo.idx !== idx; }); - + this.state['todoes'] = resetTodoes; + localStorage.clear(); + localStorage.setItem('state', JSON.stringify({ ...this.state })); + this.state = JSON.parse(localStorage.getItem('state')); this.setState({ - todoes: resetTodoes, + ...this.state, }); }; @@ -107,6 +121,12 @@ export default function TodoApp($app) { } } }); + localStorage.clear(); + localStorage.setItem('state', JSON.stringify({ ...this.state })); + this.state = JSON.parse(localStorage.getItem('state')); + this.setState({ + ...this.state, + }); this.setState({ ...this.state, }); @@ -114,11 +134,10 @@ export default function TodoApp($app) { const filterTodo = (filterType) => { const { todoes } = this.state; - if (filterType === FILTER_TYPES.ALL) { this.setState({ ...this.state, - isFilter: false, + filterState: FILTER_TYPES.ALL, todoesCount: todoes.length, }); } else if (filterType === FILTER_TYPES.COMPLETE) { @@ -129,7 +148,7 @@ export default function TodoApp($app) { this.setState({ ...this.state, todoesFiltered: completedTodoes, - isFilter: true, + filterState: FILTER_TYPES.COMPLETE, todoesCount: completedTodoes.length, }); } else if (filterType === FILTER_TYPES.ACTIVE) { @@ -139,7 +158,7 @@ export default function TodoApp($app) { this.setState({ ...this.state, todoesFiltered: activeTodoes, - isFilter: true, + filterState: FILTER_TYPES.ACTIVE, todoesCount: activeTodoes.length, }); } diff --git a/src/js/components/TodoFilter.js b/src/js/components/TodoFilter.js index f52b5ff1..2ee42498 100644 --- a/src/js/components/TodoFilter.js +++ b/src/js/components/TodoFilter.js @@ -1,6 +1,9 @@ +import TodoLocalStore from '../core/TodoLocalStore.js'; import { FILTER_TYPES, TODO_FILTER_MENU } from '../../utils/const.js'; -export default function TodoFilter({ $app, initialState, onFilter }) { - this.state = initialState; +export default function TodoFilter({ $app, onFilter }) { + // const todoLocalStore = new TodoLocalStore(); + // this.state = todoLocalStore.getItems(); + this.state = localStorage.getItem('state'); this.$target = document.createElement('div'); this.$target.className = 'count-container'; @@ -14,10 +17,10 @@ export default function TodoFilter({ $app, initialState, onFilter }) { $nodeTodoFilter.addEventListener('click', (e) => { const $node = e.target; - - if ($node.className === FILTER_TYPES.COMPLETE) { + const nodeClass = $node.className.trim(); + if (nodeClass === FILTER_TYPES.COMPLETE) { onFilter(FILTER_TYPES.COMPLETE); - } else if ($node.className === FILTER_TYPES.ACTIVE) { + } else if (nodeClass === FILTER_TYPES.ACTIVE) { onFilter(FILTER_TYPES.ACTIVE); } else { onFilter(FILTER_TYPES.ALL); @@ -25,20 +28,26 @@ export default function TodoFilter({ $app, initialState, onFilter }) { }); this.render = () => { - const { todoes, isFilter, todoesFiltered } = this.state; - - const todoTotalCount = isFilter ? todoesFiltered.length : todoes.length; + const { todoes, todoesFiltered, filterState } = this.state; + const todoTotalCount = + filterState === FILTER_TYPES.ALL ? todoes.length : todoesFiltered.length; const todoFilterTemplate = ` 총 ${todoTotalCount} 개 `; $nodeTodoFilter.innerHTML = todoFilterTemplate; diff --git a/src/js/components/TodoList.js b/src/js/components/TodoList.js index a25c6601..11a3c807 100644 --- a/src/js/components/TodoList.js +++ b/src/js/components/TodoList.js @@ -1,4 +1,6 @@ +import TodoLocalStore from '../core/TodoLocalStore.js'; import { FILTER_TYPES, TODO_ITEM_CLASS } from '../../utils/const.js'; + export default function TodoList({ $app, initialState, @@ -6,7 +8,7 @@ export default function TodoList({ onDelete, onEdit, }) { - this.state = initialState; + this.state = JSON.parse(localStorage.getItem('state')); this.$target = document.createElement('ul'); this.$target.className = 'todo-list'; this.$target.id = 'todo-list'; @@ -72,9 +74,9 @@ export default function TodoList({ }; this.render = () => { - const { todoes, isFilter, todoesFiltered } = this.state; - const viewTodoes = isFilter ? todoesFiltered : todoes; - + const { todoes, filterState, todoesFiltered } = this.state; + const viewTodoes = + filterState === FILTER_TYPES.ALL ? todoes : todoesFiltered; const todoTemplate = `${viewTodoes .map( (todo, idx) => @@ -89,7 +91,7 @@ export default function TodoList({
- + ` ) .join('')}`; diff --git a/src/js/core/TodoLocalStore.js b/src/js/core/TodoLocalStore.js new file mode 100644 index 00000000..a11b8da4 --- /dev/null +++ b/src/js/core/TodoLocalStore.js @@ -0,0 +1,33 @@ +import { FILTER_TYPES } from '../../utils/const.js'; +export default function TodoLocalStore() { + this.setState = (nextState) => { + this.state = nextState; + }; + this.setItems = (newState) => { + this.state = { ...this.state, ...newState }; + // localStorage.clear(); + // localStorage.removeItem('state'); + localStorage.setItem('state', JSON.stringify(this.state)); + }; + this.getItems = () => { + const initialDtate = { + todoes: [ + { + idx: 0, + content: 'Hi Every One', + state: '', + }, + { + idx: 1, + content: 'Im Tami', + state: '', + }, + ], + todoesFiltered: [], + filterState: FILTER_TYPES.ALL, + todoesCount: '0', + }; + const localData = JSON.parse(localStorage.getItem('state')); + return localData ? localData : initialDtate; + }; +} diff --git a/src/utils/const.js b/src/utils/const.js index 1ca79de0..4df252da 100644 --- a/src/utils/const.js +++ b/src/utils/const.js @@ -1,5 +1,5 @@ export const FILTER_TYPES = { - ALL: 'FILTER_TYPES.ALL', + ALL: 'all', COMPLETE: 'completed', ACTIVE: 'active', };