diff --git a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx b/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx index 83f56506..1fd8e76a 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx @@ -1,16 +1,28 @@ import styles from "./DropdownMenu.module.scss"; - import clsx from "clsx"; import ArrowLeftSvg from "@images/arrow_left.svg?react"; import { useIsOpenedDropdownMenu } from "@store"; +import { useConfig } from "@logics/useConfig"; export const DropdownMenu = (props) => { - const { updateIsOpenedDropdownMenu, currentIsOpenedDropdownMenu } = useIsOpenedDropdownMenu(); + const { getMicHostList, getMicDeviceList } = useConfig(); + const toggleDropdownMenu = () => { if (currentIsOpenedDropdownMenu === props.dropdown_id) { updateIsOpenedDropdownMenu(""); } else { + switch (props.dropdown_id) { + case "mic_host": + getMicHostList(); + break; + case "mic_device": + getMicDeviceList(); + break; + + default: + break; + } updateIsOpenedDropdownMenu(props.dropdown_id); } }; @@ -40,7 +52,7 @@ export const DropdownMenu = (props) => { return props.selected_id; // return (props.list[props.selected_id]) ? props.list[props.selected_id] : "Nothing selected"; }; - + const list = (props.list === undefined) ? {} : props.list; return (
@@ -57,10 +69,10 @@ export const DropdownMenu = (props) => {
{(props.state === "hasData") - ? Object.entries(props.list).map(([key, value]) => { + ? Object.entries(list).map(([key, value]) => { return (
selectValue(key)}> -

{value}

+

{value}

); }) diff --git a/src-ui/logics/useConfig.js b/src-ui/logics/useConfig.js index fc6d4ef5..35cc1f50 100644 --- a/src-ui/logics/useConfig.js +++ b/src-ui/logics/useConfig.js @@ -20,31 +20,49 @@ export const useConfig = () => { const { updateSelectedMicDevice } = useSelectedMicDevice(); + const asyncPending = () => new Promise(() => {}); return { - getSoftwareVersion: () => asyncStdoutToPython("/config/version"), + getSoftwareVersion: () => { + updateSoftwareVersion(asyncPending); + asyncStdoutToPython("/config/version"); + }, updateSoftwareVersion: (payload) => updateSoftwareVersion(payload.data), - getMicHostList: () => asyncStdoutToPython("/controller/list_mic_host"), + getMicHostList: () => { + updateMicHostList(asyncPending); + asyncStdoutToPython("/controller/list_mic_host"); + }, updateMicHostList: (payload) => { updateMicHostList(arrayToObject(payload.data)); }, - getSelectedMicHost: () => asyncStdoutToPython("/config/choice_mic_host"), + 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: () => asyncStdoutToPython("/controller/list_mic_device"), + getMicDeviceList: () => { + updateMicDeviceList(asyncPending); + asyncStdoutToPython("/controller/list_mic_device"); + }, updateMicDeviceList: (payload) => { updateMicDeviceList(arrayToObject(payload.data)); }, - getSelectedMicDevice: () => asyncStdoutToPython("/config/choice_mic_device"), + 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); }, diff --git a/src-ui/store.js b/src-ui/store.js index 6472140d..d1f181fd 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -117,9 +117,9 @@ export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useIsOpenedDrop // Config Page -export const { atomInstance: Atom_MicHostList, useHook: useMicHostList } = createAsyncAtomWithHook([], "MicHostList"); +export const { atomInstance: Atom_MicHostList, useHook: useMicHostList } = createAsyncAtomWithHook({}, "MicHostList"); export const { atomInstance: Atom_SelectedMicHost, useHook: useSelectedMicHost } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicHost"); -export const { atomInstance: Atom_MicDeviceList, useHook: useMicDeviceList } = createAsyncAtomWithHook([], "MicDeviceList"); +export const { atomInstance: Atom_MicDeviceList, useHook: useMicDeviceList } = createAsyncAtomWithHook({}, "MicDeviceList"); export const { atomInstance: Atom_SelectedMicDevice, useHook: useSelectedMicDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicDevice");