wip

src/components/TranslateChatButton.vue

@@ -22,86 +22,89 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { onMounted, reactive, ref } from "vue";
 import ISO6391 from "iso-639-1";
-import { GetChatHistoryTranslated } from "/src/utils";
-import { useStore } from "vuex";
+import { GetChatHistoryTranslated } from "@/utils";
+import { useMatchDetailsStore } from "@/stores/matchDetails";
+import { useInfoStateStore } from "@/stores/infoState";
 
-export default {
-  name: "TranslateChatButton",
-  props: {
-    translated: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  setup() {
-    const store = useStore();
+const matchDetailsStore = useMatchDetailsStore();
+const infoStateStore = useInfoStateStore();
 
-    const data = reactive({
-      browserIsoCode: "",
-      browserLangCode: "",
-      browserLang: "",
-    });
+// TODO: Maybe remove props
+const props = defineProps<{
+  translated: boolean;
+}>();
 
-    const toggle = ref("original");
+// TODO: needs more work
+const emit = defineEmits<{
+  (e: "translate", ): [MatchChat || null, string]
+}>();
 
-    const setLanguageVariables = () => {
-      const navLangs = navigator.languages;
+const data = reactive({
+  browserIsoCode: "",
+  browserLangCode: "",
+  browserLang: "",
+});
 
-      data.browserIsoCode = navLangs.find((l) => l.length === 5);
-      data.browserLangCode = navLangs[0];
+const toggle = ref("original");
 
-      if (ISO6391.validate(data.browserLangCode)) {
-        data.browserLang = ISO6391.getNativeName(data.browserLangCode);
-      } else {
-        data.browserIsoCode = "en-US";
-        data.browserLangCode = "en";
-        data.browserLang = "English";
-      }
-    };
+const setLanguageVariables = () => {
+  const navLangs = navigator.languages;
 
-    const handleBtnClick = async () => {
-      let response;
+  data.browserIsoCode = navLangs.find((l) => l.length === 5) || "";
+  data.browserLangCode = navLangs[0];
 
-      const refreshButton = document.querySelector(".loading-icon .fa-spinner");
-      refreshButton.classList.add("show");
-
-      toggleShow();
-
-      response = await GetChatHistoryTranslated(
-        store,
-        store.state.matchDetails.match_id
-      );
-
-      if (refreshButton.classList.contains("show"))
-        refreshButton.classList.remove("show");
-
-      return [response, toggle.value];
-    };
-
-    const toggleShow = () => {
-      const offBtn = document.getElementById("toggle-off");
-      const onBtn = document.getElementById("toggle-on");
-
-      if (offBtn.classList.contains("show")) {
-        offBtn.classList.remove("show");
-        onBtn.classList.add("show");
-        toggle.value = "translated";
-      } else if (onBtn.classList.contains("show")) {
-        onBtn.classList.remove("show");
-        offBtn.classList.add("show");
-        toggle.value = "original";
-      }
-    };
-
-    onMounted(() => {
-      setLanguageVariables();
-    });
-    return { data, toggle, handleBtnClick };
-  },
+  if (ISO6391.validate(data.browserLangCode)) {
+    data.browserLang = ISO6391.getNativeName(data.browserLangCode);
+  } else {
+    data.browserIsoCode = "en-US";
+    data.browserLangCode = "en";
+    data.browserLang = "English";
+  }
 };
+
+const handleBtnClick = async () => {
+  const refreshButton = document.querySelector(
+    ".loading-icon .fa-spinner"
+  ) 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 (refreshButton.classList.contains("show"))
+    refreshButton.classList.remove("show");
+
+  return [response, toggle.value];
+};
+
+const toggleShow = () => {
+  const offBtn = document.getElementById("toggle-off") as HTMLElement;
+  const onBtn = document.getElementById("toggle-on") as HTMLElement;
+
+  if (offBtn.classList.contains("show")) {
+    offBtn.classList.remove("show");
+    onBtn.classList.add("show");
+    toggle.value = "translated";
+  } else if (onBtn.classList.contains("show")) {
+    onBtn.classList.remove("show");
+    offBtn.classList.add("show");
+    toggle.value = "original";
+  }
+};
+
+onMounted(() => {
+  setLanguageVariables();
+});
 </script>
 
 <style lang="scss" scoped>