nopaque/app/static/js/App.js

class App {
  constructor() {
    this.data = {users: {}};
    this.promises = {users: {}};
    this.socket = io({transports: ['websocket'], upgrade: false});
    this.socket.on('PATCH', (patch) => {this.data = jsonpatch.applyPatch(this.data, patch).newDocument;});
  }

  get users() {
    return this.data.users;
  }

  subscribeUser(userId) {
    if (userId in this.promises.users) {
      return this.promises.users[userId];
    }
    this.promises.users[userId] = new Promise((resolve, reject) => {
      this.socket.emit('SUBSCRIBE /users/<user_id>', userId, response => {
        if (response.code === 200) {
          this.data.users[userId] = response.payload;
          resolve(this.data.users[userId]);
        } else {
          reject(response);
        }
      });
    });
    return this.promises.users[userId];
  }

  flash(message, category) {
    let iconPrefix;
    let toast;
    let toastCloseActionElement;

    switch (category) {
      case 'corpus':
        iconPrefix = '<i class="left material-icons">book</i>';
        break;
      case 'error':
        iconPrefix = '<i class="error-color-text left material-icons">error</i>';
        break;
      case 'job':
        iconPrefix = '<i class="left nopaque-icons">J</i>';
        break;
      default:
        iconPrefix = '<i class="left material-icons">notifications</i>';
        break;
    }
    toast = M.toast(
      {
        html: `
          <span>${iconPrefix}${message}</span>
          <button class="btn-flat toast-action white-text" data-action="close">
            <i class="material-icons">close</i>
          </button>
        `.trim()
      }
    );
    toastCloseActionElement = toast.el.querySelector('.toast-action[data-action="close"]');
    toastCloseActionElement.addEventListener('click', () => {toast.dismiss();});
  }
}