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
 
+  if (original !== target) {
     fetch(`/chat_rooms/${chatroomId}/translate` , {
       method: 'POST',
       body: JSON.stringify({
         original,
         target,
         text,
-      input: 1
+        input: 1,
+        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` , {
       method: 'POST',
       body: JSON.stringify({
         original: original,
         target: target,
         text: text,
-      input: 2
+        input: 2,
+        userId
       }),
       headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
     })
+  } else {
+    document.getElementById('language-1-input').value = text
+  }
 })