updated MatchChat

src/components/TranslateChatButton.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="toggle-btn text-muted">
-    <div class="d-flex" @click.prevent="$emit('translated', handleBtnClick())">
+    <div class="d-flex" @click.prevent="handleBtnClick">
       <span class="text-center mx-2">
         <i id="toggle-off" class="fa fa-toggle-off show" />
         <i id="toggle-on" class="fa fa-toggle-on" />
@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { onMounted, reactive, ref } from "vue";
 import ISO6391 from "iso-639-1";
 import { GetChatHistoryTranslated } from "@/utils";
@@ -32,14 +32,8 @@ import { useInfoStateStore } from "@/stores/infoState";
 const matchDetailsStore = useMatchDetailsStore();
 const infoStateStore = useInfoStateStore();
 
-// TODO: Maybe remove props
-const props = defineProps<{
-  translated: boolean;
-}>();
-
-// TODO: needs more work
 const emit = defineEmits<{
-  (e: "translate", ): [MatchChat || null, string]
+  (e: "translated", toggle: string): void;
 }>();
 
 const data = reactive({
@@ -71,20 +65,21 @@ const handleBtnClick = async () => {
   ) as HTMLElement;
   refreshButton.classList.add("show");
 
-  toggleShow();
-
-  // TODO: Needs more work
   // TODO: Add langCode
   const [response, info] = await GetChatHistoryTranslated(
     matchDetailsStore.matchDetails.match_id
   );
 
   if (info.message !== "") infoStateStore.addInfo(info);
+  if (response !== null) {
+    matchDetailsStore.matchChat = response;
 
-  if (refreshButton.classList.contains("show"))
-    refreshButton.classList.remove("show");
+    toggleShow();
+    if (refreshButton.classList.contains("show"))
+      refreshButton.classList.remove("show");
+  }
 
-  return [response, toggle.value];
+  emit("translated", toggle.value);
 };
 
 const toggleShow = () => {