[Update] Config Page: Device Tab. Fetch latest data mic host list and device list when open the list container every time.

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 (
         <div className={styles.container}>
@@ -57,10 +69,10 @@ export const DropdownMenu = (props) => {
             <div className={dropdown_content_wrapper_class_name}>
                 <div className={styles.dropdown_content}>
                     {(props.state === "hasData")
-                        ? Object.entries(props.list).map(([key, value]) => {
+                        ? Object.entries(list).map(([key, value]) => {
                             return (
                                 <div key={key} className={styles.value_button} onClick={() => selectValue(key)}>
-                                    <p className={styles.value_text} >{value}</p>
+                                    <p className={styles.value_text}>{value}</p>
                                 </div>
                             );
                         })

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);
         },
 

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");