[Perf/bugfix] Separate custom hooks and prevent re-render issues.

Config Page: Device Tab. threshold component. fix problem that the input component focused out when input something each time.
Set threshold data when started python.

src-ui/logics/configs/useEnableAutoClearMessageBox.js

@@ -0,0 +1,28 @@
+import { useEnableAutoClearMessageBox as useStoreEnableAutoClearMessageBox } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useEnableAutoClearMessageBox = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useStoreEnableAutoClearMessageBox();
+
+    const getEnableAutoClearMessageBox = () => {
+        updateEnableAutoClearMessageBox(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/enable_auto_clear_message_box");
+    };
+
+    const toggleEnableAutoClearMessageBox = () => {
+        updateEnableAutoClearMessageBox(() => new Promise(() => {}));
+        if (currentEnableAutoClearMessageBox.data) {
+            asyncStdoutToPython("/controller/callback_disable_auto_clear_chatbox");
+        } else {
+            asyncStdoutToPython("/controller/callback_enable_auto_clear_chatbox");
+        }
+    };
+
+    return {
+        getEnableAutoClearMessageBox,
+        toggleEnableAutoClearMessageBox,
+        currentEnableAutoClearMessageBox,
+        updateEnableAutoClearMessageBox
+    };
+};

src-ui/logics/configs/useMicDeviceList.js

@@ -0,0 +1,14 @@
+import { useMicDeviceList as useStoreMicDeviceList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicDeviceList = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentMicDeviceList, updateMicDeviceList } = useStoreMicDeviceList();
+
+    const getMicDeviceList = () => {
+        updateMicDeviceList(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/list_mic_device");
+    };
+
+    return { currentMicDeviceList, getMicDeviceList, updateMicDeviceList };
+};

src-ui/logics/configs/useMicHostList.js

@@ -0,0 +1,14 @@
+import { useMicHostList as useStoreMicHostList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicHostList = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentMicHostList, updateMicHostList } = useStoreMicHostList();
+
+    const getMicHostList = () => {
+        updateMicHostList(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/list_mic_host");
+    };
+
+    return { currentMicHostList, getMicHostList, updateMicHostList };
+};

src-ui/logics/configs/useMicThreshold.js

@@ -0,0 +1,17 @@
+import { useMicThreshold as useStoreMicThreshold } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicThreshold = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { updateMicThreshold, currentMicThreshold } = useStoreMicThreshold();
+
+    const getMicThreshold = () => {
+        asyncStdoutToPython("/config/input_mic_energy_threshold");
+    };
+
+    const setMicThreshold = (mic_threshold) => {
+        asyncStdoutToPython("/controller/callback_set_mic_energy_threshold", mic_threshold);
+    };
+
+    return { getMicThreshold, setMicThreshold, currentMicThreshold, updateMicThreshold };
+};

src-ui/logics/configs/useSelectedMicDevice.js

@@ -0,0 +1,19 @@
+import { useSelectedMicDevice as useStoreSelectedMicDevice } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedMicDevice = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectedMicDevice, updateSelectedMicDevice } = useStoreSelectedMicDevice();
+
+    const getSelectedMicDevice = () => {
+        updateSelectedMicDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/choice_mic_device");
+    };
+
+    const setSelectedMicDevice = (selected_mic_device) => {
+        updateSelectedMicDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_mic_device", selected_mic_device);
+    };
+
+    return { currentSelectedMicDevice, getSelectedMicDevice, updateSelectedMicDevice, setSelectedMicDevice };
+};

src-ui/logics/configs/useSelectedMicHost.js

