From dd21623b599b48859b8d5681a03e3e196dacd88e Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Wed, 13 Nov 2024 06:54:28 +0900
Subject: [PATCH] [Update/Refactor] Main Page: Translation Engines. Apply
 Localization.

---
 .../TranslatorSelectorOpenButton.jsx          | 25 +++++++++++++------
 .../TranslatorSelector.jsx                    |  2 +-
 src-ui/utils/updateLabelsById.js              |  6 +++++
 3 files changed, 25 insertions(+), 8 deletions(-)
 create mode 100644 src-ui/utils/updateLabelsById.js

diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
index 1a09c034..1c803415 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
+++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-
+import { updateLabelsById } from "@utils/updateLabelsById";
 import styles from "./TranslatorSelectorOpenButton.module.scss";
 import { TranslatorSelector } from "./translator_selector/TranslatorSelector";
 import { useStore_IsOpenedTranslatorSelector } from "@store";
@@ -13,11 +13,22 @@ export const TranslatorSelectorOpenButton = () => {
         currentSelectedTranslationEngines,
     } = useLanguageSettings();
 
-    const selected_label = (currentTranslationEngines.state === "pending")
-    ? "Loading..."
-    : currentTranslationEngines.data.find(
-        translator_data => translator_data.id === currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data]
-    )?.label;
+    const new_labels = [
+        {id: "CTranslate2", label: t("main_page.translator_ctranslate2")}
+    ];
+
+    const translation_engines = updateLabelsById(currentTranslationEngines.data, new_labels);
+
+    const getSelectedLabel = () => {
+        const selected_engine_id = currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data];
+        const selected_engine = translation_engines.find(
+            d => d.id === selected_engine_id
+        );
+        return selected_engine?.label;
+    };
+
+    const is_loading = currentTranslationEngines.state === "pending";
+    const selected_label = is_loading ? "Loading..." : getSelectedLabel();
 
 
     const { currentIsOpenedTranslatorSelector, updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
@@ -35,7 +46,7 @@ export const TranslatorSelectorOpenButton = () => {
             {currentIsOpenedTranslatorSelector.data &&
                 <TranslatorSelector
                     selected_id={currentSelectedTranslationEngines}
-                    translation_engines={currentTranslationEngines}
+                    translation_engines={translation_engines}
                 />
             }
         </div>
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx
index bbbe616f..8ea0f98c 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx
+++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx
@@ -6,7 +6,7 @@ import { useStore_IsOpenedTranslatorSelector } from "@store";
 import { useLanguageSettings } from "@logics_main";
 
 export const TranslatorSelector = ({selected_id, translation_engines}) => {
-    const columns = (translation_engines.data !== undefined) ? chunkArray(translation_engines.data, 2) : [];
+    const columns = chunkArray(translation_engines, 2);
 
     return (
         <div className={styles.container}>
diff --git a/src-ui/utils/updateLabelsById.js b/src-ui/utils/updateLabelsById.js
new file mode 100644
index 00000000..496adbf8
--- /dev/null
+++ b/src-ui/utils/updateLabelsById.js
@@ -0,0 +1,6 @@
+export const updateLabelsById = (data_array, updates) => {
+    return data_array.map(item => {
+        const update = updates.find(update_item => update_item.id === item.id);
+        return update ? { ...item, label: update.label } : item;
+    });
+};
\ No newline at end of file