[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/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: