updated MatchChat

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.7",
   "scripts": {
     "dev": "vite",
+    "host": "vite --host",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview --port 5050",
     "typecheck": "vue-tsc --noEmit",

src/components/MatchChatHistory.vue

@@ -2,7 +2,6 @@
   <div class="container w-50">
     <TranslateChatButton
         v-if="data.chat.length > 0"
-      :translated="data.translatedText.length > 0"
         class="translate-btn"
         @translated="handleTranslatedText"
     />
@@ -70,7 +69,7 @@
               </span>
           </td>
           <td class="td-icon">
-              <i class="fa fa-caret-right" />
+            <i class="fa fa-caret-right"/>
             <span v-if="!m.all_chat" class="ms-1"> (team) </span>
           </td>
           <td class="td-message">
@@ -85,7 +84,7 @@
                 :title="`Translated from ${ISO6391.getName(m.translated_from)}`"
                 class="ms-2 helpicon"
             >
-                <br />
+                <br/>
                 {{ m.message }}
               </span>
           </td>
@@ -100,7 +99,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive } from "vue";
+import {onMounted, reactive} from "vue";
 import {
   constructAvatarUrl,
   ConvertTickToTime,
@@ -118,34 +117,32 @@ import type {MatchChat, MatchChatItem, MatchStats} from "@/types";
 const matchDetailsStore = useMatchDetailsStore();
 const infoStoreState = useInfoStateStore();
 
-interface ChatStats extends MatchStats, MatchChatItem {}
+interface ChatStats extends MatchStats, MatchChatItem {
+}
 
 const data = reactive({
   chat: [] as ChatStats[],
   translatedText: [] as ChatStats[],
-  originalChat: [],
+  originalChat: [] as ChatStats[],
   clientWidth: 0,
 });
 
-const handleTranslatedText = async (e: PromiseLike<[any, any]> | [any, any]) => {
-  const [res, toggle] = await e;
-
-  if (res !== null) {
-    if (toggle === "translated") {
-      data.translatedText = await setPlayer(sortChatHistory(res, true));
+const handleTranslatedText = (e: string) => {
+  if (e === "translated") {
+    data.translatedText = setPlayer(sortChatHistory(matchDetailsStore.matchChat, true));
     data.chat = data.translatedText;
-    } else if (toggle === "original") {
+  } else if (e === "original") {
     data.chat = data.originalChat;
   }
-  }
-};
+  console.log(matchDetailsStore.matchChat)
+}
 
 const getChatHistory = async () => {
   const [resData, info] = await GetChatHistory(matchDetailsStore.matchDetails.match_id);
 
   if (info.message !== "") infoStoreState.addInfo(info);
   if (resData !== null) {
-    data.chat = await setPlayer(sortChatHistory(resData));
+    data.chat = setPlayer(sortChatHistory(resData));
     data.originalChat = data.chat;
   }
 };
@@ -171,7 +168,7 @@ const sortChatHistory = (res: MatchChat = {}, translated = false): MatchChatItem
   return arr;
 };
 
-const setPlayer = async (chat: MatchChatItem[]): ChatStats[] => {
+const setPlayer = (chat: MatchChatItem[]): ChatStats[] => {
   let arr: ChatStats[] = [];
   for (const o of chat) {
     for (const p of matchDetailsStore.matchDetails.stats || []) {

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;
 
+    toggleShow();
     if (refreshButton.classList.contains("show"))
       refreshButton.classList.remove("show");
+  }
 
-  return [response, toggle.value];
+  emit("translated", toggle.value);
 };
 
 const toggleShow = () => {

src/stores/matchDetails.ts

@@ -1,8 +1,9 @@
 import { defineStore } from "pinia";
-import type { Match } from "@/types";
+import type { Match, MatchChat } from "@/types";
 
 export type RootState = {
   matchDetails: Match;
+  matchChat: MatchChat;
 };
 
 export const useMatchDetailsStore = defineStore({
@@ -10,6 +11,7 @@ export const useMatchDetailsStore = defineStore({
   state: () =>
     ({
       matchDetails: {},
+      matchChat: {},
     } as RootState),
   actions: {},
   getters: {},