TodosView.js

export default class TodosView {
  constructor(wrapper, pubSub) {
    this.wrapper = wrapper;
    this.pubSub = pubSub;
    this.cashe = {};
  }

  createView() {
    this.wrapper.insertAdjacentHTML("afterbegin", this.renderUI());
    this.cashe.todosList = document.querySelector(".todos-list");
    this.cashe.listItem = document.querySelector(".list-item");
    this.cashe.form = document.querySelector(".input-form");
    this.cashe.input = document.querySelector(".input");
    this.cashe.display = document.querySelector(".toggle-display");
    this.cashe.all = document.querySelector(".all");
    this.cashe.done = document.querySelector(".done");
    this.pubSub.on("addItem", this.addItem.bind(this));
    this.pubSub.on("deleteItem", this.deleteItem.bind(this));
    this.pubSub.on("markAsDone", this.markAsDone.bind(this));
    this.pubSub.on("itemsDone", this.itemsDone.bind(this));
    this.pubSub.on("allItems", this.allItems.bind(this));
  }

  deleteItem(id) {
    const item = document.querySelector(`[data-itemid="${id}"]`);
    this.cashe.todosList.removeChild(item);
  }

  markAsDone(id) {
    const item = document.querySelector(`[data-itemid="${id}"]`);
    item.style.textDecoration = "line-through";
  }

  addItem(item) {
    this.cashe.todosList.insertAdjacentHTML(
      "beforeend",
      this.listItemView(item)
    );
  }

  itemsDone(items) {
    this.cashe.todosList.innerHTML = "";
    items.forEach(item => {
      this.cashe.todosList.insertAdjacentHTML(
        "beforeend",
        this.listItemView(item)
      );
    });
  }

  allItems(items) {
    this.cashe.todosList.innerHTML = "";
    items.forEach(item => {
      this.cashe.todosList.insertAdjacentHTML(
        "beforeend",
        this.listItemView(item)
      );
    });
  }

  listItemView(item) {
    return `
      <li class='list-item' data-itemid=${item &&
        item.id} style="text-decoration: ${item.done && "line-through;"} ">
      ${item && item.title}
        <button class="delete-item">
         X
        </button>
      </li>
    `;
  }

  renderUI() {
    return `
      <div class='wrapper'>
        <form class='input-form'>
         <input class="input"/>
        </form>
        <ul class="todos-list">

        </ul>
        <div class="toggle-display">
          <button class="all">
            All
          </button>
          <button class="done">
            Done
          </button>
        </div>
      </div>
    `;
  }
}