From 6a1992a29f521123b044198b0743c9be31a8a9b7 Mon Sep 17 00:00:00 2001
From: Beatrice Olivera <beatriceolivera1999@gmail.com>
Date: Sat, 1 Sep 2018 20:23:53 +0100
Subject: [PATCH] fixed issue where calling modal was only appeared for the
 first contact in list

---
 app/javascript/components/modal.js | 17 ++++++++++-------
 app/views/pages/_contact.html.erb  |  6 +++---
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/javascript/components/modal.js b/app/javascript/components/modal.js
index a35d32a..f4cdcf0 100644
--- a/app/javascript/components/modal.js
+++ b/app/javascript/components/modal.js
@@ -1,12 +1,15 @@
 const triggerModalEvent = () => {
-  const btn = document.getElementById("modalTrigger");
-  const modal = document.getElementById("myModal");
 
-  if (btn) {
-    btn.addEventListener('click', function(event) {
-      $('#myModal').modal('show');
-    });
-  }
+  const buttons = document.querySelectorAll(".modalTrigger");
+
+  buttons.forEach(btn => {
+    if (btn) {
+      btn.addEventListener('click', function(event) {
+        const btnId = btn.getAttribute('data-user-id')
+        $("#myModal"+`${btnId}`).modal('show');
+      });
+    }
+  })
 }
 
 export { triggerModalEvent }
diff --git a/app/views/pages/_contact.html.erb b/app/views/pages/_contact.html.erb
index 7b06c6c..92f1689 100644
--- a/app/views/pages/_contact.html.erb
+++ b/app/views/pages/_contact.html.erb
@@ -16,19 +16,19 @@
   </div>
   <div class="call" data-user-id="<%= contact.id %>">
     <!-- Calls establish_call in pages_controller -->
-    <%= link_to establish_call_path(contact.id), remote: true, id: "modalTrigger" do  %>
+    <%= link_to establish_call_path(contact.id), remote: true, class: "modalTrigger", data: {'user-id': contact.id } 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="modal fade" id="myModal<%= contact.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="vertical-alignment-helper">
     <div class="modal-dialog vertical-align-center">
       <div class="modal-content modal-color">
         <div class="modal-header">
-          <%= link_to "#", class:"pull-right", 'data-dismiss':"modal", 'data-target':"#myModal" do  %>
+          <%= link_to "#", class:"pull-right", 'data-dismiss':"modal", 'data-target':"#myModal#{contact.id}" do  %>
             <i class="fas fa-times-circle"></i>
           <% end %>
           <div class="container">