-
+ `
+
+
From e5fe50f21ede5b551ca255da16f073fd0cae69c5 Mon Sep 17 00:00:00 2001
From: ink-0 <71919983+ink-0@users.noreply.github.com>
Date: Wed, 14 Jul 2021 16:30:28 +0900
Subject: [PATCH 10/20] =?UTF-8?q?[week1]=20TodoList=20Edit=20=EA=B5=AC?=
=?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- ink-0/js-todo-list-step1/#8
---
src/js/TodoApp.js | 23 ++++++++++++++----
src/js/TodoList.js | 58 ++++++++++++++++++++++++++++++++++++++--------
2 files changed, 67 insertions(+), 14 deletions(-)
diff --git a/src/js/TodoApp.js b/src/js/TodoApp.js
index 5883d477..c8fd5c98 100644
--- a/src/js/TodoApp.js
+++ b/src/js/TodoApp.js
@@ -7,13 +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: '',
},
@@ -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,
+ });
+ };
}
diff --git a/src/js/TodoList.js b/src/js/TodoList.js
index ee90a9a3..a9cbd07b 100644
--- a/src/js/TodoList.js
+++ b/src/js/TodoList.js
@@ -1,4 +1,10 @@
-export default function TodoList({ $app, initialState, onToggle, onDelete }) {
+export default function TodoList({
+ $app,
+ initialState,
+ onToggle,
+ onDelete,
+ onEdit,
+}) {
//렌더링할 DOM 생성
this.state = initialState;
@@ -15,15 +21,41 @@ export default function TodoList({ $app, initialState, onToggle, onDelete }) {
this.$target.addEventListener('click', (e) => {
const $node = e.target;
- const $viewnode = e.target.closest('.view');
- const { nodeId } = $viewnode.dataset;
-
- if ($node.className == 'toggle') {
+ if ($node.className === 'toggle') {
+ const $dataNode = e.target.closest('.view').parentNode;
+ const { nodeId } = $dataNode.dataset;
this.toggleTodoItem(parseInt(nodeId));
}
- if ($node.className == 'destroy') {
+ if ($node.className === 'destroy') {
+ const $dataNode = e.target.closest('.view').parentNode;
+ const { nodeId } = $dataNode.dataset;
this.deleteTodoItem(parseInt(nodeId));
}
+ //1) 엔터 누르면 셋스테이트 변경
+ //2) 이에스씨 누르면 그냥 종료
+ if ($node.className === 'edit') {
+ const $dataNode = e.target.parentNode;
+ const { nodeId } = $dataNode.dataset;
+ $node.addEventListener('keydown', (e) => {
+ if (e.keyCode === 13) {
+ this.editTodoItem(parseInt(nodeId), true, $node.value);
+ } else if (e.keyCode === 27) {
+ this.editTodoItem(parseInt(nodeId), false, '');
+ }
+ });
+ }
+ });
+
+ this.$target.addEventListener('dblclick', (e) => {
+ const $node = e.target;
+ if ($node.className !== 'edit') {
+ const $dataNode = e.target.closest('.view').parentNode;
+ const { nodeId } = $dataNode.dataset;
+
+ if ($node.className === 'label') {
+ this.editTodoItem(parseInt(nodeId), false, '');
+ }
+ }
});
this.toggleTodoItem = (nodeId) => {
onToggle(nodeId);
@@ -31,17 +63,23 @@ export default function TodoList({ $app, initialState, onToggle, onDelete }) {
this.deleteTodoItem = (nodeId) => {
onDelete(nodeId);
};
+ this.editTodoItem = (nodeId, isEdit, newContent) => {
+ onEdit(nodeId, isEdit, newContent);
+ };
this.render = () => {
- const todoTemplate = `${this.state
+ const todos = this.state;
+ const todoTemplate = `${todos
.map(
(todo, idx) =>
- `
-
+ `
+
-
+
`
)
.join('')}`;
From 56b3cfafe48310b8567cf5c75d15ca636694b8f3 Mon Sep 17 00:00:00 2001
From: ink-0 <71919983+ink-0@users.noreply.github.com>
Date: Wed, 14 Jul 2021 16:36:18 +0900
Subject: [PATCH 11/20] =?UTF-8?q?[week1]=20TodoList=20Edit=20=EA=B5=AC?=
=?UTF-8?q?=ED=98=84=20=EC=9D=BC=EB=B6=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- ink-0/js-todo-list-step1/#8
---
src/js/TodoList.js | 24 ++++++++++--------------
1 file changed, 10 insertions(+), 14 deletions(-)
diff --git a/src/js/TodoList.js b/src/js/TodoList.js
index a9cbd07b..b52091b0 100644
--- a/src/js/TodoList.js
+++ b/src/js/TodoList.js
@@ -5,10 +5,7 @@ export default function TodoList({
onDelete,
onEdit,
}) {
- //렌더링할 DOM 생성
-
this.state = initialState;
-
this.$target = document.createElement('ul');
this.$target.className = 'todo-list';
this.$target.id = 'todo-list';
@@ -21,21 +18,19 @@ export default function TodoList({
this.$target.addEventListener('click', (e) => {
const $node = e.target;
+
if ($node.className === 'toggle') {
- const $dataNode = e.target.closest('.view').parentNode;
- const { nodeId } = $dataNode.dataset;
+ const { nodeId } = e.target.closest('.view').parentNode.dataset;
this.toggleTodoItem(parseInt(nodeId));
}
+
if ($node.className === 'destroy') {
- const $dataNode = e.target.closest('.view').parentNode;
- const { nodeId } = $dataNode.dataset;
+ const { nodeId } = e.target.closest('.view').parentNode.dataset;
this.deleteTodoItem(parseInt(nodeId));
}
- //1) 엔터 누르면 셋스테이트 변경
- //2) 이에스씨 누르면 그냥 종료
+
if ($node.className === 'edit') {
- const $dataNode = e.target.parentNode;
- const { nodeId } = $dataNode.dataset;
+ const { nodeId } = e.target.parentNode.dataset;
$node.addEventListener('keydown', (e) => {
if (e.keyCode === 13) {
this.editTodoItem(parseInt(nodeId), true, $node.value);
@@ -48,15 +43,15 @@ export default function TodoList({
this.$target.addEventListener('dblclick', (e) => {
const $node = e.target;
- if ($node.className !== 'edit') {
- const $dataNode = e.target.closest('.view').parentNode;
- const { nodeId } = $dataNode.dataset;
+ if ($node.className !== 'edit') {
+ const { nodeId } = e.target.closest('.view').parentNode.dataset;
if ($node.className === 'label') {
this.editTodoItem(parseInt(nodeId), false, '');
}
}
});
+
this.toggleTodoItem = (nodeId) => {
onToggle(nodeId);
};
@@ -66,6 +61,7 @@ export default function TodoList({
this.editTodoItem = (nodeId, isEdit, newContent) => {
onEdit(nodeId, isEdit, newContent);
};
+
this.render = () => {
const todos = this.state;
const todoTemplate = `${todos
From 4fa6f1231ea6d5b92517d2276da369a0a73c2171 Mon Sep 17 00:00:00 2001
From: ink-0 <71919983+ink-0@users.noreply.github.com>
Date: Wed, 14 Jul 2021 17:51:57 +0900
Subject: [PATCH 12/20] =?UTF-8?q?[week1]=20TodoList=20=EB=A6=AC=ED=8C=A9?=
=?UTF-8?q?=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- ink-0/js-todo-list-step1/#8
---
src/js/TodoApp.js | 6 ++---
src/js/TodoCount.js | 3 ++-
src/js/TodoInput.js | 10 +++----
src/js/TodoList.js | 63 ++++++++++++++++++++++++---------------------
4 files changed, 43 insertions(+), 39 deletions(-)
diff --git a/src/js/TodoApp.js b/src/js/TodoApp.js
index c8fd5c98..1d5aaa13 100644
--- a/src/js/TodoApp.js
+++ b/src/js/TodoApp.js
@@ -9,13 +9,11 @@ export default function TodoApp($app) {
idx: 0,
content: 'hiEvery One',
state: '',
- edit: '',
},
{
idx: 1,
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),
});
diff --git a/src/js/TodoCount.js b/src/js/TodoCount.js
index b6b48c75..ee3dca48 100644
--- a/src/js/TodoCount.js
+++ b/src/js/TodoCount.js
@@ -11,8 +11,9 @@ export default function TodoCount({ $app, initialState }) {
};
this.render = () => {
+ const todoCount = this.state.length;
const todoCountTemplate = `
-
총 ${this.state} 개
+
총 ${todoCount} 개
-
전체보기
diff --git a/src/js/TodoInput.js b/src/js/TodoInput.js
index da421335..d388f13b 100644
--- a/src/js/TodoInput.js
+++ b/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 = () => {};
}
diff --git a/src/js/TodoList.js b/src/js/TodoList.js
index b52091b0..4c4bb9d6 100644
--- a/src/js/TodoList.js
+++ b/src/js/TodoList.js
@@ -10,56 +10,61 @@ export default function TodoList({
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;
if ($node.className === 'toggle') {
- const { nodeId } = e.target.closest('.view').parentNode.dataset;
- this.toggleTodoItem(parseInt(nodeId));
+ this.toggleTodoItem($node);
}
-
if ($node.className === 'destroy') {
- const { nodeId } = e.target.closest('.view').parentNode.dataset;
- this.deleteTodoItem(parseInt(nodeId));
+ this.deleteTodoItem($node);
}
if ($node.className === 'edit') {
- const { nodeId } = e.target.parentNode.dataset;
- $node.addEventListener('keydown', (e) => {
- if (e.keyCode === 13) {
- this.editTodoItem(parseInt(nodeId), true, $node.value);
- } else if (e.keyCode === 27) {
- this.editTodoItem(parseInt(nodeId), false, '');
- }
- });
+ this.editTodoItem($node);
}
});
- this.$target.addEventListener('dblclick', (e) => {
+ $nodeTodoList.addEventListener('dblclick', (e) => {
const $node = e.target;
-
- if ($node.className !== 'edit') {
- const { nodeId } = e.target.closest('.view').parentNode.dataset;
- if ($node.className === 'label') {
- this.editTodoItem(parseInt(nodeId), false, '');
- }
- }
+ this.editTodoItem($node);
});
- this.toggleTodoItem = (nodeId) => {
- onToggle(nodeId);
+ this.toggleTodoItem = ($node) => {
+ const { nodeId } = $node.closest('.view').parentNode.dataset;
+ onToggle(parseInt(nodeId));
};
- this.deleteTodoItem = (nodeId) => {
- onDelete(nodeId);
+
+ this.deleteTodoItem = ($node) => {
+ const { nodeId } = $node.closest('.view').parentNode.dataset;
+ onDelete(parseInt(nodeId));
};
- this.editTodoItem = (nodeId, isEdit, newContent) => {
- onEdit(nodeId, isEdit, newContent);
+
+ 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 = () => {
@@ -79,6 +84,6 @@ export default function TodoList({
`
)
.join('')}`;
- this.$target.innerHTML = todoTemplate;
+ $nodeTodoList.innerHTML = todoTemplate;
};
}
From 15c4aab8877bdb7a8e2c9ebc6b2849e8e9007833 Mon Sep 17 00:00:00 2001
From: ink-0 <71919983+ink-0@users.noreply.github.com>
Date: Thu, 15 Jul 2021 00:14:41 +0900
Subject: [PATCH 13/20] =?UTF-8?q?[week1]=20TodoFilter=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 상태 추가 filterTodoes, isFilter, todoesCount
- component 네이밍 변경 TodoCount -> TodoFilter
- ink-0/js-todo-list-step1/#10
---
index.html | 48 ---------------------------
src/js/TodoApp.js | 49 ++++++++++++++++++++++++----
src/js/TodoCount.js | 30 -----------------
src/js/components/TodoFilter.js | 45 +++++++++++++++++++++++++
src/js/{ => components}/TodoInput.js | 0
src/js/{ => components}/TodoItem.js | 0
src/js/{ => components}/TodoList.js | 6 ++--
7 files changed, 91 insertions(+), 87 deletions(-)
delete mode 100644 src/js/TodoCount.js
create mode 100644 src/js/components/TodoFilter.js
rename src/js/{ => components}/TodoInput.js (100%)
rename src/js/{ => components}/TodoItem.js (100%)
rename src/js/{ => components}/TodoList.js (93%)
diff --git a/index.html b/index.html
index 93db2800..f5cacfa8 100644
--- a/index.html
+++ b/index.html
@@ -15,56 +15,8 @@
TODOS
-
-
-
-
-
-
-
-
-
-
-
-
-
- `
+ `
+
+
+
+
+
+
+ `
)
.join('')}`;
$nodeTodoList.innerHTML = todoTemplate;
diff --git a/src/utils/const.js b/src/utils/const.js
new file mode 100644
index 00000000..1ca79de0
--- /dev/null
+++ b/src/utils/const.js
@@ -0,0 +1,19 @@
+export const FILTER_TYPES = {
+ ALL: 'FILTER_TYPES.ALL',
+ COMPLETE: 'completed',
+ ACTIVE: 'active',
+};
+
+export const TODO_ITEM_CLASS = {
+ TOGGLE: 'toggle',
+ DESTROY: 'destroy',
+ EDIT: 'edit',
+ LABEL: 'label',
+ VIEW: 'view',
+};
+
+export const TODO_FILTER_MENU = {
+ ALL_MENU: '전체보기',
+ ACTIVE_MENU: '해야할 일',
+ COMPLETE_MENU: '완료한 일',
+};
From 102b581abed8d324f081411530f18eae959be46e Mon Sep 17 00:00:00 2001
From: ink-0 <71919983+ink-0@users.noreply.github.com>
Date: Thu, 15 Jul 2021 03:03:49 +0900
Subject: [PATCH 15/20] =?UTF-8?q?[week1]=20TodoFilter=20CSS=20=EC=A1=B0?=
=?UTF-8?q?=EA=B1=B4=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 그외 const 대치 안한 것 수정
- ink-0/js-todo-list-step1/#12
---
index.html | 8 +++++++-
src/js/TodoApp.js | 9 ++++-----
src/js/components/TodoFilter.js | 24 +++++++++++++++---------
src/js/components/TodoList.js | 7 ++++---
src/utils/const.js | 2 +-
5 files changed, 31 insertions(+), 19 deletions(-)
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/src/js/TodoApp.js b/src/js/TodoApp.js
index e7651b3c..8d7ddb01 100644
--- a/src/js/TodoApp.js
+++ b/src/js/TodoApp.js
@@ -18,7 +18,7 @@ export default function TodoApp($app) {
},
],
todoesFiltered: [],
- isFilter: false,
+ filterState: FILTER_TYPES.ALL,
todoesCount: '0',
};
@@ -114,11 +114,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 +128,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 +138,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..98ead71e 100644
--- a/src/js/components/TodoFilter.js
+++ b/src/js/components/TodoFilter.js
@@ -14,10 +14,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 +25,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..1dbf1409 100644
--- a/src/js/components/TodoList.js
+++ b/src/js/components/TodoList.js
@@ -72,8 +72,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(
@@ -89,7 +90,7 @@ export default function TodoList({
-
+
`
)
.join('')}`;
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',
};
From c70cb015db16b85ebba60207bdd921c0d7aadfd8 Mon Sep 17 00:00:00 2001
From: ink-0 <71919983+ink-0@users.noreply.github.com>
Date: Mon, 19 Jul 2021 04:23:15 +0900
Subject: [PATCH 16/20] =?UTF-8?q?[week1]=20localStorage=20=EC=A0=81?=
=?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
-ink-0/js-todo-list-step1/#12
---
.vscode/settings.json | 3 +++
index.js | 2 ++
src/js/TodoApp.js | 30 +++++++++++++++++++++++++-----
src/js/components/TodoFilter.js | 7 +++++--
src/js/components/TodoList.js | 5 +++--
src/js/core/TodoLocalStore.js | 33 +++++++++++++++++++++++++++++++++
6 files changed, 71 insertions(+), 9 deletions(-)
create mode 100644 .vscode/settings.json
create mode 100644 src/js/core/TodoLocalStore.js
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.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 8d7ddb01..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,
@@ -21,6 +24,9 @@ export default function TodoApp($app) {
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,
});
diff --git a/src/js/components/TodoFilter.js b/src/js/components/TodoFilter.js
index 98ead71e..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';
diff --git a/src/js/components/TodoList.js b/src/js/components/TodoList.js
index 1dbf1409..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';
@@ -75,7 +77,6 @@ export default function TodoList({
const { todoes, filterState, todoesFiltered } = this.state;
const viewTodoes =
filterState === FILTER_TYPES.ALL ? todoes : todoesFiltered;
-
const todoTemplate = `${viewTodoes
.map(
(todo, idx) =>
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;
+ };
+}
From e45ba36e79c7bb865d59e51426a75307ffb59fd6 Mon Sep 17 00:00:00 2001
From: ink-0 <71919983+ink-0@users.noreply.github.com>
Date: Mon, 19 Jul 2021 16:46:24 +0900
Subject: [PATCH 17/20] [week2] GET userList
-ink-0/js-todo-list-step1/#14
---
index.html | 2 +-
index.js | 1 +
src/js/TodoApp.js | 19 ++++++++++---------
src/js/core/TodoLocalStore.js | 1 +
src/js/core/UserList.js | 15 +++++++++++++++
5 files changed, 28 insertions(+), 10 deletions(-)
create mode 100644 src/js/core/UserList.js
diff --git a/index.html b/index.html
index 18fdb6a1..7dd958b4 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
TOODOS
diff --git a/index.js b/index.js
index c4fff7ae..c9b12107 100644
--- a/index.js
+++ b/index.js
@@ -1,4 +1,5 @@
import TodoLocalStore from './src/js/core/TodoLocalStore.js';
+import userList from './src/js/core/UserList.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 8d9e1262..b1347b00 100644
--- a/src/js/TodoApp.js
+++ b/src/js/TodoApp.js
@@ -3,10 +3,9 @@ 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';
+import getUserList from './core/UserList.js';
export default function TodoApp($app) {
- // localStorage.clear();
-
const initialDtate = {
todoes: [
{
@@ -54,13 +53,6 @@ export default function TodoApp($app) {
onFilter: (filterType) => filterTodo(filterType),
});
- const init = () => {
- this.setState({
- ...this.state,
- });
- };
- init();
-
const addTodo = (addContent) => {
const { todoes } = this.state;
const nextIdx = Math.max(0, ...todoes.map((todo) => todo.idx)) + 1;
@@ -163,4 +155,13 @@ export default function TodoApp($app) {
});
}
};
+
+ const init = async () => {
+ this.setState({
+ ...this.state,
+ });
+ const a = await getUserList();
+ console.log(a);
+ };
+ init();
}
diff --git a/src/js/core/TodoLocalStore.js b/src/js/core/TodoLocalStore.js
index a11b8da4..2e557e46 100644
--- a/src/js/core/TodoLocalStore.js
+++ b/src/js/core/TodoLocalStore.js
@@ -1,3 +1,4 @@
+//아직 쓰이지 않음
import { FILTER_TYPES } from '../../utils/const.js';
export default function TodoLocalStore() {
this.setState = (nextState) => {
diff --git a/src/js/core/UserList.js b/src/js/core/UserList.js
new file mode 100644
index 00000000..a889c5c8
--- /dev/null
+++ b/src/js/core/UserList.js
@@ -0,0 +1,15 @@
+const getUserList = async () => {
+ const BASE_URL = 'https://js-todo-list-9ca3a.df.r.appspot.com';
+ try {
+ const res = await fetch(`${BASE_URL}/api/users`);
+ if (res.ok) {
+ // console.log('응답 josn', res.json());
+ return await res.json();
+ } else {
+ return null;
+ }
+ } catch (e) {
+ throw new Error(`오류가 생겼습니다 ${e.message}`);
+ }
+};
+export default getUserList;
From 360338a1627cb10f64f477ac912420de4731a528 Mon Sep 17 00:00:00 2001
From: ink-0 <71919983+ink-0@users.noreply.github.com>
Date: Mon, 19 Jul 2021 18:34:59 +0900
Subject: [PATCH 18/20] =?UTF-8?q?[week2]=20UserList=20UI=20=EC=83=9D?=
=?UTF-8?q?=EC=84=B1=20]=20-ink-0/js-todo-list-step1/#17?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 25 +++++++++++--------
index.js | 1 +
src/css/style.css | 40 ++++++++++++++++++++++++++++++
src/js/TodoApp.js | 17 +++++++++----
src/js/components/user/UserList.js | 36 +++++++++++++++++++++++++++
5 files changed, 103 insertions(+), 16 deletions(-)
create mode 100644 src/js/components/user/UserList.js
diff --git a/index.html b/index.html
index 7dd958b4..6b98146c 100644
--- a/index.html
+++ b/index.html
@@ -13,17 +13,20 @@
-