fixed bug where translations were also broadcasted to other client and fixed bug where the same original and target language caused a 500 error

app/controllers/pages_controller.rb

@@ -29,7 +29,8 @@ class PagesController < ApplicationController
     translation.text.gsub!("&#39;", "'")
     ActionCable.server.broadcast "chat_room_#{params[:chat_room_id]}", {
       translation: translation,
-      input: params[:input]
+      input: params[:input],
+      userId: current_user.id
     }
   end
 

app/javascript/packs/chatrooms.js

@@ -10,6 +10,7 @@ import ActionCable from 'actioncable'
 
 // find chatroom id
 const chatroomId = document.getElementById('chatroom-hook').dataset["chatroomId"]
+const userId = document.getElementById('current-user').innerText
 
 // create subsciptions
 App['chatroom' + chatroomId] = App.cable.subscriptions.create({
@@ -25,14 +26,14 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
       const message = document.createElement("p")
       message.innerText = `${chatMessage["time_stamp"]} ${chatMessage["user_info"]["name"]}: ${chatMessage["message"]}`
       messagesContainer.appendChild(message)
-    } else if (data["translation"]) {
+    } else if (data["translation"] && data["userId"] == userId) {
       if (data["input"] == 1) {
         document.getElementById('language-2-input').value = data["translation"].text
       } else {
         document.getElementById('language-1-input').value = data["translation"].text
       }
     } else {
-      console.log(data)
+      // console.log(data)
     }
   }
 })

app/javascript/packs/translate.js

@@ -1,3 +1,4 @@
+const userId = document.getElementById('current-user').innerText
 const languageForm1 = document.getElementById('lang-1')
 const languageForm2 = document.getElementById('lang-2')
 const chatroomId = document.getElementById('chatroom-hook').dataset["chatroomId"]
@@ -8,16 +9,21 @@ languageForm1.addEventListener('submit', event => {
   const target = document.getElementById('language-2').value
   const text = document.getElementById('language-1-input').value
 
-  fetch(`/chat_rooms/${chatroomId}/translate` , {
+  if (original !== target) {
-    method: 'POST',
+    fetch(`/chat_rooms/${chatroomId}/translate` , {
-    body: JSON.stringify({
+      method: 'POST',
-      original,
+      body: JSON.stringify({
-      target,
+        original,
-      text,
+        target,
-      input: 1
+        text,
-    }),
+        input: 1,
-    headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
+        userId
-  })
+      }),
+      headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
+    })
+  } else {
+    document.getElementById('language-2-input').value = text
+  }
   // post request and change form 1
 })
 
@@ -27,15 +33,19 @@ languageForm2.addEventListener('submit', event => {
   const target = document.getElementById('language-1').value
   const text = document.getElementById('language-2-input').value
   // post request and change form 2
-
+  if (original !== target) {
-  fetch(`/chat_rooms/${chatroomId}/translate` , {
+    fetch(`/chat_rooms/${chatroomId}/translate` , {
-    method: 'POST',
+      method: 'POST',
-    body: JSON.stringify({
+      body: JSON.stringify({
-      original: original,
+        original: original,
-      target: target,
+        target: target,
-      text: text,
+        text: text,
-      input: 2
+        input: 2,
-    }),
+        userId
-    headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
+      }),
-  })
+      headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
+    })
+  } else {
+    document.getElementById('language-1-input').value = text
+  }
 })