[Update] Config Page: Device Tab. To be selectable mic host and device.

src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx

@@ -37,7 +37,8 @@ export const DropdownMenu = (props) => {
 
     const getSelectedText = () => {
         if (props.state !== "hasData") return;
-        return (props.list[props.selected_id]) ? props.list[props.selected_id] : "Nothing selected";
+        return props.selected_id;
+        // return (props.list[props.selected_id]) ? props.list[props.selected_id] : "Nothing selected";
     };
 
 

src-ui/app/config_page/setting_section/setting_box/device/Device.jsx

@@ -9,6 +9,8 @@ import {
     useMicDeviceList,
 } from "@store";
 
+import { useConfig } from "@logics/useConfig";
+
 export const Device = () => {
     const { t } = useTranslation();
     const {
@@ -17,20 +19,25 @@ export const Device = () => {
     } = useSettingBox();
 
 
-    const { currentMicHostList, updateMicHostList } = useMicHostList();
-    const { currentSelectedMicHost, updateSelectedMicHost } = useSelectedMicHost();
+    const { currentMicHostList } = useMicHostList();
+    const { currentSelectedMicHost } = useSelectedMicHost();
 
     const { currentMicDeviceList } = useMicDeviceList();
-    const { currentSelectedMicDevice, updateSelectedMicDevice } = useSelectedMicDevice();
+    const { currentSelectedMicDevice } = useSelectedMicDevice();
+
+    const {
+        setSelectedMicHost,
+        setSelectedMicDevice,
+    } = useConfig();
 
     const selectFunction = (selected_data) => {
         switch (selected_data.dropdown_id) {
             case "mic_host":
-
+                setSelectedMicHost(selected_data.selected_id);
                 break;
 
             case "mic_device":
-
+                setSelectedMicDevice(selected_data.selected_id);
                 break;
 
             default:

src-ui/logics/useConfig.js

@@ -32,6 +32,9 @@ export const useConfig = () => {
         updateSelectedMicHost: (payload) => {
             updateSelectedMicHost(payload.data);
         },
+        setSelectedMicHost: (selected_mic_host) => {
+            asyncStdoutToPython("/controller/callback_set_mic_host", selected_mic_host);
+        },
 
         getMicDeviceList: () => asyncStdoutToPython("/controller/list_mic_device"),
         updateMicDeviceList: (payload) => {
@@ -41,6 +44,14 @@ export const useConfig = () => {
         updateSelectedMicDevice: (payload) => {
             updateSelectedMicDevice(payload.data);
         },
+        setSelectedMicDevice: (selected_mic_device) => {
+            asyncStdoutToPython("/controller/callback_set_mic_device", selected_mic_device);
+        },
+
+        updateMicHostAndDevice: (payload) => {
+            updateSelectedMicHost(payload.data.host);
+            updateSelectedMicDevice(payload.data.device);
+        },
 
 
     };

src-ui/logics/useReceiveRoutes.js

@@ -21,6 +21,7 @@ export const useReceiveRoutes = () => {
         updateSelectedMicHost,
         updateMicDeviceList,
         updateSelectedMicDevice,
+        updateMicHostAndDevice,
     } = useConfig();
 
     const routes = {
@@ -36,6 +37,8 @@ export const useReceiveRoutes = () => {
         "/config/choice_mic_host": updateSelectedMicHost,
         "/controller/list_mic_device": updateMicDeviceList,
         "/config/choice_mic_device": updateSelectedMicDevice,
+        "/controller/callback_set_mic_host": updateMicHostAndDevice,
+        "/controller/callback_set_mic_device": updateSelectedMicDevice,
 
         "/controller/callback_messagebox_send": updateSentMessageLog,
         "/action/transcription_send_mic_message": addSentMessageLog,