evented chat

yeahman.js

#= require framework7.bundle.js

var f7_app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'My App',
  // App id
  id: 'com.myapp.test',
  // Enable swipe panel
  panel: {
    swipe: 'left',
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... other parameters
});


//*****************************************************************
//

function Evented() {
  var evented_events = {};

  this.on = function (name, callback) {
    if (!evented_events[name]) evented_events[name] = [];
    var index = evented_events[name].push(callback);
    return { remove: function () { evented_events[name].splice(index - 1, 1); }}
    }

  this.emit = function (name, event) {
    var cbs = evented_events[name];
    if (cbs) cbs.forEach(cb => cb(event));
  }
}

//************************************************
class f7Presenter {
  constructor(f7_app) {
    this.f7_app = f7_app;
  }

  showMessage(message) {
    console.log('should be using f7 to put this message in the UI...');
    console.log(message)
    // console.log('should be showing message with...');
    // console.log(f7_app)
  }

}
//************************************************
class TwilioChatChannel extends Evented {

  constructor(channelName) {
    super();
    this.channelName = channelName;
    this.twilioChannel = null;
    this.initialize();
  }

  initialize() {
    $.ajax({
      url: "/twilio_tokens",
      type: "POST",
      success: data => {
        this.identity = data.identity;
        Twilio.Chat.Client.create(data.token)
          .then(client => this.setupClient(client));
      }
    });
  }

  setupClient(client) {
    client.getChannelByUniqueName(this.channelName)
      .then((channel) => {
        this.joinChannel(channel)
      })
      .catch((error) => {
        client.createChannel({
          uniqueName: this.channelName,
          friendlyName: this.channelName
        }).then((channel) => this.joinChannel(channel));
      });
  }

  joinChannel(channel) {
    if(channel.state.status !== "joined") {
      channel.join().then((channel) => {
        this.twilioChannel = channel;
        this.emit('joined_channel', {channel: channel});
      });
    }
    else {
      this.twilioChannel = channel;
      this.emit('joined_channel', {channel: channel});
    }
  }

  retrieveRecentMessages() {
    this.twilioChannel.getMessages().then((messages) => {
      this.emit('recent_messages_received', {messages: messages});
    }).catch((error) => console.log(error))
  }
}
//************************************************
class UIDispatcher {

  constructor(channel_object, ui_object) {
    this.channel_object = channel_object;
    this.ui_object = ui_object;
    this.setupListeners()
  }

  setupListeners() {
    this.channel_object.on('joined_channel', payload => this.joined_channel(payload))
    this.channel_object.on('recent_messages_received', payload => this.recent_messages_received(payload))
  }

  recent_messages_received(payload){
    var twilio_message_objects = payload.messages.items
    twilio_message_objects.map(this.convert_twilio_message_to_f7).forEach(this.ui_object.showMessage);
  }

  joined_channel(payload){
    console.log('I joined on this channel');
    console.log(payload.channel);
  }

  convert_twilio_message_to_f7(twilio_message_object){
    return new TwilioMessageToF7Message(twilio_message_object).converted();
  }
}
//************************************************

class TwilioMessageToF7Message {
  constructor(twilio_message){
    this.twilio_message = twilio_message
  }

  converted() {
    var dateTimestamp = this.twilio_message.timestamp;
    var msg_timestamp = dateTimestamp.toLocaleTimeString(navigator.language, {
      hour: '2-digit',
      minute: '2-digit'
    });

    var msg_type = this.twilio_message.author == this.identity ? "sent" : "received";
    var f7_message = {
      text: this.twilio_message.body,
      header: 'Administrator, Principal',
      footer: msg_timestamp,
      type: msg_type,
      name: this.twilio_message.author,
      imageSrc: this.twilio_message.attributes.thumbnail_url,
      attrs: {
        'sid': this.twilio_message.sid,
        'full-image-url': this.twilio_message.attributes.url,
        'thumbnail-url': this.twilio_message.attributes.thumbnail_url
      }
    };
    console.log(f7_message);
    return(f7_message);
  }
}

//************************************************

var mainView = f7_app.views.create('.view-main');

var chatChannel = new TwilioChatChannel('c2m');
var ui_presenter = new f7Presenter(f7_app);

new UIDispatcher(chatChannel, ui_presenter);

chatChannel.on('joined_channel', function(channel) { 
  chatChannel.retrieveRecentMessages();
});

I'm sure there's a RegEx to fix that. You'll just have to run it after your prettier.

By the way, modern terminology for Evented is EventEmitter. See: https://nodejs.org/api/events.html#events_class_eventemitter