[Update] Main Page: LanguageSelector. Fetch language list data from Python when starting up software.

src-ui/app/App.jsx

@@ -29,6 +29,8 @@ import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClear
 import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
 import { useUiLanguage } from "@logics_configs/useUiLanguage";
 
+import { useSelectableLanguageList } from "@logics/useSelectableLanguageList";
+
 const StartPythonFacadeComponent = () => {
     const { asyncStartPython } = useStartPython();
     const hasRunRef = useRef(false);
@@ -44,6 +46,8 @@ const StartPythonFacadeComponent = () => {
     const { getSendMessageButtonType } = useSendMessageButtonType();
     const { getUiLanguage } = useUiLanguage();
 
+    const { getSelectableLanguageList } = useSelectableLanguageList();
+
 
     useEffect(() => {
         main_page.setDecorations(true);
@@ -52,6 +56,9 @@ const StartPythonFacadeComponent = () => {
                 getUiLanguage();
 
                 getSoftwareVersion();
+
+                getSelectableLanguageList();
+
                 getSelectedMicHost();
                 getSelectedMicDevice();
                 getSelectedSpeakerDevice();

src-ui/app/main_page/main_section/language_selector/LanguageSelector.jsx

@@ -1,11 +1,13 @@
 import { useTranslation } from "react-i18next";
 
-import { language_list } from "@data";
+import { useSelectableLanguageList } from "@logics/useSelectableLanguageList";
 import styles from "./LanguageSelector.module.scss";
 
 import { LanguageSelectorTopBar } from "./language_selector_top_bar/LanguageSelectorTopBar";
 export const LanguageSelector = ({ id }) => {
     const { t } = useTranslation();
+    const { currentSelectableLanguageList, updateSelectableLanguageList } = useSelectableLanguageList();
+
 
     const languageTitles = {
         "your_language": t("selectable_language_window.title_your_language"),
@@ -25,7 +27,7 @@ export const LanguageSelector = ({ id }) => {
         }, {});
     };
 
-    const groupedLanguages = groupLanguagesByFirstLetter(language_list);
+    const groupedLanguages = groupLanguagesByFirstLetter(currentSelectableLanguageList);
 
     return (
         <div className={styles.container}>

src-ui/logics/useReceiveRoutes.js

@@ -1,6 +1,7 @@
 import { arrayToObject } from "@utils/arrayToObject";
 import { useMainFunction } from "./useMainFunction";
 import { useMessage } from "./useMessage";
+import { useSelectableLanguageList } from "./useSelectableLanguageList";
 import { useVolume } from "./useVolume";
 
 import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
@@ -25,6 +26,8 @@ export const useReceiveRoutes = () => {
         updateTranscriptionReceiveStatus,
     } = useMainFunction();
 
+    const { updateSelectableLanguageList } = useSelectableLanguageList();
+
     const {
         updateSentMessageLogById,
         addSentMessageLog,
@@ -63,6 +66,7 @@ export const useReceiveRoutes = () => {
         "/controller/callback_enable_transcription_receive": updateTranscriptionReceiveStatus,
         "/controller/callback_disable_transcription_receive": updateTranscriptionReceiveStatus,
 
+        "/controller/list_language_and_country": updateSelectableLanguageList,
 
         "/config/version": updateSoftwareVersion,
 

src-ui/logics/useSelectableLanguageList.js

@@ -0,0 +1,17 @@
+import { useStore_SelectableLanguageList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectableLanguageList = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectableLanguageList, updateSelectableLanguageList } = useStore_SelectableLanguageList();
+
+    const getSelectableLanguageList = () => {
+        asyncStdoutToPython("/controller/list_language_and_country");
+    };
+
+    return {
+        currentSelectableLanguageList,
+        getSelectableLanguageList,
+        updateSelectableLanguageList,
+    };
+};

src-ui/store.js

@@ -108,6 +108,8 @@ export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_Is
     "IsOpenedLanguageSelector"
 );
 
+export const { atomInstance: Atom_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook([], "SelectableLanguageList");
+
 export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAtomWithHook(1, "SelectedPresetTabNumber");
 export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
 export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId");