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

10. Click_User()

id로 숫자를 가진 값들을 전부 핸들러 구현

function Click_User(){
  for(let i=1;i<=USER_COUNT;i++)
  {
    let id = document.getElementById(`${i}`);
    if(id!==null)       //id가 숫자로 제대로 존재한다면 실행 (숫자가 아니라면 실행X)
      id.addEventListener('click',(event)=>OnUserClickHandler(id.innerText,event));
  }
}

11. onUserClickHandler()

과거에 active상태인 내용을 지우고 해당 유저를 클릭한 대상을 기준으로 active를 활성화 시킨 후 GET_USER_ID_AND_TODOITEMS함수를 부른다.

function OnUserClickHandler(Name,event){
  //클릭한 버튼을 active 상태로 만들고 그전의 버튼을 active 상태 취소
  event.target.parentNode.querySelectorAll('#user-list > button').forEach(x=>x.classList.remove('active'));
  event.target.classList.add('active');
  GET_USER_ID_AND_TODOITEMS(Name)
}

12. GET_USER_ID_AND_TODOITEMS()

유저의 ID를 반환한 후 GET_TODOITEMS함수를 실행

function GET_USER_ID_AND_TODOITEMS(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)=>{GET_TODOITEMS(ID)});
}

13. GET_TODOITEMS()

해당 ID를 가진 내용에서 contents들을 전부 가져와 init_Element함수를 통해 태그로 보이게 만든다.

function GET_TODOITEMS(ID){
  Remove_localStorage();
  Remove_li_tag();
  fetch(`https://js-todo-list-9ca3a.df.r.appspot.com/api/users/${ID}/items`)
      .then(response=>response.json())
      .then(data=>data.map(val=>{
        init_Element(val.contents,'F','F')
      }));
}

14. Remove_localStorage()

localStorage의 모든 내용 삭제

function Remove_localStorage(){
  const localStorage_length = localStorage.length;
  const key=[];
  for(let i=0;i<localStorage_length;i++)
  {
    key.push(localStorage.key(i));
  }
  key.map(x=>localStorage.removeItem(x));
}

15. remove_li_tag()

기존에 있던 모든 li tag 삭제

function Remove_li_tag(){
  document.querySelector('.todo-count > strong').innerText = 0;
  count = 0 ;
  const todolist =  document.querySelectorAll('.todo-list > li')
  todolist.forEach(x=>x.remove());
}

16. GET_USER_ID_AND_ADD_TODOLIST()

유저의 ID를 가져온 후 ID를 통해 ADD_TODOLIST 함수 실행

function GET_USER_ID_AND_ADD_TODOLIST(name,content){
  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)=>{ADD_TODOLIST(ID,content)});
}

17. ADD_TODOLIST()

ID를 통해 가져온 곳에 추가한 TODOLIST 내용을 서버에 추가한다.

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