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