블랙커피스터디 level1 - 3주차 정리4

todoAppCountContainer.js

import { eraseMemberTodoList } from "../server/AppServer.js";

function countContainer(countContainer, count) {
  countContainer.querySelector(".todo-count > strong").innerHTML = count;
}

function initFilterEventListeners(
  todoApp,
  filters,
  eraseButton,
  ulTag,
  todoCount,
  teamId,
  memberId
) {
  filters
    .querySelector(" .all")
    .addEventListener("click", () => onAllFilterHandler(ulTag, todoCount));
  filters
    .querySelector(".active")
    .addEventListener("click", () => onActiveFilterHandler(ulTag, todoCount));
  filters
    .querySelector(" .completed")
    .addEventListener("click", () =>
      onCompletedFilterHandler(ulTag, todoCount)
    );
  eraseButton.addEventListener("click", () =>
    onEraseButtonHandler(todoApp, eraseButton, teamId, memberId, ulTag)
  );
}

function onAllFilterHandler(ulTag, todoCount) {
  ulTag.querySelectorAll("li").forEach((x) => {
    x.style.display = "";
  });
  todoCount.innerHTML = ulTag.childElementCount;
}

function onActiveFilterHandler(ulTag, todoCount) {
  ulTag
    .querySelectorAll("li")
    .forEach(
      (x) => (x.style.display = x.classList.contains("active") ? "" : "none")
    );
  let count = 0;
  ulTag.querySelectorAll("li").forEach((x) => {
    if (x.classList.contains("active")) count++;
  });
  todoCount.innerHTML = count;
}

function onCompletedFilterHandler(ulTag, todoCount) {
  ulTag
    .querySelectorAll("li")
    .forEach((x) =>
      x.classList.contains("completed") == true
        ? (x.style.display = "")
        : (x.style.display = "none")
    );
  let count = 0;
  ulTag.querySelectorAll("li").forEach((x) => {
    if (x.classList.contains("completed")) count++;
  });
  todoCount.innerHTML = count;
}

function onEraseButtonHandler(todoApp, eraseButton, teamId, memberId, ulTag) {
  if (confirm("지우시겠습니까?")) {
    eraseAllLiTag(ulTag);
    eraseMemberTodoList(todoApp, teamId, memberId);
  } else {
    alert("멤버 지우기 취소");
  }
}

function eraseAllLiTag(ulTag) {
  let allLi = ulTag.querySelectorAll("li");
  allLi.forEach((li) => li.remove());
}

function todoCountMinus(todoApp) {
  todoApp.querySelector(
    ".count-container>.todo-count > strong"
  ).innerText = todoApp.querySelector(".main > .todo-list").childElementCount;
}

export { countContainer, initFilterEventListeners, todoCountMinus };

각각의 버튼마다의 전체보기 우선순위 해야할일 완료한일 모두삭제 에 핸들러를 구현한다.
멤버마다 1개씩 구현하면 되기때문에 전 내용보단 덜 어렵다.

requestOption.js

export const requestOption = {
  addMember: (teamName) => {
    return {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        name: `${teamName}`,
      }),
    };
  },
  delete: () => {
    return {
      method: "DELETE",
    };
  },
  completed: (IsCompleted) => {
    return {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        isCompleted: `${IsCompleted}`,
      }),
    };
  },

  addMemberItem: (value) => {
    return {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        contents: `${value}`,
      }),
    };
  },
  contentsModify: (value) => {
    return {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        contents: `${value}`,
      }),
    };
  },
};

필요한 option을 분리하여 보기 쉽게 정리한다.