Replace pusher with action cable (#178)

closes #43

app/javascript/dashboard/constants.js

@@ -1,6 +1,5 @@
 export default {
   APP_BASE_URL: '/',
-  PUSHER: __PUSHER__,
   get apiURL() {
     return `${this.APP_BASE_URL}/`;
   },

app/javascript/dashboard/helper/actionCable.js

@@ -0,0 +1,70 @@
+import { createConsumer } from '@rails/actioncable';
+
+import AuthAPI from '../api/auth';
+
+class ActionCableConnector {
+  constructor(app, pubsubToken) {
+    const consumer = createConsumer();
+    consumer.subscriptions.create(
+      {
+        channel: 'RoomChannel',
+        pubsub_token: pubsubToken,
+      },
+      {
+        received: this.onReceived,
+      }
+    );
+    this.app = app;
+    this.events = {
+      'message.created': this.onMessageCreated,
+      'conversation.created': this.onConversationCreated,
+      'status_change:conversation': this.onStatusChange,
+      'user:logout': this.onLogout,
+      'page:reload': this.onReload,
+      'assignee.changed': this.onAssigneeChanged,
+    };
+  }
+
+  onAssigneeChanged = payload => {
+    const { meta = {}, id } = payload;
+    const { assignee } = meta || {};
+    if (id) {
+      this.app.$store.dispatch('updateAssignee', { id, assignee });
+    }
+  };
+
+  onConversationCreated = data => {
+    this.app.$store.dispatch('addConversation', data);
+  };
+
+  onLogout = () => AuthAPI.logout();
+
+  onMessageCreated = data => {
+    this.app.$store.dispatch('addMessage', data);
+  };
+
+  onReceived = ({ event, data } = {}) => {
+    if (this.events[event]) {
+      this.events[event](data);
+    }
+  };
+
+  onReload = () => window.location.reload();
+
+  onStatusChange = data => {
+    this.app.$store.dispatch('addConversation', data);
+  };
+}
+
+export default {
+  init() {
+    if (AuthAPI.isLoggedIn()) {
+      const actionCable = new ActionCableConnector(
+        window.WOOT,
+        AuthAPI.getPubSubToken()
+      );
+      return actionCable;
+    }
+    return null;
+  },
+};

app/javascript/dashboard/helper/pusher.js

@@ -1,71 +0,0 @@
-/* eslint-env browser */
-/* eslint no-console: 0 */
-import Pusher from 'pusher-js';
-import AuthAPI from '../api/auth';
-import CONSTANTS from '../constants';
-
-class VuePusher {
-  constructor(apiKey, options) {
-    this.app = options.app;
-    this.pusher = new Pusher(apiKey, options);
-    this.channels = [];
-  }
-
-  subscribe(channelName) {
-    const channel = this.pusher.subscribe(channelName);
-    if (!this.channels.includes(channel)) {
-      this.channels.push(channelName);
-    }
-    this.bindEvent(channel);
-  }
-
-  unsubscribe(channelName) {
-    this.pusher.unsubscribe(channelName);
-  }
-
-  bindEvent(channel) {
-    channel.bind('message.created', data => {
-      this.app.$store.dispatch('addMessage', data);
-    });
-
-    channel.bind('conversation.created', data => {
-      this.app.$store.dispatch('addConversation', data);
-    });
-
-    channel.bind('status_change:conversation', data => {
-      this.app.$store.dispatch('addConversation', data);
-    });
-
-    channel.bind('assignee.changed', payload => {
-      const { meta = {}, id } = payload;
-      const { assignee } = meta || {};
-      if (id) {
-        this.app.$store.dispatch('updateAssignee', { id, assignee });
-      }
-    });
-
-    channel.bind('user:logout', () => AuthAPI.logout());
-    channel.bind('page:reload', () => window.location.reload());
-  }
-}
-
-/* eslint no-param-reassign: ["error", { "props": false }] */
-export default {
-  init() {
-    // Log only if env is testing or development.
-    Pusher.logToConsole = CONSTANTS.PUSHER.logToConsole || true;
-    // Init Pusher
-    const options = {
-      encrypted: true,
-      app: window.WOOT,
-      cluster: CONSTANTS.PUSHER.cluster,
-    };
-    const pusher = new VuePusher(CONSTANTS.PUSHER.token, options);
-    // Add to global Obj
-    if (AuthAPI.isLoggedIn()) {
-      pusher.subscribe(AuthAPI.getPubSubToken());
-      return pusher.pusher;
-    }
-    return null;
-  },
-};

app/javascript/dashboard/routes/index.spec.js

@@ -14,7 +14,6 @@ jest.mock('./login/login.routes', () => ({
 jest.mock('../constants', () => {
   return {
     APP_BASE_URL: '/',
-    PUSHER: false,
     get apiUrl() {
       return `${this.APP_BASE_URL}/`;
     },

app/javascript/dashboard/store/modules/auth.js

@@ -8,7 +8,7 @@ import * as types from '../mutation-types';
 import router from '../../routes';
 import authAPI from '../../api/auth';
 import createAxios from '../../helper/APIHelper';
-import vuePusher from '../../helper/pusher';
+import actionCable from '../../helper/actionCable';
 // initial state
 const state = {
   currentUser: {
@@ -61,7 +61,7 @@ const actions = {
         .then(() => {
           commit(types.default.SET_CURRENT_USER);
           window.axios = createAxios(axios);
-          window.pusher = vuePusher.init(Vue);
+          actionCable.init(Vue);
           router.replace({ name: 'home' });
           resolve();
         })

app/javascript/dashboard/store/modules/conversations/index.js

@@ -168,7 +168,7 @@ const mutations = {
     _state.chatStatusFilter = data;
   },
 
-  // Update assignee on pusher message
+  // Update assignee on action cable message
   [types.default.UPDATE_ASSIGNEE](_state, payload) {
     const [chat] = _state.allConversations.filter(c => c.id === payload.id);
     chat.meta.assignee = payload.assignee;

app/javascript/packs/application.js

@@ -24,7 +24,7 @@ import createAxios from '../dashboard/helper/APIHelper';
 import commonHelpers from '../dashboard/helper/commons';
 import router from '../dashboard/routes';
 import store from '../dashboard/store';
-import vuePusher from '../dashboard/helper/pusher';
+import vueActionCable from '../dashboard/helper/actionCable';
 import constants from '../dashboard/constants';
 
 Vue.config.env = process.env;
@@ -58,7 +58,7 @@ window.onload = () => {
     components: { App },
     template: '<App/>',
   }).$mount('#app');
-  window.pusher = vuePusher.init();
+  vueActionCable.init();
 };
 
 if ('serviceWorker' in navigator) {