From 8b5d289f729585488aa4069a1bda81013a800afc Mon Sep 17 00:00:00 2001 From: soonysoo Date: Wed, 14 Jul 2021 17:43:52 +0900 Subject: [PATCH 01/17] =?UTF-8?q?=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8?= =?UTF-8?q?=EA=B5=AC=EC=A1=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/api/api.js | 22 ++++++++++++++++++++++ src/js/constants/constants.js | 0 src/js/index.js | 10 +++++----- 3 files changed, 27 insertions(+), 5 deletions(-) create mode 100644 src/js/api/api.js create mode 100644 src/js/constants/constants.js diff --git a/src/js/api/api.js b/src/js/api/api.js new file mode 100644 index 00000000..e9cd8e09 --- /dev/null +++ b/src/js/api/api.js @@ -0,0 +1,22 @@ +const BASE_URL = 'https://js-todo-list-9ca3a.df.r.appspot.com/api/users'; + + +export const userAPI = { + getAllUser(){ + return fetch(BASE_URL).then(data => data.json()); + }, + getDeleteUser(id){ + return fetch(`${BASE_URL}/${id}`,HTTP_REQUEST.DELETE) + }, + getAddUser(data){ + + }, + getUser(id){ + + } +} + + +export const todoAPI = { + +} \ No newline at end of file diff --git a/src/js/constants/constants.js b/src/js/constants/constants.js new file mode 100644 index 00000000..e69de29b diff --git a/src/js/index.js b/src/js/index.js index a77c3719..0cabb9c0 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -1,7 +1,7 @@ -const onUserCreateHandler = () => { - const userName = prompt("추가하고 싶은 이름을 입력해주세요."); -} +// const onUserCreateHandler = () => { +// const userName = prompt("추가하고 싶은 이름을 입력해주세요."); +// } -const userCreateButton = document.querySelector('.user-create-button') -userCreateButton.addEventListener('click', onUserCreateHandler) +// const userCreateButton = document.querySelector('.user-create-button') +// userCreateButton.addEventListener('click', onUserCreateHandler) From 790eb72661e0bab95a8341015d40d4faa495a9ca Mon Sep 17 00:00:00 2001 From: soonysoo Date: Wed, 14 Jul 2021 17:44:08 +0900 Subject: [PATCH 02/17] =?UTF-8?q?=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20?= =?UTF-8?q?=EA=B5=AC=EC=A1=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/App.js | 0 src/js/api/util.js | 19 +++++++++++++++++++ src/js/util/util.js | 4 ++++ 3 files changed, 23 insertions(+) create mode 100644 src/js/App.js create mode 100644 src/js/api/util.js create mode 100644 src/js/util/util.js diff --git a/src/js/App.js b/src/js/App.js new file mode 100644 index 00000000..e69de29b diff --git a/src/js/api/util.js b/src/js/api/util.js new file mode 100644 index 00000000..8e706e2d --- /dev/null +++ b/src/js/api/util.js @@ -0,0 +1,19 @@ +const HTTP_REQUEST ={ + POST(data){ + return { + method : "POST", + } + }, + DELETE(){ + return { + method : "DELETE", + } + }, + PUT(data){ + return { + method : "PUT", + } + } +} + +export {HTTP_REQUEST}; \ No newline at end of file diff --git a/src/js/util/util.js b/src/js/util/util.js new file mode 100644 index 00000000..ec1e7c80 --- /dev/null +++ b/src/js/util/util.js @@ -0,0 +1,4 @@ +const $ = (selector) => document.querySelector(selector); +const $$ = (selector) => document.querySelectorAll(selector); + +export {$, $$}; \ No newline at end of file From 65d1d745c936c0ca45a7339ca8d16dcb8b7d7ca4 Mon Sep 17 00:00:00 2001 From: soonysoo Date: Wed, 14 Jul 2021 19:28:38 +0900 Subject: [PATCH 03/17] =?UTF-8?q?api=20=EA=B8=B0=EB=8A=A5=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 --- src/js/api/api.js | 34 ++++++++++++++++++++++++++++------ src/js/api/util.js | 8 ++++++++ 2 files changed, 36 insertions(+), 6 deletions(-) diff --git a/src/js/api/api.js b/src/js/api/api.js index e9cd8e09..d9fa31fa 100644 --- a/src/js/api/api.js +++ b/src/js/api/api.js @@ -1,3 +1,5 @@ +import { HTTP_REQUEST } from "./util"; + const BASE_URL = 'https://js-todo-list-9ca3a.df.r.appspot.com/api/users'; @@ -5,18 +7,38 @@ export const userAPI = { getAllUser(){ return fetch(BASE_URL).then(data => data.json()); }, - getDeleteUser(id){ - return fetch(`${BASE_URL}/${id}`,HTTP_REQUEST.DELETE) + deleteUser(id){ + return fetch(`${BASE_URL}/${id}`,HTTP_REQUEST.DELETE); }, - getAddUser(data){ - + addUser(data){ + return fetch(`${BASE_URL}`,HTTP_REQUEST.POST(data)); }, getUser(id){ - + return fetch(`${BASE_URL}/${id}`).then(data =>{data.json()}); } } export const todoAPI = { - + getTodoItem(id){ + return fetch(`${BASE_URL}/${id}/items/`).then(data => data.json); + }, + addTodoItem(id, item){ + return fetch(`${BASE_URL}/${id}/items/`, HTTP_REQUEST.POST(item)); + }, + deleteAllTodoItem(id){ + return fetch(`${BASE_URL}/${id}/ items/`,HTTP_REQUEST.DELETE); + }, + deleteTodoItem(userId, itemId){ + return fetch(`${BASE_URL}/${userId}/ items/${itemId}`,HTTP_REQUEST.DELETE); + }, + updateTodoItem(userId, itemId, newItem){ + return fetch(`${BASE_URL}/${userId}/items/${itemId}`, HTTP_REQUEST.PUT(newItem)); + }, + updateTodoPriority(userId, itemId, priority){ + return fetch(`${BASE_URL}/${userId}/items/${itemId}/`, HTTP_REQUEST.PUT(priority)); + }, + toggleTodoItem(userId, itemId){ + return fetch(`${BASE_URL}/${userId}/items/${itemId}`, HTTP_REQUEST.PUT) + } } \ No newline at end of file diff --git a/src/js/api/util.js b/src/js/api/util.js index 8e706e2d..215f0711 100644 --- a/src/js/api/util.js +++ b/src/js/api/util.js @@ -2,6 +2,10 @@ const HTTP_REQUEST ={ POST(data){ return { method : "POST", + headers:{ + 'Content-Type' :'application/json;charset=uft-8' + }, + body: JSON.stringify(data) } }, DELETE(){ @@ -12,6 +16,10 @@ const HTTP_REQUEST ={ PUT(data){ return { method : "PUT", + headers :{ + 'Content-Type' :'application/json' + }, + body:JSON.stringify(data) } } } From cbdf87f6d83caaac8073d4b5bee9f0caa57d2352 Mon Sep 17 00:00:00 2001 From: soonysoo Date: Thu, 15 Jul 2021 09:57:59 +0900 Subject: [PATCH 04/17] =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 6 +++--- src/js/App.js | 37 ++++++++++++++++++++++++++++++++++ src/js/api/api.js | 10 ++++----- src/js/component/Title.js | 17 ++++++++++++++++ src/js/component/TodoFilter.js | 17 ++++++++++++++++ src/js/component/TodoInput.js | 17 ++++++++++++++++ src/js/component/TodoList.js | 17 ++++++++++++++++ src/js/component/UserList.js | 17 ++++++++++++++++ src/js/core/component.js | 20 ++++++++++++++++++ src/js/{index.js => main.js} | 6 ++++++ 10 files changed, 156 insertions(+), 8 deletions(-) create mode 100644 src/js/component/Title.js create mode 100644 src/js/component/TodoFilter.js create mode 100644 src/js/component/TodoInput.js create mode 100644 src/js/component/TodoList.js create mode 100644 src/js/component/UserList.js create mode 100644 src/js/core/component.js rename src/js/{index.js => main.js} (66%) diff --git a/index.html b/index.html index 5b141dec..4931d12a 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@
-

