Cart pub-sub example

cart-example.js

/** Quick and dirty Cart pub/sub example */

class CartStore {
  add(item) {}
  remove(index) {}
  update(index, item) {}
  get(index) {}
  getAll() {}
}

class CartService {
  constructor(eventEmitter, CartStore) {
    this.cartStore = new CartStore();
    this.events = eventEmitter;
  }

  init() {}

  updateRequest() {
    this.notify();
  }

  remove(item) {
    this.store.add(item);
    this.notify('remove', item);
  }

  notify(event, data) {
    // either send individual events, depends on the level of granularity the subscribers depends on.
    if (event) {
      return this.events.emit(event, data);  
    }
    return this.events.emit('updated', this.store.getAll());
  }  
}

class CartListController {
  constructor(service, cartList) {
    this.service = service;
    this.cartList = cartList;
  }

  init() {
    this.service.updateRequest();
    this.loadEventListeners();
  }

  loadEventListeners() {
    this.cartList.addEventListener('removeItem', e => {
      return this.remove(index);
    });
  }
  
  remove(index) {
    this.service.remove(e.detail.index);
  }
}

/* Class representing a Cart Item Component */
class CartItem extends HTMLELement {
  constructor() {
    super();
  }

  get title() {}
  set title() {}
  set price() {}
  get price() {}

  remove() {}
}


/* Class representing a Cart List Component */
class CartList extends HTMLELement {
  constructor(service) {
    super();
    this.service = service;
  }

  // Element inserted into DOM.
  connectedCallback() {
    this.service.events.on('update', this.render);
    this.loadEventListners();
  }

  // Element removed from DOM.
  disconnectedCallback() {
    // Prevent memory leak when component is destroyed.
    this.service.events.removeListener('update', this.render);
  }

  loadEventListeners() {
    this.removeButton.addEventListener('click', e => {
      return this.dispatchEvent(new CustomEvent('removeItem', {
        detail: {
          index: e.dataset.index,
        },
        bubbles: true
      }));
    });
  }

  get removeButton() {
    return this.querySelector('.remove-button');
  }

  getAll() {
    return Array.prototype.slice.call(this.children);
  }

  update(items) {
    this.render(items);
  }
  get() {}
  remove() {}

  render() {}

}

class App {
  constructor() {
    this.events = new EventEmitter();
    this.cartService = new CartService(this.events);
  }

  init() {
    this.cartservice.init();
  }
}

var app = new App();
app.init();
var cartList = new CartList(app.cartService);
var cartListController = new CartListController();
cartListController.init();