[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/app/config_page/setting_section/setting_box/SettingBox.jsx

@@ -2,16 +2,16 @@ import { useSelectedConfigTabId } from "@store";
 
 import { Device } from "./device/Device";
 import { Appearance } from "./appearance/Appearance";
-import { Others } from "./others/Others";
-import { AboutVrct } from "./about_vrct/AboutVrct";
+// import { Others } from "./others/Others";
+// import { AboutVrct } from "./about_vrct/AboutVrct";
 
 export const SettingBox = () => {
     const { currentSelectedConfigTabId } = useSelectedConfigTabId();
     switch (currentSelectedConfigTabId) {
         case "device":
             return <Device />;
-        case "others":
-            return <Others />;
+        // case "others":
+        //     return <Others />;
         // case "appearance":
         //     return <Appearance />;
         // case "about_vrct":

src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx

@@ -1,10 +1,8 @@
-import { useState } from "react";
-
+import { useEffect, useState } from "react";
 import styles from "./ThresholdComponent.module.scss";
 import { SliderAndMeter } from "./slider_and_meter/SliderAndMeter";
 import { ThresholdEntry } from "./threshold_entry/ThresholdEntry";
 import { VolumeCheckButton } from "./volume_check_button/VolumeCheckButton";
-import { useConfig } from "@logics/useConfig";
 
 export const ThresholdComponent = (props) => {
     return (
@@ -18,10 +16,15 @@ export const ThresholdComponent = (props) => {
     );
 };
 
+import { useMicThreshold } from "@logics_configs/useMicThreshold";
 const MicComponent = (props) => {
-    const { currentMicThreshold, setMicThreshold } = useConfig();
+    const { currentMicThreshold, setMicThreshold } = useMicThreshold();
     const [ui_threshold, setUiThreshold] = useState(currentMicThreshold);
 
+    useEffect(() => {
+        setUiThreshold(currentMicThreshold);
+    }, [currentMicThreshold]);
+
     const setUiThresholdFunction = (payload_ui_threshold) => {
         setUiThreshold(payload_ui_threshold);
     };
@@ -47,11 +50,15 @@ const MicComponent = (props) => {
     );
 };
 
+import { useSpeakerThreshold } from "@logics_configs/useSpeakerThreshold";
 const SpeakerComponent = (props) => {
-
-    const { currentSpeakerThreshold, setSpeakerThreshold } = useConfig();
+    const { currentSpeakerThreshold, setSpeakerThreshold } = useSpeakerThreshold();
     const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold);
 
+    useEffect(() => {
+        setUiThreshold(currentSpeakerThreshold);
+    }, [currentSpeakerThreshold]);
+
     const setUiThresholdFunction = (payload_ui_threshold) => {
         setUiThreshold(payload_ui_threshold);
     };

src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx

@@ -15,22 +15,48 @@ import { MessageFormat } from "./message_format/MessageFormat";
 import { ActionButton } from "./action_button/ActionButton";
 import { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter";
 
-export const useSettingBox = () => {
+
+const useOnMouseLeaveDropdownMenu = () => {
     const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
 
-    const DropdownMenuContainer = (props) => {
-        const onMouseLeaveFunction = () => {
-            updateIsOpenedDropdownMenu("");
-        };
-
-        return (
-            <div className={styles.container} onMouseLeave={onMouseLeaveFunction}>
-                <LabelComponent label={props.label} desc={props.desc} />
-                <DropdownMenu {...props}/>
-            </div>
-        );
+    const onMouseLeaveFunction = () => {
+        updateIsOpenedDropdownMenu("");
     };
 
+    return { onMouseLeaveFunction };
+};
+
+export const DropdownMenuContainer = (props) => {
+    const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
+
+    return (
+        <div className={styles.container} onMouseLeave={onMouseLeaveFunction}>
+            <LabelComponent label={props.label} desc={props.desc} />
+            <DropdownMenu {...props} />
+        </div>
+    );
+};
+
+
+export const ThresholdContainer = (props) => {
+    return (
+        <div className={styles.threshold_container}>
+            <div className={styles.threshold_switch_section}>
+                <LabelComponent label={props.label} desc={props.desc} />
+                <Switchbox {...props}/>
+            </div>
+            <div className={styles.threshold_section}>
+                <ThresholdComponent {...props}/>
+            </div>
+        </div>
+    );
+};
+
+
+export const useSettingBox = () => {
+    console.log("useSettingBox______________");
+
+
     const SliderContainer = (props) => {
         return (
             <div className={styles.container}>
@@ -76,20 +102,6 @@ export const useSettingBox = () => {
         );
     };
 
-    const ThresholdContainer = (props) => {
-        return (
-            <div className={styles.threshold_container}>
-                <div className={styles.threshold_switch_section}>
-                    <LabelComponent label={props.label} desc={props.desc} />
-                    <Switchbox {...props}/>
-                </div>
-                <div className={styles.threshold_section}>
-                    <ThresholdComponent {...props}/>
-                </div>
-            </div>
-        );
-    };
-
     const DeeplAuthKeyContainer = (props) => {
         return (
             <div className={styles.container}>
@@ -144,12 +156,10 @@ export const useSettingBox = () => {
     };
 
     return {
-        DropdownMenuContainer,
         SliderContainer,
         CheckboxContainer,
         SwitchboxContainer,
         EntryContainer,
-        ThresholdContainer,
         RadioButtonContainer,
         DeeplAuthKeyContainer,
         MessageFormatContainer,

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

@@ -1,119 +1,119 @@
 import { useTranslation } from "react-i18next";
-import { useSettingBox } from "../components/useSettingBox";
 import {
-    useMicHostList,
-    useSelectedMicHost,
-    useSelectedMicDevice,
-    useMicDeviceList,
-    useSelectedSpeakerDevice,
-    useSpeakerDeviceList,
-} from "@store";
-
-import { useConfig } from "@logics/useConfig";
-
+    DropdownMenuContainer,
+    ThresholdContainer,
+} from "../components/useSettingBox";
 export const Device = () => {
-    const { t } = useTranslation();
-    const {
-        DropdownMenuContainer,
-        ThresholdContainer,
-    } = useSettingBox();
-
-
-    const { currentMicHostList } = useMicHostList();
-    const { currentSelectedMicHost } = useSelectedMicHost();
-
-    const { currentMicDeviceList } = useMicDeviceList();
-    const { currentSelectedMicDevice } = useSelectedMicDevice();
-
-    const { currentSpeakerDeviceList } = useSpeakerDeviceList();
-    const { currentSelectedSpeakerDevice } = useSelectedSpeakerDevice();
-
-    const {
-        setSelectedMicHost,
-        setSelectedMicDevice,
-        getMicHostList,
-        getMicDeviceList,
-        setSelectedSpeakerDevice,
-        getSpeakerDeviceList,
-    } = 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;
-
-            case "speaker_device":
-                setSelectedSpeakerDevice(selected_data.selected_id);
-                break;
-
-            default:
-                break;
-        }
-    };
-
-    // const volumeCheckStartFunction_Mic = () => {
-    //     volumeCheckStart_Mic();
-    // };
-    // const volumeCheckStopFunction_Mic = () => {
-    //     volumeCheckStop_Mic();
-    // };
-
 
     return (
         <>
-            <DropdownMenuContainer
-                dropdown_id="mic_host"
-                label={t("config_page.mic_host.label")}
-                selected_id={currentSelectedMicHost.data}
-                list={currentMicHostList.data}
-                selectFunction={selectFunction}
-                openListFunction={getMicHostList}
-                state={currentSelectedMicHost.state}
-            />
-
-            <DropdownMenuContainer
-                dropdown_id="mic_device"
-                label={t("config_page.mic_device.label")}
-                selected_id={currentSelectedMicDevice.data}
-                list={currentMicDeviceList.data}
-                selectFunction={selectFunction}
-                openListFunction={getMicDeviceList}
-                state={currentSelectedMicDevice.state}
-            />
-
-            <ThresholdContainer
-                label={t("config_page.mic_dynamic_energy_threshold.label_for_manual")}
-                desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")}
-                id="mic_threshold"
-                min="0"
-                max="2000"
-                // volumeCheckStartFunction={volumeCheckStartFunction_Mic}
-                // volumeCheckStopFunction={volumeCheckStopFunction_Mic}
-            />
-
-
-            <DropdownMenuContainer
-                dropdown_id="speaker_device"
-                label={t("config_page.speaker_device.label")}
-                selected_id={currentSelectedSpeakerDevice.data}
-                list={currentSpeakerDeviceList.data}
-                selectFunction={selectFunction}
-                openListFunction={getSpeakerDeviceList}
-                state={currentSelectedSpeakerDevice.state}
-            />
-
-            <ThresholdContainer
-                label={t("config_page.speaker_dynamic_energy_threshold.label_for_manual")}
-                desc={t("config_page.speaker_dynamic_energy_threshold.desc_for_manual")}
-                id="speaker_threshold"
-                min="0"
-                max="4000"
-            />
+            <DropdownMenuContainer_MicHost />
+            <DropdownMenuContainer_MicDevice />
+            <ThresholdContainer_Mic />
+            <DropdownMenuContainer_SpeakerDevice />
+            <ThresholdContainer_Speaker />
         </>
     );
+};
+
+import { useMicHostList } from "@logics_configs/useMicHostList";
+import { useSelectedMicHost } from "@logics_configs/useSelectedMicHost";
+const DropdownMenuContainer_MicHost = () => {
+    const { t } = useTranslation();
+    const { currentSelectedMicHost, setSelectedMicHost } = useSelectedMicHost();
+    const { currentMicHostList, getMicHostList } = useMicHostList();
+
+    const selectFunction = (selected_data) => {
+        setSelectedMicHost(selected_data.selected_id);
+    };
+
+    return (
+        <DropdownMenuContainer
+            dropdown_id="mic_host"
+            label={t("config_page.mic_host.label")}
+            selected_id={currentSelectedMicHost.data}
+            list={currentMicHostList.data}
+            selectFunction={selectFunction}
+            openListFunction={getMicHostList}
+            state={currentSelectedMicHost.state}
+        />
+    );
+};
+
+import { useMicDeviceList } from "@logics_configs/useMicDeviceList";
+import { useSelectedMicDevice } from "@logics_configs/useSelectedMicDevice";
+const DropdownMenuContainer_MicDevice = () => {
+    const { t } = useTranslation();
+    const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice();
+    const { currentMicDeviceList, getMicDeviceList } = useMicDeviceList();
+
+    const selectFunction = (selected_data) => {
+        setSelectedMicDevice(selected_data.selected_id);
+    };
+
+
+    return (
+        <DropdownMenuContainer
+            dropdown_id="mic_device"
+            label={t("config_page.mic_device.label")}
+            selected_id={currentSelectedMicDevice.data}
+            list={currentMicDeviceList.data}
+            selectFunction={selectFunction}
+            openListFunction={getMicDeviceList}
+            state={currentSelectedMicDevice.state}
+        />
+    );
+};
+
+import { useSpeakerDeviceList } from "@logics_configs/useSpeakerDeviceList";
+import { useSelectedSpeakerDevice } from "@logics_configs/useSelectedSpeakerDevice";
+const DropdownMenuContainer_SpeakerDevice = () => {
+    const { t } = useTranslation();
+    const { currentSelectedSpeakerDevice, setSelectedSpeakerDevice } = useSelectedSpeakerDevice();
+    const { currentSpeakerDeviceList, getSpeakerDeviceList } = useSpeakerDeviceList();
+
+    const selectFunction = (selected_data) => {
+        setSelectedSpeakerDevice(selected_data.selected_id);
+    };
+
+
+    return (
+        <DropdownMenuContainer
+            dropdown_id="speaker_device"
+            label={t("config_page.speaker_device.label")}
+            selected_id={currentSelectedSpeakerDevice.data}
+            list={currentSpeakerDeviceList.data}
+            selectFunction={selectFunction}
+            openListFunction={getSpeakerDeviceList}
+            state={currentSelectedSpeakerDevice.state}
+        />
+    );
+};
+
+const ThresholdContainer_Mic = () => {
+    const { t } = useTranslation();
+
+    return (
+        <ThresholdContainer
+            label={t("config_page.mic_dynamic_energy_threshold.label_for_manual")}
+            desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")}
+            id="mic_threshold"
+            min="0"
+            max="2000"
+        />
+    );
+};
+
+const ThresholdContainer_Speaker = () => {
+    const { t } = useTranslation();
+
+    return (
+        <ThresholdContainer
+            label={t("config_page.speaker_dynamic_energy_threshold.label_for_manual")}
+            desc={t("config_page.speaker_dynamic_energy_threshold.desc_for_manual")}
+            id="speaker_threshold"
+            min="0"
+            max="4000"
+        />
+    );
 };