polyglot/app/javascript/packs/notifications.js

import ActionCable from 'actioncable'
// import { triggerCalleeModalEvent } from "./application";

const triggerCalleeModalEvent = () => {
  $("#calleeModal").modal('show');
}

// create App object with key cable == new consumer
(function() {
  window.App || (window.App = {});

  App.cable = ActionCable.createConsumer();

}).call(this);


const userId = parseInt(document.getElementById("my-user-id").dataset["userId"])
let chatRoomId = null

App.cable.subscriptions.create({
  channel: 'NotificationsChannel'
}, {
  connected: () => {
    console.log('Connected to NotificationsChannel')
  },
  received: data => {
    console.log("received broadcast")

    if (data.head === 302 && data.body["caller"] === userId && data.path) {
      window.location.pathname = data.path
    } else if (data["message"]["user_id"] === userId) {

      // DISPLAY ACCEPT BUTTON
      const acceptButton = document.getElementById('accept-button')
      acceptButton.style.display = "block"

      triggerCalleeModalEvent()
      document.getElementById('caller-name').innerHTML = data["message"]["caller_info"]
      document.getElementById('caller-photo').src = data["message"]["caller_photo"]

      chatRoomId = data["message"]["chat_room_id"]
      console.log(`user with id: ${userId} needs to subscribe to chatroom ${[chatRoomId]}`)
    } else {
      console.log(data)
    }


  }
})

// Receive information from index.html.erb
const acceptButton = document.getElementById('accept-button')

acceptButton.addEventListener('click', event => {
  document.getElementById('chat-room-id').value = chatRoomId
})