added chatroom channel with room ids and notifications channel

app/assets/javascripts/signaling-server.js

@@ -40,9 +40,14 @@ document.onreadystatechange = async () => {
   }
 };
 
+// find chatroom
+const chatroomId = document.getElementById('chatroom-hook').dataset["chatroomId"]
 
 const handleJoinSession = async () => {
-  App.session = await App.cable.subscriptions.create("VideoSessionChannel", {
+  App.session = await App.cable.subscriptions.create({
+    channel: "ChatRoomsChannel",
+    room: chatroomId
+  }, {
     connected: () => {
       broadcastData({
         type: JOIN_ROOM,

app/assets/stylesheets/pages/_contacts.scss

@@ -50,6 +50,10 @@ a:hover {
       color: $icon;
       font-size: 25px;
     }
+    button {
+      height: 0;
+      width: 0;
+    }
   }
 
 }

app/channels/chat_rooms_channel.rb

@@ -0,0 +1,9 @@
+class ChatRoomsChannel < ApplicationCable::Channel
+  def subscribed
+    stream_from "chat_room_#{params[:room]}"
+  end
+
+  def unsubscribed
+    # Any cleanup needed when channel is unsubscribed
+  end
+end

app/channels/notifications_channel.rb

@@ -0,0 +1,9 @@
+class NotificationsChannel < ApplicationCable::Channel
+  def subscribed
+    stream_from "notifications"
+  end
+
+  def unsubscribed
+    # Any cleanup needed when channel is unsubscribed
+  end
+end

app/controllers/chat_rooms_controller.rb

@@ -1,5 +1,9 @@
 class ChatRoomsController < ApplicationController
 
+  def show
+    @chat_room = ChatRoom.find(params[:id])
+  end
+
   def create
 
   end

app/controllers/pages_controller.rb

@@ -1,5 +1,6 @@
 class PagesController < ApplicationController
   # skip_before_action :authenticate_user!, only: [:call]
+  skip_before_action :verify_authenticity_token
 
   def call
   end
@@ -9,4 +10,32 @@ class PagesController < ApplicationController
 
   def home
   end
+
+  def cable_testing
+    chatroom = 'chat_room_' + params[:chat_room_id]
+    puts params
+    ActionCable.server.broadcast(chatroom, { message: 'test' })
+    head :ok
+  end
+
+  def establish_call
+    head :ok
+    puts "params: #{params}"
+    chat_room = ChatRoom.create!
+    puts "Created chat room with id: #{chat_room.id}"
+    chat_room_participation = ChatRoomParticipation.create!(chat_room: chat_room, user: current_user)
+    puts "Created chat room participation with user: #{current_user.email} assigned to chat_room #{chat_room.id}"
+    puts "Subscribed user to chat room"
+
+    contact = User.find(params[:contact_id])
+    request = Request.create!(chat_room: chat_room, user: contact)
+    puts "Made a request to call #{contact.email}"
+    ActionCable.server.broadcast('notifications', {
+      message: {
+        user_id: contact.id,
+        chat_room_id: chat_room.id
+      }
+    })
+
+  end
 end

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"]}`)
+    }
+  }
+})

app/models/chat_room.rb

@@ -1,5 +1,5 @@
 class ChatRoom < ApplicationRecord
-  has_many :users, through: :chat_room_participations
   has_many :chat_room_participations
+  has_many :users, through: :chat_room_participations
   has_many :requests
 end

app/models/user.rb

@@ -5,8 +5,8 @@ class User < ApplicationRecord
          :recoverable, :rememberable, :validatable
 
   has_many :connections
-  has_many :chat_rooms, through: :chat_room_participations
   has_many :chat_room_participations
+  has_many :chat_rooms, through: :chat_room_participations
   has_many :requests
 
   def contacts

app/views/chat_rooms/show.html.erb

@@ -0,0 +1,6 @@
+<h1 style="color: white;">This is chatroom #<%= @chat_room.id %></h1>
+<div id="chatroom-hook" data-chatroom-id='<%= @chat_room.id %>'></div>
+
+<button id="test-btn">Test Connection</button>
+
+<%= javascript_pack_tag 'chatrooms' %>

app/views/pages/_contact.html.erb

@@ -1,18 +1,30 @@
+<%
+def hello_world
+  puts "Hello World"
+end
+%>
+
 <div class="card">
   <div class="info">
     <img src="https://kitt.lewagon.com/placeholder/users/ssaunier" alt="" class="profile img-circle" width=65>
     <div class="text text-color">
-      <p>FirstName LastName</p>
+      <% if contact.nil? || contact.nil? %> <!-- REPLACE WITH FIRST NAME AND LAST NAME -->
+        <p><%= contact.email %></p>
+      <% else %>
+        <p><%= contact.email %></p>
+        <!-- <p><%#= contact.first_name %> <%#= contact.last_name %></p> -->
+      <% end %>
       <p class="darker">Last call: <%= Time.now %></p>
     </div>
   </div>
-  <div class="call">
-    <%= link_to "#", 'data-toggle':"modal", 'data-target':"#myModal" do  %>
+  <div class="call" data-user-id="<%= contact.id %>">
+    <%= link_to establish_call_path(contact.id), 'data-toggle':"modal", 'data-target':"#myModal" do  %>
       <i class="fas fa-phone"></i>
     <% end %>
   </div>
 </div>
 
+
 <!-- Modal -->
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="vertical-alignment-helper">
@@ -27,7 +39,17 @@
               <img src="https://kitt.lewagon.com/placeholder/users/ssaunier" alt="" class="profile img-circle" width=150>
               <div class="modal-text">
                 <h4 class="modal-title" id="myModalLabel">Calling</h4>
-                <h4><strong>FirstName LastName</strong></h4>
+                <h4>
+                  <strong>
+                    <!-- REPLACE WITH FIRST NAME AND LAST NAME -->
+                    <% if contact.nil? || contact.nil? %>
+                      <p><%= contact.email %></p>
+                    <% else %>
+                      <p><%= contact.email %></p>
+                      <!-- <p><%#= contact.first_name %> <%#= contact.last_name %></p> -->
+                    <% end %>
+                  </strong>
+                </h4>
               </div>
             </div>
           </div>

app/views/pages/index.html.erb

@@ -2,8 +2,8 @@
   <div class="contacts-container text-color">
     <div class="contacts half">
       <h2>Contacts</h2>
-      <% 5.times do %>
-        <%= render "pages/contact" %>
+      <% current_user.contacts.each do |contact| %>
+        <%= render "pages/contact", contact: contact %>
       <% end %>
     </div>
     <div class="video-feed half">
@@ -14,6 +14,7 @@
   </div>
 </div>
 
+<div id="my-user-id" data-user-id="<%= current_user.id %>"></div>
+<%= javascript_pack_tag 'notifications' %>
 
-
-
+<button class="btn btn-primary" id="accept-button" style="display: none;">ACCEPT CALL</button>