nopaque/app/static/js/App.js

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

  getUser(userId) {
    if (userId in this.data.promises.getUser) {
      return this.data.promises.getUser[userId];
    }

    this.data.promises.getUser[userId] = new Promise((resolve, reject) => {
      this.socket.emit('GET /users/<user_id>', userId, (response) => {
        if (response.status === 200) {
          this.data.users[userId] = response.body;
          resolve(this.data.users[userId]);
        } else {
          reject(`[${response.status}] ${response.statusText}`);
        }
      });
    });

    return this.data.promises.getUser[userId];
  }

  subscribeUser(userId) {
    if (userId in this.data.promises.subscribeUser) {
      return this.data.promises.subscribeUser[userId];
    }

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

    return this.data.promises.subscribeUser[userId];
  }

  flash(message, category) {
    let iconPrefix = '';
    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;
      }
      case 'settings': {
        iconPrefix = '<i class="left material-icons">settings</i>';
        break;
      }
      default: {
        iconPrefix = '<i class="left material-icons">notifications</i>';
        break;
      }
    }
    let toast = M.toast(
      {
        html: `
          <span>${iconPrefix}${message}</span>
          <button class="action-button btn-flat toast-action white-text" data-action="close">
            <i class="material-icons">close</i>
          </button>
        `.trim()
      }
    );
    let toastCloseActionElement = toast.el.querySelector('.action-button[data-action="close"]');
    toastCloseActionElement.addEventListener('click', () => {toast.dismiss();});
  }
  
  onPatch(patch) {
    // Filter Patch to only include operations on users that are initialized
    let regExp = new RegExp(`^/users/(${Object.keys(this.data.users).join('|')})`);
    let filteredPatch = patch.filter(operation => regExp.test(operation.path));

    // Handle job status updates
    let subRegExp = new RegExp(`^/users/([A-Za-z0-9]*)/jobs/([A-Za-z0-9]*)/status$`);
    let subFilteredPatch = filteredPatch
      .filter((operation) => {return operation.op === 'replace';})
      .filter((operation) => {return subRegExp.test(operation.path);});
    for (let operation of subFilteredPatch) {
      let [match, userId, jobId] = operation.path.match(subRegExp);
      this.flash(`[<a href="/jobs/${jobId}">${this.data.users[userId].jobs[jobId].title}</a>] New status: <span class="job-status-text" data-status="${operation.value}"></span>`, 'job');
    }

    // Apply Patch
    jsonpatch.applyPatch(this.data, filteredPatch);
  }
}