+

- + diff --git a/src/js/App.js b/src/js/App.js index e69de29b..a79bbcdc 100644 --- a/src/js/App.js +++ b/src/js/App.js @@ -0,0 +1,37 @@ +import Component from "./core/component.js"; +import { Title } from "./component/Title.js" +import { TodoFilter } from "./component/TodoFilter.js"; +import { TodoInput } from "./component/TodoInput.js"; +import { UserList } from "./component/UserList.js"; +import { TodoList } from "./component/TodoList.js"; +import { userAPI, todoAPI } from "./api/api.js"; + +export default class App{ + $state; + constructor($target){ + this.$state = userAPI.getAllUser().then( + data =>data[0] + ); + init() + } + init(){ + console.log(this.$state) + } + + template(){ + + return ` +

ddd

+
+
+
+
+
+
+
    +
    +
    +
    + ` + } +} \ No newline at end of file diff --git a/src/js/api/api.js b/src/js/api/api.js index d9fa31fa..a198b118 100644 --- a/src/js/api/api.js +++ b/src/js/api/api.js @@ -1,20 +1,20 @@ -import { HTTP_REQUEST } from "./util"; +import { HTTP_REQUEST } from "./util.js"; const BASE_URL = 'https://js-todo-list-9ca3a.df.r.appspot.com/api/users'; export const userAPI = { getAllUser(){ - return fetch(BASE_URL).then(data => data.json()); + return fetch(BASE_URL).then(data => data.json()); }, deleteUser(id){ - return fetch(`${BASE_URL}/${id}`,HTTP_REQUEST.DELETE); + return fetch(`${BASE_URL}/${id}`,HTTP_REQUEST.DELETE); }, addUser(data){ - return fetch(`${BASE_URL}`,HTTP_REQUEST.POST(data)); + return fetch(`${BASE_URL}`,HTTP_REQUEST.POST(data)); }, getUser(id){ - return fetch(`${BASE_URL}/${id}`).then(data =>{data.json()}); + return fetch(`${BASE_URL}/${id}`).then(data =>{data.json()}); } } diff --git a/src/js/component/Title.js b/src/js/component/Title.js new file mode 100644 index 00000000..64208662 --- /dev/null +++ b/src/js/component/Title.js @@ -0,0 +1,17 @@ +import Component from "../core/component.js"; + +export class Title extends Component{ + setup($target,$props){ + + } + templete(){ + + } + mounted(){ + + } + setEvent(){ + + } + +} \ No newline at end of file diff --git a/src/js/component/TodoFilter.js b/src/js/component/TodoFilter.js new file mode 100644 index 00000000..e10b8ade --- /dev/null +++ b/src/js/component/TodoFilter.js @@ -0,0 +1,17 @@ +import Component from "../core/component.js"; + +export class TodoFilter extends Component{ + setup($target,$props){ + + } + templete(){ + + } + mounted(){ + + } + setEvent(){ + + } + +} \ No newline at end of file diff --git a/src/js/component/TodoInput.js b/src/js/component/TodoInput.js new file mode 100644 index 00000000..86489156 --- /dev/null +++ b/src/js/component/TodoInput.js @@ -0,0 +1,17 @@ +import Component from "../core/component.js"; + +export class TodoInput extends Component{ + setup($target,$props){ + + } + templete(){ + + } + mounted(){ + + } + setEvent(){ + + } + +} \ No newline at end of file diff --git a/src/js/component/TodoList.js b/src/js/component/TodoList.js new file mode 100644 index 00000000..250b5d95 --- /dev/null +++ b/src/js/component/TodoList.js @@ -0,0 +1,17 @@ +import Component from "../core/component.js"; + +export class TodoList extends Component{ + setup($target,$props){ + + } + templete(){ + + } + mounted(){ + + } + setEvent(){ + + } + +} \ No newline at end of file diff --git a/src/js/component/UserList.js b/src/js/component/UserList.js new file mode 100644 index 00000000..b2803150 --- /dev/null +++ b/src/js/component/UserList.js @@ -0,0 +1,17 @@ +import Component from "../core/component.js"; + +export class UserList extends Component{ + setup($target,$props){ + + } + templete(){ + + } + mounted(){ + + } + setEvent(){ + + } + +} \ No newline at end of file diff --git a/src/js/core/component.js b/src/js/core/component.js new file mode 100644 index 00000000..b80f0233 --- /dev/null +++ b/src/js/core/component.js @@ -0,0 +1,20 @@ +export default class Component { + $target; + $props; + $state; + constructor ($target, $props) { + this.$target = $target; + this.$props = $props; + this.setup(); + this.setEvent(); + this.render(); + } + setup () {}; + mounted () {}; + template () { return ''; } + render () { + this.$target.innerHTML = this.template(); + this.mounted(); + } + setEvent () {} + } \ No newline at end of file diff --git a/src/js/index.js b/src/js/main.js similarity index 66% rename from src/js/index.js rename to src/js/main.js index 0cabb9c0..7ea4745c 100644 --- a/src/js/index.js +++ b/src/js/main.js @@ -1,3 +1,9 @@ +import App from './App.js'; +import { userAPI, todoAPI } from "./api/api.js"; + +new App(document.querySelector('#app', userAPI, todoAPI)); + + // const onUserCreateHandler = () => { // const userName = prompt("추가하고 싶은 이름을 입력해주세요."); // } From 6d3315b3cb6c620cad0905aa8cd36b5129f75b75 Mon Sep 17 00:00:00 2001 From: soonysoo Date: Sun, 18 Jul 2021 18:57:14 +0900 Subject: [PATCH 05/17] initial data rendering --- index.html | 99 ++----------------------- src/js/App.js | 74 ++++++++++++------- src/js/api/api.js | 44 ++++++------ src/js/api/util.js | 4 +- src/js/component/Title.js | 37 ++++++---- src/js/component/TodoFilter.js | 54 +++++++++++--- src/js/component/TodoInput.js | 4 +- src/js/component/TodoList.js | 59 ++++++++++++--- src/js/component/UserList.js | 59 ++++++++++++--- src/js/constants/constants.js | 12 ++++ src/js/core/Observer.js | 5 ++ src/js/core/Subject.js | 13 ++++ src/js/core/component.js | 20 ------ src/js/main.js | 3 +- src/store/countState.js | 17 +++++ src/store/filterState.js | 18 +++++ src/store/selectedUserState.js | 15 ++++ src/store/todoState.js | 18 +++++ src/store/userState.js | 15 ++++ temp.html | 128 +++++++++++++++++++++++++++++++++ 20 files changed, 492 insertions(+), 206 deletions(-) create mode 100644 src/js/core/Observer.js create mode 100644 src/js/core/Subject.js delete mode 100644 src/js/core/component.js create mode 100644 src/store/countState.js create mode 100644 src/store/filterState.js create mode 100644 src/store/selectedUserState.js create mode 100644 src/store/todoState.js create mode 100644 src/store/userState.js create mode 100644 temp.html diff --git a/index.html b/index.html index 4931d12a..c8b20b0d 100644 --- a/index.html +++ b/index.html @@ -11,19 +11,12 @@
    - +
    +
    diff --git a/src/js/App.js b/src/js/App.js index a79bbcdc..8c573d22 100644 --- a/src/js/App.js +++ b/src/js/App.js @@ -1,4 +1,5 @@ -import Component from "./core/component.js"; +import { $, $$ } from "./util/util.js"; + import { Title } from "./component/Title.js" import { TodoFilter } from "./component/TodoFilter.js"; import { TodoInput } from "./component/TodoInput.js"; @@ -6,32 +7,57 @@ import { UserList } from "./component/UserList.js"; import { TodoList } from "./component/TodoList.js"; import { userAPI, todoAPI } from "./api/api.js"; +import UserState from "../store/userState.js"; +import TodoState from "../store/todoState.js"; +import FilterState from "../store/FilterState.js"; +import SelectedUserState from "../store/SelectedUserState.js"; +import CountState from "../store/countState.js"; + export default class App{ - $state; - constructor($target){ - this.$state = userAPI.getAllUser().then( - data =>data[0] - ); - init() + constructor(){ + this.selectedUserState = new SelectedUserState; + //console.log(this.selectedUserState); + this.userState = new UserState; + this.todoState = new TodoState; + this.filterState = new FilterState; + //this.countState = new CountState; + this.init(); } init(){ - console.log(this.$state) - } + //conponent + this.title = new Title(this.selectedUserState); + this.userList = new UserList(this.userState, this.selectedUserState); + this.todoInput = new TodoInput(); + this.todoList = new TodoList(this.todoState); + this.todoFilter = new TodoFilter(this.todoState, this.filterState); + //subscribe + this.selectedUserState.subscribe(this.title); + this.selectedUserState.subscribe(this.userList); + this.selectedUserState.subscribe(this.todoFilter); + + + this.userState.subscribe(this.userList); + this.userState.subscribe(this.todoList); + this.userState.subscribe(this.todoFilter); + + this.todoState.subscribe(this.todoList); + this.todoState.subscribe(this.todoFilter); + + this.filterState.subscribe(this.todoList); + this.filterState.subscribe(this.todoFilter); + + //this.countState.subscribe(this.todoFilter); + //초기데이터 + const initData = userAPI.getAllUser().then( + data => { + this.userState.set(data); + this.selectedUserState.set(data[0]); + console.log(data[0]) + this.todoState.set(data[0].todoList); + + } + ) - template(){ - - return ` -

    ddd

    -
    -
    -
    -
    -
    -
    -
      -
      -
      -
      - ` } + } \ No newline at end of file diff --git a/src/js/api/api.js b/src/js/api/api.js index a198b118..5b249c2d 100644 --- a/src/js/api/api.js +++ b/src/js/api/api.js @@ -4,41 +4,41 @@ const BASE_URL = 'https://js-todo-list-9ca3a.df.r.appspot.com/api/users'; export const userAPI = { - getAllUser(){ - return fetch(BASE_URL).then(data => data.json()); + async getAllUser(){ + return await fetch(BASE_URL).then(data => data.json()); }, - deleteUser(id){ - return fetch(`${BASE_URL}/${id}`,HTTP_REQUEST.DELETE); + async deleteUser(id){ + return await fetch(`${BASE_URL}/${id}`,HTTP_REQUEST.DELETE); }, - addUser(data){ - return fetch(`${BASE_URL}`,HTTP_REQUEST.POST(data)); + async addUser(data){ + return await fetch(`${BASE_URL}`,HTTP_REQUEST.POST(data)); }, - getUser(id){ - return fetch(`${BASE_URL}/${id}`).then(data =>{data.json()}); + async getUser(id){ + return await fetch(`${BASE_URL}/${id}`).then(data =>{data.json()}); } } export const todoAPI = { - getTodoItem(id){ - return fetch(`${BASE_URL}/${id}/items/`).then(data => data.json); + async getTodoItem(id){ + return await fetch(`${BASE_URL}/${id}/items/`).then(data => data.json); }, - addTodoItem(id, item){ - return fetch(`${BASE_URL}/${id}/items/`, HTTP_REQUEST.POST(item)); + async addTodoItem(id, item){ + return await fetch(`${BASE_URL}/${id}/items/`, HTTP_REQUEST.POST(item)); }, - deleteAllTodoItem(id){ - return fetch(`${BASE_URL}/${id}/ items/`,HTTP_REQUEST.DELETE); + async deleteAllTodoItem(id){ + return await fetch(`${BASE_URL}/${id}/ items/`,HTTP_REQUEST.DELETE); }, - deleteTodoItem(userId, itemId){ - return fetch(`${BASE_URL}/${userId}/ items/${itemId}`,HTTP_REQUEST.DELETE); + async deleteTodoItem(userId, itemId){ + return await fetch(`${BASE_URL}/${userId}/ items/${itemId}`,HTTP_REQUEST.DELETE); }, - updateTodoItem(userId, itemId, newItem){ - return fetch(`${BASE_URL}/${userId}/items/${itemId}`, HTTP_REQUEST.PUT(newItem)); + async updateTodoItem(userId, itemId, newItem){ + return await fetch(`${BASE_URL}/${userId}/items/${itemId}`, HTTP_REQUEST.PUT(newItem)); }, - updateTodoPriority(userId, itemId, priority){ - return fetch(`${BASE_URL}/${userId}/items/${itemId}/`, HTTP_REQUEST.PUT(priority)); + async updateTodoPriority(userId, itemId, priority){ + return await fetch(`${BASE_URL}/${userId}/items/${itemId}/`, HTTP_REQUEST.PUT(priority)); }, - toggleTodoItem(userId, itemId){ - return fetch(`${BASE_URL}/${userId}/items/${itemId}`, HTTP_REQUEST.PUT) + async toggleTodoItem(userId, itemId){ + return await fetch(`${BASE_URL}/${userId}/items/${itemId}`, HTTP_REQUEST.PUT) } } \ No newline at end of file diff --git a/src/js/api/util.js b/src/js/api/util.js index 215f0711..39a0c672 100644 --- a/src/js/api/util.js +++ b/src/js/api/util.js @@ -3,7 +3,9 @@ const HTTP_REQUEST ={ return { method : "POST", headers:{ - 'Content-Type' :'application/json;charset=uft-8' + 'Content-Type' :'application/json;charset=uft-8', + 'Access-Control-Allow-Origin' : 'http://localhost:5500', + 'Access-Control-Allow-Credentials' :'true' }, body: JSON.stringify(data) } diff --git a/src/js/component/Title.js b/src/js/component/Title.js index 64208662..9860a8df 100644 --- a/src/js/component/Title.js +++ b/src/js/component/Title.js @@ -1,17 +1,24 @@ -import Component from "../core/component.js"; +import Observer from "../core/observer.js"; +import { $ } from "../util/util.js"; -export class Title extends Component{ - setup($target,$props){ - - } - templete(){ - - } - mounted(){ - - } - setEvent(){ - - } - +export class Title extends Observer{ + constructor(selectedUserIdState){ + super(); + this.state = selectedUserIdState; + } + template(){ + const name = this.state.get().name; + //console.log(name); + return ` + ${name}'s Todo List + ` + } + render(){ + const target = $("#user-title"); + target.innerHTML = this.template(); + } + update(){ + // console.log(this.state); + this.render(); + } } \ No newline at end of file diff --git a/src/js/component/TodoFilter.js b/src/js/component/TodoFilter.js index e10b8ade..c4c4a0ba 100644 --- a/src/js/component/TodoFilter.js +++ b/src/js/component/TodoFilter.js @@ -1,17 +1,53 @@ -import Component from "../core/component.js"; - -export class TodoFilter extends Component{ - setup($target,$props){ +import Observer from "../core/observer.js"; +import { $, $$ } from "../util/util.js"; +import { FILTER } from "../constants/constants.js"; +export class TodoFilter extends Observer{ + constructor(todoState, filterState){ + super(); + this.state= {todoState, filterState}; + //console.log(this.state); } templete(){ - + const filter = this.state.filterState.filter; + const todo = this.state.todoState.todoList; + const count = this.counTotalTodo(filter, todo); + return ` + 총 ${count} 개 + + + + ` } - mounted(){ - + render(){ + const target = $(".count-container"); + target.innerHTML = this.templete(); + } + update(){ + this.render(); } - setEvent(){ + counTotalTodo(filter, todo){ + // console.log(todo); + if(filter ==FILTER.ALL){ + return todo.length; + } + if(filter == FILTER.ACTIVE){ + return todo.filter(item => !item.isCompleted).length + } + if(filter == FILTER.COMPLETED){ + return todo.filter(item => item.isCompleted).length + } + return 110; } - } \ No newline at end of file diff --git a/src/js/component/TodoInput.js b/src/js/component/TodoInput.js index 86489156..2ac676ff 100644 --- a/src/js/component/TodoInput.js +++ b/src/js/component/TodoInput.js @@ -1,6 +1,4 @@ -import Component from "../core/component.js"; - -export class TodoInput extends Component{ +export class TodoInput { setup($target,$props){ } diff --git a/src/js/component/TodoList.js b/src/js/component/TodoList.js index 250b5d95..2478d9a3 100644 --- a/src/js/component/TodoList.js +++ b/src/js/component/TodoList.js @@ -1,17 +1,60 @@ -import Component from "../core/component.js"; - -export class TodoList extends Component{ - setup($target,$props){ +import Observer from "../core/observer.js"; +import { PRIORITY } from "../constants/constants.js" +import { $, $$ } from "../util/util.js"; +export class TodoList extends Observer{ + constructor(todoState){ + super(); + this.state = todoState; } - templete(){ - + template(){ + const todoList = this.state.get(); + return ` + ${todoList.map(item =>` +
    • +
      + + + +
      + +
      • + `).join('')} + ` + } + + render(){ + const target = $(".todo-list"); + target.innerHTML = this.template(); } - mounted(){ + update(){ + this.render(); } - setEvent(){ + getRanking(priority){ + if(priority==PRIORITY.FIRST){ + return ` + 1순위 + ` + } + if(priority==PRIORITY.SECOND){ + return ` + 2순위 + ` + } + if(priority==PRIORITY.NONE){ + return ` + + ` + } } } \ No newline at end of file diff --git a/src/js/component/UserList.js b/src/js/component/UserList.js index b2803150..2519f264 100644 --- a/src/js/component/UserList.js +++ b/src/js/component/UserList.js @@ -1,17 +1,60 @@ -import Component from "../core/component.js"; - -export class UserList extends Component{ - setup($target,$props){ +import Observer from "../core/observer.js"; +import { $ } from "../util/util.js" +import { userAPI, todoAPI } from "../api/api.js"; +export class UserList extends Observer{ + constructor(userState, selectedUserState){ + super(); + this.userState = userState; + this.selectedUserState = selectedUserState; } - templete(){ + template(){ + const userlist = this.userState.get(); + const selectedUser = this.selectedUserState.get(); + return ` + ${userlist.map(item => ` + + `).join('')} + + + ` + } + render(){ + const target = $("#user-list"); + target.innerHTML = this.template(); + this.mounted(); } mounted(){ - + const createUserBtn = $('.user-create-button'); + //conasole.log(createUserBtn); + createUserBtn.addEventListener('click', this.onCreateUser); + const deleteuserBtn = $('user-delete-button'); } - setEvent(){ + update(){ + this.render(); + } + onCreateUser(){ + const userName = prompt("추가하고 싶은 이름을 입력해주세요."); + console.log(userName); + userAPI.addUser(userName).then( + data => console.log(data) + ) + + + // const initData = userAPI.getAllUser().then( + // data => { + // this.userState.set(data); + // this.selectedUserState.set(data[0]); + // console.log(data[0]) + // this.todoState.set(data[0].todoList); + + // } + // ) } - } \ No newline at end of file diff --git a/src/js/constants/constants.js b/src/js/constants/constants.js index e69de29b..ac1bdd05 100644 --- a/src/js/constants/constants.js +++ b/src/js/constants/constants.js @@ -0,0 +1,12 @@ +export const FILTER = { + ALL: 'all', + ACTIVE: 'active', + COMPLETED: 'completed' + }; + + +export const PRIORITY = { + FIRST : "FIRST", + SECOND : "SECOND", + NONE : "NONE" +} \ No newline at end of file diff --git a/src/js/core/Observer.js b/src/js/core/Observer.js new file mode 100644 index 00000000..b1902887 --- /dev/null +++ b/src/js/core/Observer.js @@ -0,0 +1,5 @@ +export default class Observer{ + update(){ + + } +} \ No newline at end of file diff --git a/src/js/core/Subject.js b/src/js/core/Subject.js new file mode 100644 index 00000000..031edacb --- /dev/null +++ b/src/js/core/Subject.js @@ -0,0 +1,13 @@ +class subject{ + constructor(){ + this.observers = []; + } + subscribe(observer){ + this.observers = this.observers.concat(observer); + } + publish(){ + this.observers.forEach((observer) => observer.update()); + } +} + +export default subject; \ No newline at end of file diff --git a/src/js/core/component.js b/src/js/core/component.js deleted file mode 100644 index b80f0233..00000000 --- a/src/js/core/component.js +++ /dev/null @@ -1,20 +0,0 @@ -export default class Component { - $target; - $props; - $state; - constructor ($target, $props) { - this.$target = $target; - this.$props = $props; - this.setup(); - this.setEvent(); - this.render(); - } - setup () {}; - mounted () {}; - template () { return ''; } - render () { - this.$target.innerHTML = this.template(); - this.mounted(); - } - setEvent () {} - } \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index 7ea4745c..6a049f85 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,7 +1,6 @@ import App from './App.js'; -import { userAPI, todoAPI } from "./api/api.js"; -new App(document.querySelector('#app', userAPI, todoAPI)); +new App(); // const onUserCreateHandler = () => { diff --git a/src/store/countState.js b/src/store/countState.js new file mode 100644 index 00000000..761a1905 --- /dev/null +++ b/src/store/countState.js @@ -0,0 +1,17 @@ +import Subject from "../js/core/Subject.js"; + +export default class CountState extends Subject{ + constructor() { + super(); + this.count = ""; + } + + get() { + return this.count; + } + + set(updateCount) { + this.count = updateCount; + this.publish(); + } +} \ No newline at end of file diff --git a/src/store/filterState.js b/src/store/filterState.js new file mode 100644 index 00000000..e88e4b67 --- /dev/null +++ b/src/store/filterState.js @@ -0,0 +1,18 @@ +import Subject from "../js/core/Subject.js"; +import {FILTER} from "../js/constants/constants.js" + +export default class FilterState extends Subject{ + constructor() { + super(); + this.filter = FILTER.ALL; + } + + get() { + return this.filter; + } + + set(updateFilter) { + this.filter = updateFilter; + this.publish(); + } +} \ No newline at end of file diff --git a/src/store/selectedUserState.js b/src/store/selectedUserState.js new file mode 100644 index 00000000..432631b6 --- /dev/null +++ b/src/store/selectedUserState.js @@ -0,0 +1,15 @@ +import subject from "../js/core/Subject.js"; + +export default class SelectedUserState extends subject { + constructor(){ + super(); + this.selectedUser = {}; + } + get(){ + return this.selectedUser; + } + set(updateId){ + this.selectedUser = updateId; + this.publish(); + } +} \ No newline at end of file diff --git a/src/store/todoState.js b/src/store/todoState.js new file mode 100644 index 00000000..bd6432a3 --- /dev/null +++ b/src/store/todoState.js @@ -0,0 +1,18 @@ +import Subject from "../js/core/Subject.js"; + +export default class TodoState extends Subject { + constructor() { + super(); + this.todoList = []; + } + + get() { + return this.todoList; + } + + set(updateTodoList) { + console.log(updateTodoList) + this.todoList = updateTodoList; + this.publish(); + } +} diff --git a/src/store/userState.js b/src/store/userState.js new file mode 100644 index 00000000..9f213805 --- /dev/null +++ b/src/store/userState.js @@ -0,0 +1,15 @@ +import subject from "../js/core/Subject.js"; + +export default class UserState extends subject { + constructor(){ + super(); + this.userList = {}; + } + get(){ + return this.userList; + } + set(updateUser){ + this.userList = updateUser; + this.publish(); + } +} \ No newline at end of file diff --git a/temp.html b/temp.html new file mode 100644 index 00000000..e0ab33ee --- /dev/null +++ b/temp.html @@ -0,0 +1,128 @@ + + + + Mission 2 Todo List + + + + + +
      +

      + eastjun's Todo List +

      +
      +
      + + + + +
      +
      + +
      +
      + +
      +
      +
        +
      • +
        + +
        +
        • +
      • +
        + + + +
        + +
        • +
      • +
        + + + +
        + +
        • +
      • +
        + + + +
        + +
        • +
      • +
        + + + +
        + +
        • +
      • +
        + + + +
        + +
        • +
      +
      +
      + 총 0 개 + + +
      +
      +
      + + + From af540fb88767731c38630b3d3b4ec427419d1bfc Mon Sep 17 00:00:00 2001 From: soonysoo Date: Sun, 18 Jul 2021 20:14:53 +0900 Subject: [PATCH 06/17] =?UTF-8?q?=EC=9C=A0=EC=A0=80=EC=83=9D=EC=84=B1=20?= =?UTF-8?q?=EB=B0=8F=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/api/api.js | 4 ++-- src/js/api/util.js | 7 +++--- src/js/component/UserList.js | 41 ++++++++++++++++++------------------ 3 files changed, 25 insertions(+), 27 deletions(-) diff --git a/src/js/api/api.js b/src/js/api/api.js index 5b249c2d..d0c51a34 100644 --- a/src/js/api/api.js +++ b/src/js/api/api.js @@ -8,10 +8,10 @@ export const userAPI = { return await fetch(BASE_URL).then(data => data.json()); }, async deleteUser(id){ - return await fetch(`${BASE_URL}/${id}`,HTTP_REQUEST.DELETE); + return await fetch(`${BASE_URL}/${id}`,HTTP_REQUEST.DELETE()); }, async addUser(data){ - return await fetch(`${BASE_URL}`,HTTP_REQUEST.POST(data)); + return await fetch(`${BASE_URL}`,HTTP_REQUEST.POST(data)).then(data=>data.json()); }, async getUser(id){ return await fetch(`${BASE_URL}/${id}`).then(data =>{data.json()}); diff --git a/src/js/api/util.js b/src/js/api/util.js index 39a0c672..478457a4 100644 --- a/src/js/api/util.js +++ b/src/js/api/util.js @@ -2,10 +2,8 @@ const HTTP_REQUEST ={ POST(data){ return { method : "POST", - headers:{ - 'Content-Type' :'application/json;charset=uft-8', - 'Access-Control-Allow-Origin' : 'http://localhost:5500', - 'Access-Control-Allow-Credentials' :'true' + headers :{ + 'Content-Type' :'application/json' }, body: JSON.stringify(data) } @@ -13,6 +11,7 @@ const HTTP_REQUEST ={ DELETE(){ return { method : "DELETE", + } }, PUT(data){ diff --git a/src/js/component/UserList.js b/src/js/component/UserList.js index 2519f264..0c2f7ae5 100644 --- a/src/js/component/UserList.js +++ b/src/js/component/UserList.js @@ -7,6 +7,7 @@ export class UserList extends Observer{ super(); this.userState = userState; this.selectedUserState = selectedUserState; + } template(){ const userlist = this.userState.get(); @@ -14,7 +15,7 @@ export class UserList extends Observer{ return ` ${userlist.map(item => ` - + `).join('')} ` - } + } render(){ const target = $(".count-container"); target.innerHTML = this.templete(); + this.mounted(); + } + mounted(){ + const filterBtn = $$('.li-filter'); + filterBtn.forEach(btn => btn.addEventListener('click',this.onFilterChange.bind(this))); } update(){ + console.log("filterupdate") this.render(); } + onFilterChange(e){ + // console.log(e); + const mode= e.target.className.replace('selected','').trim(); + console.log(this.filterState.get()); + this.filterState.set(mode); + } counTotalTodo(filter, todo){ console.log(todo); if(filter ==FILTER.ALL){ @@ -46,9 +60,11 @@ export class TodoFilter extends Observer{ } if(filter == FILTER.ACTIVE){ + console.log("active") return todo.filter(item => !item.isCompleted).length } if(filter == FILTER.COMPLETED){ + console.log("compolete") return todo.filter(item => item.isCompleted).length } return 110; diff --git a/src/js/component/TodoList.js b/src/js/component/TodoList.js index d36ffc47..874fab72 100644 --- a/src/js/component/TodoList.js +++ b/src/js/component/TodoList.js @@ -1,6 +1,7 @@ import Observer from "../core/observer.js"; import { PRIORITY } from "../constants/constants.js" import { $, $$ } from "../util/util.js"; +import { userAPI, todoAPI } from "../api/api.js"; export class TodoList extends Observer{ constructor(selectedUserState){ @@ -15,7 +16,7 @@ export class TodoList extends Observer{ ${todoList.map(item =>`
    • - +
    • From cd8a7791a591e96b8e740dcc6c1d77e30aa6f597 Mon Sep 17 00:00:00 2001 From: soonysoo Date: Mon, 19 Jul 2021 00:55:36 +0900 Subject: [PATCH 10/17] =?UTF-8?q?userButton=20r=ED=81=B4=EB=A6=AD=EC=8B=9C?= =?UTF-8?q?=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/component/UserList.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/js/component/UserList.js b/src/js/component/UserList.js index 0c2f7ae5..1bd92a16 100644 --- a/src/js/component/UserList.js +++ b/src/js/component/UserList.js @@ -1,5 +1,5 @@ import Observer from "../core/observer.js"; -import { $ } from "../util/util.js" +import { $, $$ } from "../util/util.js" import { userAPI, todoAPI } from "../api/api.js"; export class UserList extends Observer{ @@ -15,7 +15,7 @@ export class UserList extends Observer{ return ` ${userlist.map(item => ` - + `).join('')} +
      • @@ -47,14 +47,19 @@ export class TodoList extends Observer{ target.innerHTML = this.template(); this.mounted(); } + mounted(){ const toggleBtns = $$('.toggle'); - console.log(toggleBtns) - toggleBtns.forEach(Btn => Btn.addEventListener('click',this.onToggleTodo.bind(this))) + toggleBtns.forEach(Btn => Btn.addEventListener('click',this.onToggleTodo.bind(this))); + + const deleteBtns = $$('.destroy'); + deleteBtns.forEach(Btn => Btn.addEventListener('click', this.onDeleteTodo.bind(this))); } + update(){ this.render(); } + async onToggleTodo(e){ const itemId = e.target.id; const userId = this.selectedUserState.get()._id; @@ -63,6 +68,20 @@ export class TodoList extends Observer{ this.selectedUserState.set(data); } + async onDeleteTodo(e){ + console.log(e); + const itemId = e.target.id; + const userId = this.selectedUserState.get()._id; + console.log(itemId); + console.log(userId); + const response = await todoAPI.deleteTodoItem(userId, itemId); + console.log(response); + if(response.ok){ + const data = await userAPI.getUser(userId); + this.selectedUserState.set(data); + } + } + getRanking(priority){ if(priority==PRIORITY.FIRST){ return ` From c200c75181339488da75221e8c52d98d96b1ca77 Mon Sep 17 00:00:00 2001 From: soonysoo Date: Mon, 19 Jul 2021 15:59:20 +0900 Subject: [PATCH 14/17] =?UTF-8?q?todoItem=20update=EA=B8=B0=EB=8A=A5?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/component/TodoList.js | 42 ++++++++++++++++++++++++++++++------ 1 file changed, 36 insertions(+), 6 deletions(-) diff --git a/src/js/component/TodoList.js b/src/js/component/TodoList.js index 72a20173..c2c2a197 100644 --- a/src/js/component/TodoList.js +++ b/src/js/component/TodoList.js @@ -30,13 +30,13 @@ export class TodoList extends Observer{
    • -
      - +
      • `).join('')} ` @@ -54,12 +54,46 @@ export class TodoList extends Observer{ const deleteBtns = $$('.destroy'); deleteBtns.forEach(Btn => Btn.addEventListener('click', this.onDeleteTodo.bind(this))); + + const editBtns = $$('.label'); + editBtns.forEach(Btn => Btn.addEventListener('dblclick', this.onEditTodo.bind(this))); + + const editInputs = $$('.edit'); + editInputs.forEach((editInput) => editInput.addEventListener('keydown', this.onEditKey.bind(this))); } update(){ this.render(); } + onEditTodo(e){ + e.stopPropagation(); + console.log(e.target); + const _edit = $$('.todo-list > li'); + _edit.forEach((li) => { + li.classList.remove('editing'); + }); + e.target.parentNode.parentNode.classList.add('editing'); + } + + async onEditKey(e){ + e.stopPropagation(); + if (e.key == 'Enter') { + const userId = this.selectedUserState.get()._id; + const itemId = e.target.id; + const newItem = e.target.value; + const response = await todoAPI.updateTodoItem(userId, itemId, {"contents": newItem}); + if(response.ok){ + const data = await userAPI.getUser(userId); + this.selectedUserState.set(data); + } + } + if (e.key == 'Escape') { + e.target.parentNode.classList.remove('editing'); + } + } + + async onToggleTodo(e){ const itemId = e.target.id; const userId = this.selectedUserState.get()._id; @@ -69,13 +103,9 @@ export class TodoList extends Observer{ } async onDeleteTodo(e){ - console.log(e); const itemId = e.target.id; const userId = this.selectedUserState.get()._id; - console.log(itemId); - console.log(userId); const response = await todoAPI.deleteTodoItem(userId, itemId); - console.log(response); if(response.ok){ const data = await userAPI.getUser(userId); this.selectedUserState.set(data); From a91a15463780af707e6f182cc5e2aa501cad843b Mon Sep 17 00:00:00 2001 From: soonysoo Date: Mon, 19 Jul 2021 16:50:17 +0900 Subject: [PATCH 15/17] =?UTF-8?q?priority=20=EA=B8=B0=EB=8A=A5=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 --- src/js/api/api.js | 2 +- src/js/component/TodoList.js | 32 +++++++++++++++++++++++++++----- 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/src/js/api/api.js b/src/js/api/api.js index 34992ac4..61d0ee59 100644 --- a/src/js/api/api.js +++ b/src/js/api/api.js @@ -36,7 +36,7 @@ export const todoAPI = { return await fetch(`${BASE_URL}/${userId}/items/${itemId}`, HTTP_REQUEST.PUT(newItem)); }, async updateTodoPriority(userId, itemId, priority){ - return await fetch(`${BASE_URL}/${userId}/items/${itemId}`, HTTP_REQUEST.PUT(priority)); + return await fetch(`${BASE_URL}/${userId}/items/${itemId}/priority`, HTTP_REQUEST.PUT(priority)); }, async toggleTodoItem(userId, itemId){ return await fetch(`${BASE_URL}/${userId}/items/${itemId}/toggle`, HTTP_REQUEST.PUT()) diff --git a/src/js/component/TodoList.js b/src/js/component/TodoList.js index c2c2a197..0042544c 100644 --- a/src/js/component/TodoList.js +++ b/src/js/component/TodoList.js @@ -59,7 +59,10 @@ export class TodoList extends Observer{ editBtns.forEach(Btn => Btn.addEventListener('dblclick', this.onEditTodo.bind(this))); const editInputs = $$('.edit'); - editInputs.forEach((editInput) => editInput.addEventListener('keydown', this.onEditKey.bind(this))); + editInputs.forEach(Btn => Btn.addEventListener('keydown', this.onEditKey.bind(this))); + + const selectedBoxs = $$('.select'); + selectedBoxs.forEach(Btn => Btn.addEventListener('click', this.onSelectPriority.bind(this))); } update(){ @@ -75,6 +78,25 @@ export class TodoList extends Observer{ }); e.target.parentNode.parentNode.classList.add('editing'); } + async onSelectPriority(e){ + e.stopPropagation(); + //updateTodoPriority(userId, itemId, priority) + const selectedPriroty = e.target.value; + console.log(selectedPriroty); + if(selectedPriroty == PRIORITY.NONE) return; + + const itemId = e.target.parentNode.id; + const userId = this.selectedUserState.get()._id; + console.log(itemId); + console.log(userId); + + const response = await todoAPI.updateTodoPriority(userId, itemId, {"priority": selectedPriroty}); + console.log(response); + if(response.ok){ + const data = await userAPI.getUser(userId); + this.selectedUserState.set(data); + } + } async onEditKey(e){ e.stopPropagation(); @@ -125,10 +147,10 @@ export class TodoList extends Observer{ } if(priority==PRIORITY.NONE){ return ` - + + + ` } From abad275f6b2b979d1bb8caf38651459feaf32deb Mon Sep 17 00:00:00 2001 From: soonysoo Date: Mon, 19 Jul 2021 17:37:39 +0900 Subject: [PATCH 16/17] =?UTF-8?q?=EC=BD=94=EB=93=9C=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/component/Title.js | 2 -- src/js/component/TodoFilter.js | 10 ---------- src/js/component/TodoInput.js | 8 ++++---- src/js/component/TodoList.js | 13 +++---------- src/js/component/UserList.js | 5 ++++- 5 files changed, 11 insertions(+), 27 deletions(-) diff --git a/src/js/component/Title.js b/src/js/component/Title.js index 9860a8df..86f54e09 100644 --- a/src/js/component/Title.js +++ b/src/js/component/Title.js @@ -8,7 +8,6 @@ export class Title extends Observer{ } template(){ const name = this.state.get().name; - //console.log(name); return ` ${name}'s Todo List ` @@ -18,7 +17,6 @@ export class Title extends Observer{ target.innerHTML = this.template(); } update(){ - // console.log(this.state); this.render(); } } \ No newline at end of file diff --git a/src/js/component/TodoFilter.js b/src/js/component/TodoFilter.js index b4725dbb..096c004a 100644 --- a/src/js/component/TodoFilter.js +++ b/src/js/component/TodoFilter.js @@ -8,16 +8,11 @@ export class TodoFilter extends Observer{ super(); this.selectedUserState = selectedUserState; this.filterState = filterState; - //console.log(this.state); } templete(){ const filter = this.filterState.get(); - console.log("template"); - console.log(filter) const todo = this.selectedUserState.get().todoList; - const count = this.counTotalTodo(filter, todo); - //conso return ` 총 ${count} 개
        @@ -60,23 +55,18 @@ export class TodoFilter extends Observer{ } onFilterChange(e){ const mode= e.target.className.replace('selected','').trim(); - console.log(this.filterState.get()); this.filterState.set(mode); } counTotalTodo(filter, todo){ - console.log(todo); if(filter ==FILTER.ALL){ return todo.length; } if(filter == FILTER.ACTIVE){ - console.log("active") return todo.filter(item => !item.isCompleted).length } if(filter == FILTER.COMPLETED){ - console.log("compolete") return todo.filter(item => item.isCompleted).length } - return 110; } } \ No newline at end of file diff --git a/src/js/component/TodoInput.js b/src/js/component/TodoInput.js index 70f0db29..7d6d331d 100644 --- a/src/js/component/TodoInput.js +++ b/src/js/component/TodoInput.js @@ -5,23 +5,23 @@ import { userAPI, todoAPI } from "../api/api.js"; export class TodoInput { constructor(selectedUserState){ - //super(); this.selectedUserState = selectedUserState; - //console.log( selectedUserState); this.addEvent(); } addEvent(){ const target = $(".new-todo"); - console.log(target); target.addEventListener('keyup', this.onAddTodo.bind(this)); } async onAddTodo(e){ if(e.key==='Enter'){ const value = e.target.value; const id = this.selectedUserState.get()._id; + if(value.length <2 ){ + alert("콘텐츠의 길이는 최소 2글자이상이어야 합니다."); + return; + } await todoAPI.addTodoItem(id, {"contents":value}); const data = await userAPI.getUser(id); - console.log(data); this.selectedUserState.set(data); e.target.value = ""; } diff --git a/src/js/component/TodoList.js b/src/js/component/TodoList.js index 0042544c..6319c23a 100644 --- a/src/js/component/TodoList.js +++ b/src/js/component/TodoList.js @@ -8,11 +8,10 @@ export class TodoList extends Observer{ super(); this.selectedUserState = selectedUserState; this.filterState = filterState; - console.log(filterState) } - template(){ - const todoList = this.selectedUserState.get().todoList; - console.log(this.filterState); + + template(){ + const todoList = this.selectedUserState.get().todoList; const filteredList = (() =>{ const mode = this.filterState.get(); if(mode=='all'){ @@ -80,18 +79,13 @@ export class TodoList extends Observer{ } async onSelectPriority(e){ e.stopPropagation(); - //updateTodoPriority(userId, itemId, priority) const selectedPriroty = e.target.value; - console.log(selectedPriroty); if(selectedPriroty == PRIORITY.NONE) return; const itemId = e.target.parentNode.id; const userId = this.selectedUserState.get()._id; - console.log(itemId); - console.log(userId); const response = await todoAPI.updateTodoPriority(userId, itemId, {"priority": selectedPriroty}); - console.log(response); if(response.ok){ const data = await userAPI.getUser(userId); this.selectedUserState.set(data); @@ -155,5 +149,4 @@ export class TodoList extends Observer{ ` } } - } \ No newline at end of file diff --git a/src/js/component/UserList.js b/src/js/component/UserList.js index 1bd92a16..b992ac6e 100644 --- a/src/js/component/UserList.js +++ b/src/js/component/UserList.js @@ -51,8 +51,11 @@ export class UserList extends Observer{ } async onCreateUser(){ - console.log( this.selectedUserState); const userName = prompt("추가하고 싶은 이름을 입력해주세요."); + if(userName.length<2) { + alert("이름의 길이는 최소2글자이상입니다."); + return; + } const data = await userAPI.addUser({name : userName}); this.selectedUserState.set(data); const userlist = await userAPI.getAllUser(); From 75b7b66076c676206235a5e2ba66e10809b854ee Mon Sep 17 00:00:00 2001 From: soonysoo Date: Mon, 19 Jul 2021 19:49:51 +0900 Subject: [PATCH 17/17] =?UTF-8?q?=EB=B6=88=ED=95=84=EC=9A=94=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- temp.html | 128 ------------------------------------------------------ 1 file changed, 128 deletions(-) delete mode 100644 temp.html diff --git a/temp.html b/temp.html deleted file mode 100644 index e0ab33ee..00000000 --- a/temp.html +++ /dev/null @@ -1,128 +0,0 @@ - - - - Mission 2 Todo List - - - - - -
        -

        - eastjun's Todo List -

        -
        -
        - - - - -
        -
        - -
        -
        - -
        -
        -
          -
        • -
          - -
          -
          • -
        • -
          - - - -
          - -
          • -
        • -
          - - - -
          - -
          • -
        • -
          - - - -
          - -
          • -
        • -
          - - - -
          - -
          • -
        • -
          - - - -
          - -
          • -
        -
        -
        - 총 0 개 - - -
        -
        -
        - - -