[bugfix/Refactor] Config Page: Device Tab. Fix render error when open config page before preparing backend.

And remove the code that is no longer in use.

src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx

@@ -2,27 +2,15 @@ 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;
-            }
+            if (props.openListFunction !== undefined) props.openListFunction();
             updateIsOpenedDropdownMenu(props.dropdown_id);
         }
     };
@@ -50,7 +38,6 @@ export const DropdownMenu = (props) => {
     const getSelectedText = () => {
         if (props.state !== "hasData") return;
         return props.selected_id;
-        // return (props.list[props.selected_id]) ? props.list[props.selected_id] : "Nothing selected";
     };
     const list = (props.list === undefined) ? {} : props.list;
 

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

@@ -1,6 +1,4 @@
 import { useTranslation } from "react-i18next";
-import FolderOpenSvg from "@images/folder_open.svg?react";
-
 import { useSettingBox } from "../components/useSettingBox";
 import {
     useMicHostList,
@@ -28,6 +26,8 @@ export const Device = () => {
     const {
         setSelectedMicHost,
         setSelectedMicDevice,
+        getMicHostList,
+        getMicDeviceList,
     } = useConfig();
 
     const selectFunction = (selected_data) => {
@@ -54,6 +54,7 @@ export const Device = () => {
                 selected_id={currentSelectedMicHost.data}
                 list={currentMicHostList.data}
                 selectFunction={selectFunction}
+                openListFunction={getMicHostList}
                 state={currentSelectedMicHost.state}
             />
 
@@ -63,6 +64,7 @@ export const Device = () => {
                 selected_id={currentSelectedMicDevice.data}
                 list={currentMicDeviceList.data}
                 selectFunction={selectFunction}
+                openListFunction={getMicDeviceList}
                 state={currentSelectedMicDevice.state}
             />
 {/*

src-ui/store.js

@@ -6,7 +6,6 @@ import {
 
 import {
     translator_list,
-    test_device_list,
     generateTestData,
     word_filter_list,
 } from "@data";