@@ -0,0 +1,19 @@
+import { useSelectedMicHost as useStoreSelectedMicHost } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedMicHost = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectedMicHost, updateSelectedMicHost } = useStoreSelectedMicHost();
+
+    const getSelectedMicHost = () => {
+        updateSelectedMicHost(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/choice_mic_host");
+    };
+
+    const setSelectedMicHost = (selected_mic_host) => {
+        updateSelectedMicHost(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_mic_host", selected_mic_host);
+    };
+
+    return { currentSelectedMicHost, getSelectedMicHost, updateSelectedMicHost, setSelectedMicHost };
+};

src-ui/logics/configs/useSelectedSpeakerDevice.js

@@ -0,0 +1,19 @@
+import { useSelectedSpeakerDevice as useStoreSelectedSpeakerDevice } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedSpeakerDevice = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectedSpeakerDevice, updateSelectedSpeakerDevice } = useStoreSelectedSpeakerDevice();
+
+    const getSelectedSpeakerDevice = () => {
+        updateSelectedSpeakerDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/choice_speaker_device");
+    };
+
+    const setSelectedSpeakerDevice = (selected_speaker_device) => {
+        updateSelectedSpeakerDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_speaker_device", selected_speaker_device);
+    };
+
+    return { currentSelectedSpeakerDevice, getSelectedSpeakerDevice, updateSelectedSpeakerDevice, setSelectedSpeakerDevice };
+};

src-ui/logics/configs/useSendMessageButtonType.js

@@ -0,0 +1,24 @@
+import { useSendMessageButtonType as useStoreSendMessageButtonType } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSendMessageButtonType = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSendMessageButtonType, updateSendMessageButtonType } = useStoreSendMessageButtonType();
+
+    const getSendMessageButtonType = () => {
+        updateSendMessageButtonType(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/send_message_button_type");
+    };
+
+    const setSendMessageButtonType = (selected_type) => {
+        updateSendMessageButtonType(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_send_message_button_type", selected_type);
+    };
+
+    return {
+        getSendMessageButtonType,
+        setSendMessageButtonType,
+        currentSendMessageButtonType,
+        updateSendMessageButtonType
+    };
+};

src-ui/logics/configs/useSoftwareVersion.js

@@ -0,0 +1,14 @@
+import { useSoftwareVersion as useStoreSoftwareVersion } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSoftwareVersion = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSoftwareVersion, updateSoftwareVersion } = useStoreSoftwareVersion();
+
+    const getSoftwareVersion = () => {
+        updateSoftwareVersion(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/version");
+    };
+
+    return { currentSoftwareVersion, getSoftwareVersion, updateSoftwareVersion };
+};

src-ui/logics/configs/useSpeakerDeviceList.js

@@ -0,0 +1,14 @@
+import { useSpeakerDeviceList as useStoreSpeakerDeviceList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSpeakerDeviceList = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSpeakerDeviceList, updateSpeakerDeviceList } = useStoreSpeakerDeviceList();
+
+    const getSpeakerDeviceList = () => {
+        updateSpeakerDeviceList(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/list_speaker_device");
+    };
+
+    return { currentSpeakerDeviceList, getSpeakerDeviceList, updateSpeakerDeviceList };
+};

src-ui/logics/configs/useSpeakerThreshold.js

@@ -0,0 +1,17 @@
+import { useSpeakerThreshold as useStoreSpeakerThreshold } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSpeakerThreshold = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { updateSpeakerThreshold, currentSpeakerThreshold } = useStoreSpeakerThreshold();
+
+    const getSpeakerThreshold = () => {
+        asyncStdoutToPython("/config/input_speaker_energy_threshold");
+    };
+
+    const setSpeakerThreshold = (speaker_threshold) => {
+        asyncStdoutToPython("/controller/callback_set_speaker_energy_threshold", speaker_threshold);
+    };
+
+    return { getSpeakerThreshold, setSpeakerThreshold, currentSpeakerThreshold, updateSpeakerThreshold };
+};

src-ui/logics/useConfig.js

