added chatroom channel with room ids and notifications channel

app/javascript/packs/application.js

@@ -1 +1,2 @@
 import "bootstrap";
+

app/javascript/packs/chatrooms.js

@@ -0,0 +1,37 @@
+import ActionCable from 'actioncable'
+
+// create App object with key cable == new cosumer
+(function() {
+  window.App || (window.App = {});
+
+  App.cable = ActionCable.createConsumer();
+
+}).call(this);
+
+// find chatroom id
+const chatroomId = document.getElementById('chatroom-hook').dataset["chatroomId"]
+
+// create subsciptions
+App['chatroom' + chatroomId] = App.cable.subscriptions.create({
+  channel: 'ChatRoomsChannel',
+  room: chatroomId
+}, {
+  connected: () => {
+    console.log('Connected to ChatRoom ' + chatroomId)
+  },
+  received: data => {
+    console.log(data)
+  }
+})
+
+// Testing ActionCable
+const testBtn = document.getElementById('test-btn')
+testBtn.addEventListener('click', event => {
+  fetch(`/chat_rooms/${chatroomId}/cable_testing` , {
+    method: 'POST',
+    body: JSON.stringify({})
+  })
+})
+
+
+

app/javascript/packs/notifications.js

@@ -0,0 +1,38 @@
+import ActionCable from 'actioncable'
+
+// create App object with key cable == new cosumer
+(function() {
+  window.App || (window.App = {});
+
+  App.cable = ActionCable.createConsumer();
+
+}).call(this);
+
+
+const userId = parseInt(document.getElementById("my-user-id").dataset["userId"])
+
+App.cable.subscriptions.create({
+  channel: 'NotificationsChannel'
+}, {
+  connected: () => {
+    console.log('Connected to NotificationsChannel')
+  },
+  received: data => {
+    console.log(data["message"]["user_id"])
+    console.log(userId)
+    if (data["message"]["user_id"] === userId) {
+      console.log("TRIGGER MODAL")
+      const acceptButton = document.getElementById('accept-button')
+      acceptButton.style.display = "block"
+      // const receiveCall = document.getElementById('receive-call')
+      // receiveCall.dataset.toggle = 'modal'
+      // receiveCall.dataset.target ='#calleeModal'
+      // console.log(receiveCall)
+
+      // const calleeModal = document.getElementById('calleeModal')
+      // calleeModal.modal("show")
+
+      console.log(`user with id: ${userId} needs to subscribe to chatroom ${data["message"]["chat_room_id"]}`)
+    }
+  }
+})