[Update/Refactor] Main Page: Translation Engines. Apply Localization.

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")
+    const new_labels = [
-    ? "Loading..."
+        {id: "CTranslate2", label: t("main_page.translator_ctranslate2")}
-    : currentTranslationEngines.data.find(
+    ];
-        translator_data => translator_data.id === currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data]
+
-    )?.label;
+    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>

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}>

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;
+    });
+};