feat(web): instant-translate

kleros · Nov 30, 2024 · 1d59d83 · 1d59d83
1 parent 1c20e01
commit 1d59d83
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 15 deletions.
diff --git a/web/global.d.ts b/web/global.d.ts
@@ -10,11 +10,25 @@ declare global {
     const path: string;
     export default path;
   }
+  interface Window {
+    google: {
+      translate: {
+        TranslateElement: new (
+          config: {
+            pageLanguage: string;
+            includedLanguages: string;
+          },
+          elementId: string
+        ) => void;
+      };
+    };
+    googleTranslateElementInit: () => void;
+  }
 }
 
 declare module "styled-components" {
   type Theme = typeof lightTheme;
-  //eslint-disable-next-line @typescript-eslint/no-empty-interface
+
   export interface DefaultTheme extends Theme {}
 }
 

diff --git a/web/src/components/TranslateDropdown.tsx b/web/src/components/TranslateDropdown.tsx
@@ -5,13 +5,13 @@ import { DropdownSelect } from "@kleros/ui-components-library";
 import { SupportedLangs, useTranslate } from "context/TranslateProvider";
 
 const Langs: { value: SupportedLangs; text: string }[] = [
-  { text: "en", value: "en" },
-  { text: "es", value: "es" },
-  { text: "hi", value: "hi" },
-  { text: "js", value: "ja" },
-  { text: "zh", value: "zh" },
-  { text: "ko", value: "ko" },
-  { text: "fr", value: "fr" },
+  { text: "English", value: "en" },
+  { text: "Spanish", value: "es" },
+  { text: "Hindi", value: "hi" },
+  { text: "Japanese", value: "ja" },
+  { text: "Chinese", value: "zh" },
+  { text: "Korean", value: "ko" },
+  { text: "French", value: "fr" },
 ];
 
 const TranslateDropdown: React.FC = () => {
@@ -26,8 +26,7 @@ const TranslateDropdown: React.FC = () => {
       }))}
       defaultValue={"en"}
       callback={(val) => {
-        //@ts-expect-error is string
-        setLang(val);
+        setLang(val as SupportedLangs);
       }}
     />
   );

diff --git a/web/src/context/TranslateProvider.tsx b/web/src/context/TranslateProvider.tsx
@@ -23,20 +23,17 @@ export const TranslateProvider: React.FC<{ children: React.ReactNode }> = ({ chi
 
   useEffect(() => {
     try {
-      // Check if the Google Translate script is already in the document
       const existingScript = document.querySelector('script[src*="translate.google.com/translate_a/element.js"]');
       if (!existingScript) {
         const addScript = document.createElement("script");
         addScript.setAttribute("src", "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit");
         document.body.appendChild(addScript);
 
-        //@ts-expect-error will exist
         window.googleTranslateElementInit = () => {
-          //@ts-expect-error will exist
           new window.google.translate.TranslateElement(
             {
               pageLanguage: "en",
-              includedLanguages: "en,es,hi,ja,zh,fr,ko", // Include all languages you need here
+              includedLanguages: "en,es,hi,ja,zh,fr,ko",
             },
             "google_translate_element"
           );
@@ -52,7 +49,13 @@ export const TranslateProvider: React.FC<{ children: React.ReactNode }> = ({ chi
     (cValue: SupportedLangs) => {
       setCurrentLang(cValue);
       document.cookie = "googtrans" + "=" + `/en/${cValue}` + ";" + "Session" + ";path=/";
-      window.location.reload();
+      if (window.google?.translate?.TranslateElement) {
+        const select = document.querySelector(".goog-te-combo") as HTMLSelectElement;
+        if (select) {
+          select.value = cValue;
+          select.dispatchEvent(new Event("change"));
+        }
+      }
     },
     [setCurrentLang]
   );

diff --git a/web/src/layout/Header/navbar/Menu/index.tsx b/web/src/layout/Header/navbar/Menu/index.tsx
@@ -12,6 +12,7 @@ import { useToggleTheme } from "hooks/useToggleThemeContext";
 import { landscapeStyle } from "styles/landscapeStyle";
 
 import LightButton from "components/LightButton";
+import TranslateDropdown from "components/TranslateDropdown";
 
 import { IHelp, ISettings } from "..";
 
@@ -90,6 +91,7 @@ const Menu: React.FC<ISettings & IHelp> = ({ toggleIsHelpOpen, toggleIsSettingsO
           <LightButton {...{ text, onClick, Icon }} />
         </ButtonContainer>
       ))}
+      <TranslateDropdown />
     </Container>
   );
 };