@@ -1,169 +0,0 @@
-import {
-    useSoftwareVersion,
-    useMicHostList,
-    useSelectedMicHost,
-    useMicDeviceList,
-    useSelectedMicDevice,
-    useSpeakerDeviceList,
-    useSelectedSpeakerDevice,
-
-    useEnableAutoClearMessageBox,
-    useSendMessageButtonType,
-    useMicThreshold,
-    useSpeakerThreshold,
-} from "@store";
-
-import { useStdoutToPython } from "./useStdoutToPython";
-
-import { arrayToObject } from "@utils/arrayToObject";
-
-export const useConfig = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-
-    const { updateSoftwareVersion } = useSoftwareVersion();
-    const { updateMicHostList } = useMicHostList();
-    const { updateSelectedMicHost } = useSelectedMicHost();
-    const { updateMicDeviceList } = useMicDeviceList();
-    const { updateSelectedMicDevice } = useSelectedMicDevice();
-    const { updateSpeakerDeviceList } = useSpeakerDeviceList();
-    const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
-    const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
-    const { currentSendMessageButtonType, updateSendMessageButtonType } = useSendMessageButtonType();
-    const { currentMicThreshold, updateMicThreshold } = useMicThreshold();
-    const { currentSpeakerThreshold, updateSpeakerThreshold } = useSpeakerThreshold();
-
-
-    const asyncPending = () => new Promise(() => {});
-    return {
-        getSoftwareVersion: () => {
-            updateSoftwareVersion(asyncPending);
-            asyncStdoutToPython("/config/version");
-        },
-        updateSoftwareVersion: (payload) => updateSoftwareVersion(payload.data),
-
-        // Device
-        getMicHostList: () => {
-            updateMicHostList(asyncPending);
-            asyncStdoutToPython("/controller/list_mic_host");
-        },
-        updateMicHostList: (payload) => {
-            updateMicHostList(arrayToObject(payload.data));
-        },
-        getSelectedMicHost: () => {
-            updateSelectedMicHost(asyncPending);
-            asyncStdoutToPython("/config/choice_mic_host");
-        },
-        updateSelectedMicHost: (payload) => {
-            updateSelectedMicHost(payload.data);
-        },
-        setSelectedMicHost: (selected_mic_host) => {
-            updateSelectedMicHost(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_mic_host", selected_mic_host);
-        },
-
-        getMicDeviceList: () => {
-            updateMicDeviceList(asyncPending);
-            asyncStdoutToPython("/controller/list_mic_device");
-        },
-        updateMicDeviceList: (payload) => {
-            updateMicDeviceList(arrayToObject(payload.data));
-        },
-        getSelectedMicDevice: () => {
-            updateSelectedMicDevice(asyncPending);
-            asyncStdoutToPython("/config/choice_mic_device");
-        },
-        updateSelectedMicDevice: (payload) => {
-            updateSelectedMicDevice(payload.data);
-        },
-        setSelectedMicDevice: (selected_mic_device) => {
-            updateSelectedMicDevice(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_mic_device", selected_mic_device);
-        },
-
-        getSpeakerDeviceList: () => {
-            updateSpeakerDeviceList(asyncPending);
-            asyncStdoutToPython("/controller/list_speaker_device");
-        },
-        updateSpeakerDeviceList: (payload) => {
-            updateSpeakerDeviceList(arrayToObject(payload.data));
-        },
-        getSelectedSpeakerDevice: () => {
-            updateSelectedSpeakerDevice(asyncPending);
-            asyncStdoutToPython("/config/choice_speaker_device");
-        },
-        updateSelectedSpeakerDevice: (payload) => {
-            updateSelectedSpeakerDevice(payload.data);
-        },
-        setSelectedSpeakerDevice: (selected_speaker_device) => {
-            updateSelectedSpeakerDevice(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_speaker_device", selected_speaker_device);
-        },
-
-        updateMicHostAndDevice: (payload) => {
-            updateSelectedMicHost(payload.data.host);
-            updateSelectedMicDevice(payload.data.device);
-        },
-
-        getMicThreshold: () => {
-            // updateMicThreshold(asyncPending);
-            asyncStdoutToPython("/config/input_mic_energy_threshold");
-        },
-        setMicThreshold: (mic_threshold) => {
-            // updateMicThreshold(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_mic_energy_threshold", mic_threshold);
-        },
-        currentMicThreshold: currentMicThreshold,
-        updateMicThreshold: (payload) => {
-            updateMicThreshold(payload.data);
-        },
-
-        getSpeakerThreshold: () => {
-            // updateSpeakerThreshold(asyncPending);
-            asyncStdoutToPython("/config/input_speaker_energy_threshold");
-        },
-        setSpeakerThreshold: (speaker_threshold) => {
-            // updateSpeakerThreshold(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_speaker_energy_threshold", speaker_threshold);
-        },
-        currentSpeakerThreshold: currentSpeakerThreshold,
-        updateSpeakerThreshold: (payload) => {
-            updateSpeakerThreshold(payload.data);
-        },
-
-
-
-        // Others
-        getEnableAutoClearMessageBox: () => {
-            updateEnableAutoClearMessageBox(asyncPending);
-            asyncStdoutToPython("/config/enable_auto_clear_message_box");
-        },
-        toggleEnableAutoClearMessageBox: () => {
-            updateEnableAutoClearMessageBox(asyncPending);
-            if (currentEnableAutoClearMessageBox.data) {
-                asyncStdoutToPython("/controller/callback_disable_auto_clear_chatbox");
-            } else {
-                asyncStdoutToPython("/controller/callback_enable_auto_clear_chatbox");
-            }
-        },
-        currentEnableAutoClearMessageBox: currentEnableAutoClearMessageBox,
-        updateEnableAutoClearMessageBox: (payload) => {
-            updateEnableAutoClearMessageBox(payload.data);
-        },
-
-        getSendMessageButtonType: () => {
-            updateSendMessageButtonType(asyncPending);
-            asyncStdoutToPython("/config/send_message_button_type");
-        },
-        setSendMessageButtonType: (selected_type) => {
-            updateSendMessageButtonType(asyncPending);
-            asyncStdoutToPython("/controller/callback_set_send_message_button_type", selected_type);
-        },
-        currentSendMessageButtonType: currentSendMessageButtonType,
-        updateSendMessageButtonType: (payload) => {
-            updateSendMessageButtonType(payload.data);
-        },
-
-
-
-    };
-};

src-ui/logics/useMainFunction.js

@@ -7,7 +7,7 @@ import {
     useForegroundStatus,
 } from "@store";
 
-import { useStdoutToPython } from "./useStdoutToPython";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useMainFunction = () => {
     const {
@@ -33,53 +33,56 @@ export const useMainFunction = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
 
     const asyncPending = () => new Promise(() => {});
+    const toggleTranslation = () => {
+        asyncUpdateTranslationStatus(asyncPending);
+        if (currentTranslationStatus.data) {
+            asyncStdoutToPython("/controller/callback_disable_translation");
+        } else {
+            asyncStdoutToPython("/controller/callback_enable_translation");
+        }
+    };
+
+    const toggleTranscriptionSend = () => {
+        asyncUpdateTranscriptionSendStatus(asyncPending);
+        if (currentTranscriptionSendStatus.data) {
+            asyncStdoutToPython("/controller/callback_disable_transcription_send");
+        } else {
+            asyncStdoutToPython("/controller/callback_enable_transcription_send");
+        }
+    };
+
+    const toggleTranscriptionReceive = () => {
+        asyncUpdateTranscriptionReceiveStatus(asyncPending);
+        if (currentTranscriptionReceiveStatus.data) {
+            asyncStdoutToPython("/controller/callback_disable_transcription_receive");
+        } else {
+            asyncStdoutToPython("/controller/callback_enable_transcription_receive");
+        }
+    };
+
+    const toggleForeground = () => {
+        const main_page = getCurrent();
+        const is_foreground_enabled = !currentForegroundStatus.data;
+        main_page.setAlwaysOnTop(is_foreground_enabled);
+        updateForegroundStatus(is_foreground_enabled);
+    };
+
     return {
-        toggleTranslation: () => {
-            asyncUpdateTranslationStatus(asyncPending);
-            if (currentTranslationStatus.data) {
-                asyncStdoutToPython("/controller/callback_disable_translation");
-            } else {
-                asyncStdoutToPython("/controller/callback_enable_translation");
-            }
-        },
-        currentTranslationStatus: currentTranslationStatus,
-        updateTranslationStatus: (payload) => {
-            updateTranslationStatus(payload.data);
-        },
+        currentTranslationStatus,
+        toggleTranslation,
+        updateTranslationStatus,
 
-        toggleTranscriptionSend: () => {
-            asyncUpdateTranscriptionSendStatus(asyncPending);
-            if (currentTranscriptionSendStatus.data) {
-                asyncStdoutToPython("/controller/callback_disable_transcription_send");
-            } else {
-                asyncStdoutToPython("/controller/callback_enable_transcription_send");
-            }
-        },
-        currentTranscriptionSendStatus: currentTranscriptionSendStatus,
-        updateTranscriptionSendStatus: (payload) => {
-            updateTranscriptionSendStatus(payload.data);
-        },
+        currentTranscriptionSendStatus,
+        toggleTranscriptionSend,
+        updateTranscriptionSendStatus,
 
-        toggleTranscriptionReceive: () => {
-            asyncUpdateTranscriptionReceiveStatus(asyncPending);
-            if (currentTranscriptionReceiveStatus.data) {
-                asyncStdoutToPython("/controller/callback_disable_transcription_receive");
-            } else {
-                asyncStdoutToPython("/controller/callback_enable_transcription_receive");
-            }
-        },
-        currentTranscriptionReceiveStatus: currentTranscriptionReceiveStatus,
-        updateTranscriptionReceiveStatus: (payload) => {
-            updateTranscriptionReceiveStatus(payload.data);
-        },
+        currentTranscriptionReceiveStatus,
+        toggleTranscriptionReceive,
+        updateTranscriptionReceiveStatus,
 
-        toggleForeground: () => {
-            const main_page = getCurrent();
-            const is_foreground_enabled = !currentForegroundStatus.data;
-            main_page.setAlwaysOnTop(is_foreground_enabled);
-            updateForegroundStatus(is_foreground_enabled);
+        currentForegroundStatus,
+        toggleForeground,
+        updateForegroundStatus,
 
-        },
-        currentForegroundStatus: currentForegroundStatus,
     };
 };

src-ui/logics/useMessage.js

@@ -2,48 +2,50 @@ import {
     useMessageLogsStatus,
 } from "@store";
 
-import { useStdoutToPython } from "./useStdoutToPython";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useMessage = () => {
     const { currentMessageLogsStatus, addMessageLogsStatus, updateMessageLogsStatus } = useMessageLogsStatus();
     const { asyncStdoutToPython } = useStdoutToPython();
 
+    const sendMessage = (message) => {
+        const uuid = crypto.randomUUID();
+        const send_message_object = {
+            id: uuid,
+            message: message,
+        };
+        asyncStdoutToPython("/controller/callback_messagebox_send", send_message_object);
+
+        addMessageLogsStatus({
+            id: uuid,
+            category: "sent",
+            status: "pending",
+            created_at: generateTimeData(),
+            messages: {
+                original: message,
+                translated: [],
+            },
+        });
+    };
+
+    const updateSentMessageLogById = (payload) => {
+        updateMessageLogsStatus(updateItemById(data.id, payload.translation));
+    };
+    const addSentMessageLog = (payload) => {
+        const message_object = generateMessageObject(payload, "sent");
+        addMessageLogsStatus(message_object);
+    };
+    const addReceivedMessageLog = (payload) => {
+        const message_object = generateMessageObject(payload, "received");
+        addMessageLogsStatus(message_object);
+    };
+
     return {
-        sendMessage: (message) => {
-            const uuid = crypto.randomUUID();
-            const send_message_object = {
-                id: uuid,
-                message: message,
-            };
-            asyncStdoutToPython("/controller/callback_messagebox_send", send_message_object);
-
-            addMessageLogsStatus({
-                id: uuid,
-                category: "sent",
-                status: "pending",
-                created_at: generateTimeData(),
-                messages: {
-                    original: message,
-                    translated: [],
-                },
-            });
-        },
-        currentMessageLogsStatus: currentMessageLogsStatus,
-
-        updateSentMessageLog: (payload) => {
-            const data = payload.data;
-            updateMessageLogsStatus(updateItemById(data.id, data.translation));
-        },
-        addSentMessageLog: (payload) => {
-            const data = payload.data;
-            const message_object = generateMessageObject(data, "sent");
-            addMessageLogsStatus(message_object);
-        },
-        addReceivedMessageLog: (payload) => {
-            const data = payload.data;
-            const message_object = generateMessageObject(data, "received");
-            addMessageLogsStatus(message_object);
-        },
+        currentMessageLogsStatus,
+        sendMessage,
+        updateSentMessageLogById,
+        addSentMessageLog,
+        addReceivedMessageLog,
     };
 };
 

src-ui/logics/useReceiveRoutes.js

@@ -1,8 +1,21 @@
+import { arrayToObject } from "@utils/arrayToObject";
 import { useMainFunction } from "./useMainFunction";
-import { useConfig } from "./useConfig";
 import { useMessage } from "./useMessage";
 import { useVolume } from "./useVolume";
 
+import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
+import { useMicHostList } from "@logics_configs/useMicHostList";
+import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
+import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
+import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
+import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList";
+import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
+import { useMicThreshold } from "@logics_configs/useMicThreshold";
+import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
+import { useEnableAutoClearMessageBox } from "@logics_configs/useEnableAutoClearMessageBox";
+import { useSendMessageButtonType } from "@logics_configs/useSendMessageButtonType";
+
+
 export const useReceiveRoutes = () => {
     const {
         updateTranslationStatus,
@@ -11,27 +24,23 @@ export const useReceiveRoutes = () => {
     } = useMainFunction();
 
     const {
-        updateSentMessageLog,
+        updateSentMessageLogById,
         addSentMessageLog,
         addReceivedMessageLog,
     } = useMessage();
 
-    const {
-        updateSoftwareVersion,
-        updateMicHostList,
-        updateSelectedMicHost,
-        updateMicDeviceList,
-        updateSelectedMicDevice,
-        updateMicHostAndDevice,
+    const { updateSoftwareVersion } = useSoftwareVersion();
+    const { updateMicHostList } = useMicHostList();
+    const { updateSelectedMicHost } = useSelectedMicHost();
+    const { updateMicDeviceList } = useMicDeviceList();
+    const { updateSelectedMicDevice } = useSelectedMicDevice();
+    const { updateSpeakerDeviceList } = useSpeakerDeviceList();
+    const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
+    const { updateMicThreshold } = useMicThreshold();
+    const { updateSpeakerThreshold } = useSpeakerThreshold();
+    const { updateEnableAutoClearMessageBox }  = useEnableAutoClearMessageBox();
+    const { updateSendMessageButtonType } = useSendMessageButtonType();
 
-        updateSpeakerDeviceList,
-        updateSelectedSpeakerDevice,
-
-        updateEnableAutoClearMessageBox,
-        updateSendMessageButtonType,
-        updateMicThreshold,
-        updateSpeakerThreshold,
-    } = useConfig();
 
     const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume();
 
@@ -46,15 +55,18 @@ export const useReceiveRoutes = () => {
 
         "/config/version": updateSoftwareVersion,
 
-        "/controller/list_mic_host": updateMicHostList,
+        "/controller/list_mic_host": (payload) => updateMicHostList(arrayToObject(payload)),
         "/config/choice_mic_host": updateSelectedMicHost,
-        "/controller/callback_set_mic_host": updateMicHostAndDevice,
+        "/controller/callback_set_mic_host": (payload) => {
+            updateSelectedMicHost(payload.host);
+            updateSelectedMicDevice(payload.device);
+        },
 
-        "/controller/list_mic_device": updateMicDeviceList,
+        "/controller/list_mic_device": (payload) => updateMicDeviceList(arrayToObject(payload)),
         "/config/choice_mic_device": updateSelectedMicDevice,
         "/controller/callback_set_mic_device": updateSelectedMicDevice,
 
-        "/controller/list_speaker_device": updateSpeakerDeviceList,
+        "/controller/list_speaker_device": (payload) => updateSpeakerDeviceList(arrayToObject(payload)),
         "/config/choice_speaker_device": updateSelectedSpeakerDevice,
         "/controller/callback_set_speaker_device": updateSelectedSpeakerDevice,
 
@@ -68,11 +80,13 @@ export const useReceiveRoutes = () => {
         "/config/send_message_button_type": updateSendMessageButtonType,
         "/controller/callback_set_send_message_button_type": updateSendMessageButtonType,
 
+        "/config/input_mic_energy_threshold": updateMicThreshold,
         "/controller/callback_set_mic_energy_threshold": updateMicThreshold,
+        "/config/input_speaker_energy_threshold": updateSpeakerThreshold,
         "/controller/callback_set_speaker_energy_threshold": updateSpeakerThreshold,
 
 
-        "/controller/callback_messagebox_send": updateSentMessageLog,
+        "/controller/callback_messagebox_send": updateSentMessageLogById,
         "/action/transcription_send_mic_message": addSentMessageLog,
         "/action/transcription_receive_speaker_message": addReceivedMessageLog
     };
@@ -81,7 +95,7 @@ export const useReceiveRoutes = () => {
         switch (parsed_data.status) {
             case 200:
                 const route = routes[parsed_data.endpoint];
-                (route) ? route({ data: parsed_data.result }) : console.error(`Invalid endpoint: ${parsed_data.endpoint}`);
+                (route) ? route(parsed_data.result) : console.error(`Invalid endpoint: ${parsed_data.endpoint}`);
                 break;
 
             case 348:

src-ui/logics/useVolume.js

@@ -3,28 +3,25 @@ import {
     useSpeakerVolume,
 } from "@store";
 
-import { useStdoutToPython } from "./useStdoutToPython";
-
+import { useStdoutToPython } from "@logics/useStdoutToPython";
 
 export const useVolume = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
     const { updateMicVolume } = useMicVolume();
     const { updateSpeakerVolume } = useSpeakerVolume();
 
-    // const asyncPending = () => new Promise(() => {});
     return {
         volumeCheckStart_Mic: () => asyncStdoutToPython("/controller/callback_enable_check_mic_threshold"),
         volumeCheckStop_Mic: () => asyncStdoutToPython("/controller/callback_disable_check_mic_threshold"),
         updateVolumeVariable_Mic: (payload) => {
-            updateMicVolume(payload.data);
+            updateMicVolume(payload);
         },
 
         volumeCheckStart_Speaker: () => asyncStdoutToPython("/controller/callback_enable_check_speaker_threshold"),
         volumeCheckStop_Speaker: () => asyncStdoutToPython("/controller/callback_disable_check_speaker_threshold"),
         updateVolumeVariable_Speaker: (payload) => {
-            updateSpeakerVolume(payload.data);
-        }
-
+            updateSpeakerVolume(payload);
+        },
 
     };
 };