From 0f7297aa7021a15b467c410bb43813e404db38eb Mon Sep 17 00:00:00 2001
From: rift <117926989+Riftriot@users.noreply.github.com>
Date: Sat, 16 Dec 2023 14:13:04 -0600
Subject: [PATCH] Translation support for dropdown.tsx component

---
 src/locales/en.json             |  4 +++
 src/locales/ja.json             |  4 +++
 src/pages/Home.tsx              |  1 -
 src/pages/Settings/Dropdown.tsx | 44 ++++++++++++++++++++++---------
 src/pages/Settings/Misc.tsx     | 46 +++++++++++++++++++++++----------
 src/pages/Settings/Proxy.tsx    | 11 ++++++--
 6 files changed, 81 insertions(+), 29 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index e4a48ad..5c88410 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -24,6 +24,10 @@
       "tab": "Tab",
       "custom": "Customization",
       "misc": "Misc"
+    },
+    "proxy": {
+      "title": "Proxy",
+      "automatic": "Automatic"
     }
   }
 }
diff --git a/src/locales/ja.json b/src/locales/ja.json
index 5793763..7003a4f 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -24,6 +24,10 @@
       "tab": "タブ",
       "custom": "カスタマイズ",
       "misc": "その他"
+    },
+    "proxy": {
+      "title": "プロキシ",
+      "automatic": "自動"
     }
   }
 }
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 674d91e..df0d79b 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -1,7 +1,6 @@
 import { useState } from "preact/hooks";
 import { useTranslation } from "react-i18next";
 import { HeaderRoute } from "../components/HeaderRoute";
-
 export function Home() {
   const [isFocused, setIsFocused] = useState(false);
   const { t } = useTranslation();
diff --git a/src/pages/Settings/Dropdown.tsx b/src/pages/Settings/Dropdown.tsx
index 80d9648..6aab6d7 100644
--- a/src/pages/Settings/Dropdown.tsx
+++ b/src/pages/Settings/Dropdown.tsx
@@ -1,10 +1,29 @@
-import { useState } from "preact/hooks";
+import { useState, useEffect } from "preact/hooks";
 
-const Dropdown = ({ name, options }: { name: string; options: string[] }) => {
+interface Option {
+  id: string;
+  label: string; // Translations CAN be passed
+}
+
+const Dropdown = ({
+  name,
+  options,
+  storageKey
+}: {
+  name: string;
+  storageKey: string;
+  options: Option[];
+}) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [choice, setChoice] = useState(
-    localStorage.getItem(name) || options[0]
-  );
+
+  const [choice, setChoice] = useState(() => {
+    return localStorage.getItem(storageKey) || options[0]?.id || "";
+  });
+
+  // update on localstorage change
+  useEffect(() => {
+    setChoice(localStorage.getItem(storageKey) || options[0]?.id || "");
+  }, [storageKey, options]);
 
   return (
     <div className="relative text-center">
@@ -13,20 +32,22 @@ const Dropdown = ({ name, options }: { name: string; options: string[] }) => {
         className="font-roboto flex h-14 w-56 cursor-pointer flex-col items-center justify-center rounded-2xl border border-input-border-color bg-input text-center text-xl"
         onClick={() => setIsOpen(!isOpen)}
       >
-        <div className="select-none">{choice}</div>
+        <div className="select-none">
+          {options.find((o) => o.id === choice)?.label}
+        </div>
         {isOpen && (
           <div className="absolute top-full w-full border">
-            {options.map((option: string) => (
+            {options.map((option) => (
               <div
-                key={option}
+                key={option.id}
                 className="hover:bg-dropdown-option-hover-color"
                 onClick={() => {
                   setIsOpen(false);
-                  setChoice(option);
-                  localStorage.setItem(name, option);
+                  setChoice(option.id);
+                  localStorage.setItem(storageKey, option.id);
                 }}
               >
-                {option}
+                {option.label}
               </div>
             ))}
           </div>
@@ -37,4 +58,3 @@ const Dropdown = ({ name, options }: { name: string; options: string[] }) => {
 };
 
 export default Dropdown;
-
diff --git a/src/pages/Settings/Misc.tsx b/src/pages/Settings/Misc.tsx
index 4529582..b331a41 100644
--- a/src/pages/Settings/Misc.tsx
+++ b/src/pages/Settings/Misc.tsx
@@ -1,19 +1,37 @@
 import { motion } from "framer-motion";
 import { tabContentVariant, settingsPageVariant } from "./Variants";
+import Dropdown from "./Dropdown";
+import { useTranslation } from "react-i18next";
 
-const Misc = ({ id, active }) => (
-  <motion.div
-    role="tabpanel"
-    id={id}
-    className="tab-content"
-    variants={tabContentVariant}
-    animate={active ? "active" : "inactive"}
-    initial="inactive"
-  >
-    <motion.div variants={settingsPageVariant} className="content-card">
-      <h1>Misc settings</h1>
+const Misc = ({ id, active }) => {
+  const { t } = useTranslation();
+  const engines = [
+    { id: "automatic", label: t("settings.proxy.automatic") },
+    { id: "ultraviolet", label: "Ultraviolet" },
+    { id: "rammerhead", label: "Rammerhead" },
+    { id: "dynamic", label: "Dynamic" }
+  ];
+
+  return (
+    <motion.div
+      role="tabpanel"
+      id={id}
+      className="tab-content"
+      variants={tabContentVariant}
+      animate={active ? "active" : "inactive"}
+      initial="inactive"
+    >
+      <motion.div
+        variants={settingsPageVariant}
+        className="content-card flex flex-row flex-wrap justify-around"
+      >
+        <Dropdown
+          name={t("settings.proxy.title")}
+          storageKey="proxy"
+          options={engines}
+        />
+      </motion.div>
     </motion.div>
-  </motion.div>
-);
-
+  );
+};
 export default Misc;
diff --git a/src/pages/Settings/Proxy.tsx b/src/pages/Settings/Proxy.tsx
index eab9061..1ff1c2f 100644
--- a/src/pages/Settings/Proxy.tsx
+++ b/src/pages/Settings/Proxy.tsx
@@ -1,9 +1,16 @@
 import { motion } from "framer-motion";
 import { tabContentVariant, settingsPageVariant } from "./Variants";
 import Dropdown from "./Dropdown";
+import { useTranslation } from "react-i18next";
 
 const Proxy = ({ id, active }) => {
-  const engines = ["Automatic", "Ultraviolet", "Rammerhead", "Dynamic"];
+  const { t } = useTranslation();
+  const engines = [
+    { id: "automatic", label: t("settings.proxy.automatic") },
+    { id: "ultraviolet", label: "Ultraviolet" },
+    { id: "rammerhead", label: "Rammerhead" },
+    { id: "dynamic", label: "Dynamic" }
+  ];
 
   return (
     <motion.div
@@ -18,7 +25,7 @@ const Proxy = ({ id, active }) => {
         variants={settingsPageVariant}
         className="content-card flex flex-row flex-wrap justify-around"
       >
-        <Dropdown name="Engine" options={engines} />
+        <Dropdown name={t("settings.proxy.title")} storageKey="proxy" options={engines} />
       </motion.div>
     </motion.div>
   );