블랙커피스터디 level1 - 2주차 내용1

미션은 위와같이 주어졌다.

일단 한 내용을 토대로 정리한다.

설명할 함수들

1. Response_Api()
   1.1 GET_USERS()
   1.2 Clcik_User()
   1.3 Make_User()
   1.4 Delete_User()

2. Make_User()
   2.1 onUserCreateHandler()

3. Delete_User()
   3.1 onUserDeleteHandler()

4. onUserCreateHandler()
   4.1 Click_User()
   4.2 Post_User()

5. onUserDeleteHandler()
   5.1 Get_USER_ID()

6. Post_User()

7. GET_USER_ID_AND_DELETE()
   7.1 DELETE_USER()

8. DELETE_USER()

9. Get_Users()
   9.1 GET_USER_TODOLIST()

10. Click_User()
    10.1 OnUserClickHandler()

11. onUserClickHandler()
    11.1 GET_USER_ID_AND_TODOITEMS()

12. GET_USER_ID_AND_TODOITEMS()
    12.1 GET_TODOITEMS()

13. GET_TODOITEMS()
    13.1 Remove_localStorage()
    13.2 Remove_li_tag()
    13.3 init_Element()

14. Remove_localStorage()

15. remove_li_tag()

16. GET_USER_ID_AND_ADD_TODOLIST()
    16.1 ADD_TODOLIST()

17. ADD_TODOLIST()

---

1. Response_Api()

시작시 진행하는 함수 기존에 서버에 존재하는 User들을 가지고오고 User를 클릭시 핸들러를 설정하고 유저생성과 유저삭제에 대한 각각의 핸들러를 걸어준다.

function Response_Api(){
  fetch('https://js-todo-list-9ca3a.df.r.appspot.com/api/users')
      .then((response) => response.json())
      .then((myJson)=> {
        for(let i=0;i<myJson.length;i++)
          Get_Users(myJson,i);
        Click_User();
        document.querySelector('.user-create-button').addEventListener('click',Make_User);
        document.querySelector('.user-delete-button').addEventListener('click',Delete_User);
      })
};

2. Make_User()

클릭시 onUserCreateHandler()를 실행하는 핸들러를 선언한다.

function Make_User(){
  document.querySelector('.user-create-button').addEventListener('click',onUserCreateHandler)
}

3. Delete_User()

클릭시 onUserDeleteHandler()를 실행하는 핸들러를 선언한다.

function Delete_User(){
  document.querySelector('.user-delete-button').addEventListener('click',onUserDeleteHandler)
}

4. onUserCreateHandler()

클릭시 핸들러 작동에 의해 2글자 이상일시 진행하고 추가한 내용을 서버에 보내는 Post_user함수를 실행하고 Click_User함수로 핸들러도 설정시킨다.

const onUserCreateHandler = () => {
  const userName = prompt("추가하고 싶은 이름을 입력해주세요.");
  // User의 이름은 최소 2글자 이상체크
  let User_Enough_Length = userName.length>1 ? true : false;
  if(User_Enough_Length) {
    const button = document.createElement('button');
    button.innerText = userName;
    button.classList.add('ripple');
    button.setAttribute('id',++USER_COUNT);
    User_List.insertBefore(button, document.querySelector('user-create-button'));
    POST_USER(userName);

    //추가된 만큼 핸들러 다시 추가
    Click_User();
  }
}

5. onUserDeleteHandler()

클릭시 핸들러 작동에 의해 같은 이름에 해당하는 태그를 지우고 서버에서 해당하는 이름을 가진 부분도 지운다.

const onUserDeleteHandler = ()=>{
  const userName = prompt("삭제하고 싶은 이름을 입력해주세요.");
  document.querySelectorAll('#user-list > button').forEach(x=>{
    if(x.innerText === userName){
      if(x.classList.contains('user-create-button')==true || x.classList.contains('user-delete-button')==true){
        alert('삭제 불가능');
      }
      else if(x.classList.contains('active')==true){
        alert('활성화 삭제 불가능');
      }
      else {
        x.remove();
        GET_USER_ID_AND_DELETE(userName);
      }
    }
  })
}

6. Post_User()

관련된 이름을 가진 내용을 서버에 Create

function POST_USER(name){
  fetch('https://js-todo-list-9ca3a.df.r.appspot.com/api/users',{
    method:"POST",
    headers:{"Content-Type":"application/json"},
    body:JSON.stringify({
      name : `${name}`
    })
  }).then((response)=>response.json())
      .then(()=>alert('정상작동')).catch(()=>('오류 발생'))
}

7. GET_USER_ID_AND_DELETE()

해당 이름과 같은 내용을 가진 ID를 서버에서 가져온 후 DELETE_USER실행

function GET_USER_ID_AND_DELETE(name){
  let ID;
  fetch('https://js-todo-list-9ca3a.df.r.appspot.com/api/users')
      .then(response=>response.json())
      .then(data=>{
        data.map((value)=>{
          if(value.name === name)
            ID = value._id;
        })
        return ID;
      })
      .then((ID)=>{DELETE_USER(ID)});
}

8. DELETE_USER()

해당 ID와 같은 내용을 서버로 전송해서 맞다면 데이터를 삭제

function DELETE_USER(_id){
  fetch(`https://js-todo-list-9ca3a.df.r.appspot.com/api/users/${_id}`,{method:"DELETE"})
      .then(response=>response.json())
      .then(()=>{alert('서버 데이터 정상 삭제')})
      .catch(()=>{alert('오류 발생')});
}

9. Get_Users()

해당 형식을 가진 태그를 user-list를 가진 태그의 자식에 추가

function Get_Users(data,i){
  const $user_list = document.getElementById('user-list');
  const button = `<button class="ripple" id=${++USER_COUNT}>${data[i].name}</button>`
  const appRender = () => {
    $user_list.innerHTML += button;
  }
  appRender();
}