From 96708a27a6c9ade71c9d20b165eb033ebc46af09 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Tue, 3 Sep 2024 10:49:52 +0900
Subject: [PATCH 1/3] [Update] Config Page: Device Tab. Fetch latest data mic
 host list and device list when open the list container every time.

---
 .../components/dropdown_menu/DropdownMenu.jsx | 22 +++++++++++----
 src-ui/logics/useConfig.js                    | 28 +++++++++++++++----
 src-ui/store.js                               |  4 +--
 3 files changed, 42 insertions(+), 12 deletions(-)

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

From 18672d6dd1cffdf68a47b9c21e26d9572a0b0cc1 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Tue, 3 Sep 2024 11:15:34 +0900
Subject: [PATCH 2/3] [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.

---
 .../components/dropdown_menu/DropdownMenu.jsx     | 15 +--------------
 .../setting_section/setting_box/device/Device.jsx |  6 ++++--
 src-ui/store.js                                   |  1 -
 3 files changed, 5 insertions(+), 17 deletions(-)

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 1fd8e76a..8e34ffad 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
@@ -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;
 
diff --git a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx b/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
index 76d8ce06..626078bc 100644
--- a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
+++ b/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}
             />
 {/*
diff --git a/src-ui/store.js b/src-ui/store.js
index d1f181fd..b9db8364 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -6,7 +6,6 @@ import {
 
 import {
     translator_list,
-    test_device_list,
     generateTestData,
     word_filter_list,
 } from "@data";

From f34eaa6ee2b6e34e7acf778898fd9405820f3008 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Tue, 3 Sep 2024 11:30:40 +0900
Subject: [PATCH 3/3] [Update] Config Page: Device Tab. Add Speaker device
 selector. (Now, Devices (Mic host, Mic device, Speaker device) are
 selectable.)

---
 src-ui/app/App.jsx                            | 10 ++++----
 .../setting_box/device/Device.jsx             | 21 +++++++++++++++++
 src-ui/logics/useConfig.js                    | 23 +++++++++++++++++++
 src-ui/logics/useReceiveRoutes.js             | 14 ++++++++++-
 src-ui/store.js                               |  2 ++
 5 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx
index 3d69130c..337d701f 100644
--- a/src-ui/app/App.jsx
+++ b/src-ui/app/App.jsx
@@ -16,10 +16,11 @@ export const App = () => {
     const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
     const {
         getSoftwareVersion,
-        getMicHostList,
+        // getMicHostList,
         getSelectedMicHost,
-        getMicDeviceList,
+        // getMicDeviceList,
         getSelectedMicDevice,
+        getSelectedSpeakerDevice,
     } = useConfig();
 
     useEffect(() => {
@@ -27,10 +28,11 @@ export const App = () => {
         if (!hasRunRef.current) {
             asyncStartPython().then((result) => {
                 getSoftwareVersion();
-                getMicHostList();
+                // getMicHostList();
                 getSelectedMicHost();
-                getMicDeviceList();
+                // getMicDeviceList();
                 getSelectedMicDevice();
+                getSelectedSpeakerDevice();
             }).catch((err) => {
                 console.error(err);
             });
diff --git a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx b/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
index 626078bc..6059dbd4 100644
--- a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
@@ -5,6 +5,8 @@ import {
     useSelectedMicHost,
     useSelectedMicDevice,
     useMicDeviceList,
+    useSelectedSpeakerDevice,
+    useSpeakerDeviceList,
 } from "@store";
 
 import { useConfig } from "@logics/useConfig";
@@ -23,11 +25,16 @@ export const Device = () => {
     const { currentMicDeviceList } = useMicDeviceList();
     const { currentSelectedMicDevice } = useSelectedMicDevice();
 
+    const { currentSpeakerDeviceList } = useSpeakerDeviceList();
+    const { currentSelectedSpeakerDevice } = useSelectedSpeakerDevice();
+
     const {
         setSelectedMicHost,
         setSelectedMicDevice,
         getMicHostList,
         getMicDeviceList,
+        setSelectedSpeakerDevice,
+        getSpeakerDeviceList,
     } = useConfig();
 
     const selectFunction = (selected_data) => {
@@ -40,6 +47,10 @@ export const Device = () => {
                 setSelectedMicDevice(selected_data.selected_id);
                 break;
 
+                case "speaker_device":
+                setSelectedSpeakerDevice(selected_data.selected_id);
+                break;
+
             default:
                 break;
         }
@@ -67,6 +78,16 @@ export const Device = () => {
                 openListFunction={getMicDeviceList}
                 state={currentSelectedMicDevice.state}
             />
+
+            <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.mic_dynamic_energy_threshold.label_for_manual")} desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")} id="mic_threshold"  min="0" max="3000"/>
 
diff --git a/src-ui/logics/useConfig.js b/src-ui/logics/useConfig.js
index 35cc1f50..fb7c54fc 100644
--- a/src-ui/logics/useConfig.js
+++ b/src-ui/logics/useConfig.js
@@ -4,6 +4,8 @@ import {
     useSelectedMicHost,
     useMicDeviceList,
     useSelectedMicDevice,
+    useSpeakerDeviceList,
+    useSelectedSpeakerDevice,
 } from "@store";
 
 import { useStdoutToPython } from "./useStdoutToPython";
@@ -18,6 +20,8 @@ export const useConfig = () => {
     const { updateSelectedMicHost } = useSelectedMicHost();
     const { updateMicDeviceList } = useMicDeviceList();
     const { updateSelectedMicDevice } = useSelectedMicDevice();
+    const { updateSpeakerDeviceList } = useSpeakerDeviceList();
+    const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
 
 
     const asyncPending = () => new Promise(() => {});
@@ -66,6 +70,25 @@ export const useConfig = () => {
             asyncStdoutToPython("/controller/callback_set_mic_device", selected_mic_device);
         },
 
+        getSpeakerDeviceList: () => {
+            updateSpeakerDeviceList(asyncPending);
+            asyncStdoutToPython("/controller/list_speaker_device");
+        },
+        updateSpeakerDeviceList: (payload) => {
+            updateSpeakerDeviceList(arrayToObject(payload.data));
+        },
+        getSelectedSpeakerDevice: () => {
+            updateSelectedSpeakerDevice(asyncPending);
+            asyncStdoutToPython("/config/choice_speaker_device");
+        },
+        updateSelectedSpeakerDevice: (payload) => {
+            updateSelectedSpeakerDevice(payload.data);
+        },
+        setSelectedSpeakerDevice: (selected_speaker_device) => {
+            updateSelectedSpeakerDevice(asyncPending);
+            asyncStdoutToPython("/controller/callback_set_speaker_device", selected_speaker_device);
+        },
+
         updateMicHostAndDevice: (payload) => {
             updateSelectedMicHost(payload.data.host);
             updateSelectedMicDevice(payload.data.device);
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index 0e481ae3..d3fee4b6 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -22,6 +22,10 @@ export const useReceiveRoutes = () => {
         updateMicDeviceList,
         updateSelectedMicDevice,
         updateMicHostAndDevice,
+
+        updateSpeakerDeviceList,
+        updateSelectedSpeakerDevice,
+
     } = useConfig();
 
     const routes = {
@@ -32,14 +36,22 @@ export const useReceiveRoutes = () => {
         "/controller/callback_enable_transcription_receive": updateTranscriptionReceiveStatus,
         "/controller/callback_disable_transcription_receive": updateTranscriptionReceiveStatus,
 
+
         "/config/version": updateSoftwareVersion,
+
         "/controller/list_mic_host": updateMicHostList,
         "/config/choice_mic_host": updateSelectedMicHost,
+        "/controller/callback_set_mic_host": updateMicHostAndDevice,
+
         "/controller/list_mic_device": updateMicDeviceList,
         "/config/choice_mic_device": updateSelectedMicDevice,
-        "/controller/callback_set_mic_host": updateMicHostAndDevice,
         "/controller/callback_set_mic_device": updateSelectedMicDevice,
 
+        "/controller/list_speaker_device": updateSpeakerDeviceList,
+        "/config/choice_speaker_device": updateSelectedSpeakerDevice,
+        "/controller/callback_set_speaker_device": updateSelectedSpeakerDevice,
+
+
         "/controller/callback_messagebox_send": updateSentMessageLog,
         "/action/transcription_send_mic_message": addSentMessageLog,
         "/action/transcription_receive_speaker_message": addReceivedMessageLog
diff --git a/src-ui/store.js b/src-ui/store.js
index b9db8364..553d2e75 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -121,6 +121,8 @@ export const { atomInstance: Atom_SelectedMicHost, useHook: useSelectedMicHost }
 export const { atomInstance: Atom_MicDeviceList, useHook: useMicDeviceList } = createAsyncAtomWithHook({}, "MicDeviceList");
 export const { atomInstance: Atom_SelectedMicDevice, useHook: useSelectedMicDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicDevice");
 
+export const { atomInstance: Atom_SpeakerDeviceList, useHook: useSpeakerDeviceList } = createAsyncAtomWithHook({}, "SpeakerDeviceList");
+export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useSelectedSpeakerDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedSpeakerDevice");
 
 export const { atomInstance: Atom_SendMessageFormat, useHook: useSendMessageFormat } = createAtomWithHook({
     before: "",