0626.mvc.step2

0626.mvc.step2.js

/* DISPATCHER */
class Dispatcher {
  register(fnlist) {
    this.fnlist = fnlist;
  }
  emit(o) {
    this.fnlist[o.type].apply(null, o.data);
  }
}

const dispatcher = new Dispatcher();

/* STORE */
class Store {
  constructor() {
    this.likedSet = new Set();
  }
  changeData(className, str) {
    if(className === 'like') this.likedSet.add(str);
    else this.likedSet.delete(str);
    dispatcher.emit( { type : 'CHANGE_LIKE_LIST', data : []},);
  }
}


//BlogListView
class BlogListView {
  constructor({url}) {
    this.posts = [];
    this.url = url;
    this.registerEvent();

    this.static_data = {
      'Like' : {
        "like" : { 
            "text" : "찜취소 ", "class" : "unlike"
        },
        "unlike" : { 
            "text" : "찜하기", "class" : "like"
          }
      }
    } 
  }
  
  registerEvent() {
    const elStart = document.querySelector(".start");
    const elUL = document.querySelector(".blogList > ul");

    elStart.addEventListener("click", () => this.getData());

    elUL.addEventListener("click", ({target}) => {
      const className = target.className;
      if(! Object.keys(this.static_data.Like).includes(className)) return;
      const currentText = target.previousElementSibling.textContent;
      dispatcher.emit(
          {type : 'CLICK_LIKE', data : [className, currentText, target]}
      );
    });
  }
  
  getData(customFn) {
    const oReq = new XMLHttpRequest();

    oReq.addEventListener("load", () => {
      const parsedData = JSON.parse(oReq.responseText);
      const body = JSON.parse(parsedData.body);

      this.posts = body.map((v) => {
        const title = v.title;
        const link = v.link
        return {title, link};
      });
      
      dispatcher.emit({
        type : 'INSERT_POSTS', data : [this.posts]
      })
    });

    oReq.open("GET", this.url );
    oReq.send();
  }


  insertPosts(data) {
    const ul = document.querySelector(".blogList > ul");

    data.forEach((v)=>{
      ul.innerHTML +=
      `<li> 
      <a href=${v.link}>${v.title}</a>
      <div class="like">찜하기</div>
      </li>`;      
    });
  }

  toggleLikeView(target, nextClassName) {
    target.className  = this.static_data['Like'][nextClassName]['class'];
    target.textContent= this.static_data['Like'][nextClassName]['text'];
  }

}


function LikeListView() {
  return { 
    renderListView (data) {
      const elLikeList = document.querySelector(".like-list > ul");
      let elLikeListSum = "";

      data.forEach( (v) => {
        elLikeListSum += `<li> ${v} </li>`; })
      elLikeList.innerHTML = elLikeListSum;
    }
  }
}

function Controller(initData) {
    const store = new Store();
    const likeListView = LikeListView();
    const blogListView = new BlogListView(initData);

    dispatcher.register({
      "CLICK_LIKE" : function(className, str, target) {
        store.changeData(className, str);
        blogListView.toggleLikeView(target, className);
      },

      "INSERT_POSTS" : function(posts) {
        blogListView.insertPosts(posts);
      },

      "CHANGE_LIKE_LIST" : function() {
        likeListView.renderListView(store.likedSet);
      }
    })
}

// GO Service !!
const initData = {
  url : "https://tlhm20eugk.execute-api.ap-northeast-2.amazonaws.com/prod/lambda_get_blog_info"
}

Controller(initData);