From ab39421c79dbf458f133b706b076bf987e300bad Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sun, 16 Mar 2025 09:56:30 +0900
Subject: [PATCH] [Update/bugfix] Config Page: Transcription: Change the input
 design entry to dropdowns. It will fix the bug that cant put e.g. the user
 wanna put "10" actually, then, type "1" at first, but validation says "1" is
 not allowed.

---
 .../transcription/Transcription.jsx           | 157 +++++++-----------
 src-ui/utils.js                               |   8 +
 2 files changed, 64 insertions(+), 101 deletions(-)

diff --git a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
index e7294a18..c7c9368d 100644
--- a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
@@ -1,7 +1,6 @@
-import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styles from "./Transcription.module.scss";
-import { updateLabelsById } from "@utils";
+import { updateLabelsById, genNumObjArray } from "@utils";
 
 import {
     useMicRecordTimeout,
@@ -21,7 +20,6 @@ import {
 } from "@logics_configs";
 
 import {
-    EntryContainer,
     WordFilterContainer,
     DownloadModelsContainer,
     RadioButtonContainer,
@@ -59,82 +57,61 @@ const Mic_Container = () => {
 
 const MicRecordTimeout_Box = () => {
     const { t } = useTranslation();
-    const [ui_variable, setUiVariable] = useState("");
     const { currentMicRecordTimeout, setMicRecordTimeout } = useMicRecordTimeout();
-    const onChangeFunction = (e) => {
-        const value = e.currentTarget.value;
-        if (value === "") {
-            setUiVariable("");
-        } else {
-            setUiVariable(value);
-            setMicRecordTimeout(value);
-        }
+
+    const selectFunction = (selected_data) => {
+        setMicRecordTimeout(selected_data.selected_id);
     };
 
-    useEffect(()=> {
-        setUiVariable(currentMicRecordTimeout.data);
-    }, [currentMicRecordTimeout]);
-
     return (
-        <EntryContainer
+        <DropdownMenuContainer
+            dropdown_id="mic_record_timeout"
             label={t("config_page.transcription.mic_record_timeout.label")}
             desc={t("config_page.transcription.mic_record_timeout.desc")}
-            ui_variable={ui_variable}
-            onChange={onChangeFunction}
+            selected_id={currentMicRecordTimeout.data}
+            list={genNumObjArray(31)}
+            selectFunction={selectFunction}
+            state={currentMicRecordTimeout.state}
         />
     );
 };
 const MicPhraseTimeout_Box = () => {
     const { t } = useTranslation();
-    const [ui_variable, setUiVariable] = useState("");
     const { currentMicPhraseTimeout, setMicPhraseTimeout } = useMicPhraseTimeout();
-    const onChangeFunction = (e) => {
-        const value = e.currentTarget.value;
-        if (value === "") {
-            setUiVariable("");
-        } else {
-            setUiVariable(value);
-            setMicPhraseTimeout(value);
-        }
+
+    const selectFunction = (selected_data) => {
+        setMicPhraseTimeout(selected_data.selected_id);
     };
 
-    useEffect(()=> {
-        setUiVariable(currentMicPhraseTimeout.data);
-    }, [currentMicPhraseTimeout]);
-
     return (
-        <EntryContainer
+        <DropdownMenuContainer
+            dropdown_id="mic_phrase_timeout"
             label={t("config_page.transcription.mic_phrase_timeout.label")}
             desc={t("config_page.transcription.mic_phrase_timeout.desc")}
-            ui_variable={ui_variable}
-            onChange={onChangeFunction}
+            selected_id={currentMicPhraseTimeout.data}
+            list={genNumObjArray(31)}
+            selectFunction={selectFunction}
+            state={currentMicPhraseTimeout.state}
         />
     );
 };
 const MicMaxWords_Box = () => {
     const { t } = useTranslation();
-    const [ui_variable, setUiVariable] = useState("");
     const { currentMicMaxWords, setMicMaxWords } = useMicMaxWords();
-    const onChangeFunction = (e) => {
-        const value = e.currentTarget.value;
-        if (value === "") {
-            setUiVariable("");
-        } else {
-            setUiVariable(value);
-            setMicMaxWords(value);
-        }
+
+    const selectFunction = (selected_data) => {
+        setMicMaxWords(selected_data.selected_id);
     };
 
-    useEffect(()=> {
-        setUiVariable(currentMicMaxWords.data);
-    }, [currentMicMaxWords]);
-
     return (
-        <EntryContainer
+        <DropdownMenuContainer
+            dropdown_id="mic_max_phrase"
             label={t("config_page.transcription.mic_max_phrase.label")}
             desc={t("config_page.transcription.mic_max_phrase.desc")}
-            ui_variable={ui_variable}
-            onChange={onChangeFunction}
+            selected_id={currentMicMaxWords.data}
+            list={genNumObjArray(31)}
+            selectFunction={selectFunction}
+            state={currentMicMaxWords.state}
         />
     );
 };
@@ -167,82 +144,60 @@ const Speaker_Container = () => {
 
 const SpeakerRecordTimeout_Box = () => {
     const { t } = useTranslation();
-    const [ui_variable, setUiVariable] = useState("");
     const { currentSpeakerRecordTimeout, setSpeakerRecordTimeout } = useSpeakerRecordTimeout();
-    const onChangeFunction = (e) => {
-        const value = e.currentTarget.value;
-        if (value === "") {
-            setUiVariable("");
-        } else {
-            setUiVariable(value);
-            setSpeakerRecordTimeout(value);
-        }
+
+    const selectFunction = (selected_data) => {
+        setSpeakerRecordTimeout(selected_data.selected_id);
     };
 
-    useEffect(()=> {
-        setUiVariable(currentSpeakerRecordTimeout.data);
-    }, [currentSpeakerRecordTimeout]);
-
     return (
-        <EntryContainer
-            label={t("config_page.transcription.speaker_record_timeout.label")}
+        <DropdownMenuContainer
+            dropdown_id="speaker_record_timeout"
             desc={t("config_page.transcription.speaker_record_timeout.desc")}
-            ui_variable={ui_variable}
-            onChange={onChangeFunction}
+            label={t("config_page.transcription.speaker_record_timeout.label")}
+            selected_id={currentSpeakerRecordTimeout.data}
+            list={genNumObjArray(31)}
+            selectFunction={selectFunction}
+            state={currentSpeakerRecordTimeout.state}
         />
     );
 };
 const SpeakerPhraseTimeout_Box = () => {
     const { t } = useTranslation();
-    const [ui_variable, setUiVariable] = useState("");
     const { currentSpeakerPhraseTimeout, setSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
-    const onChangeFunction = (e) => {
-        const value = e.currentTarget.value;
-        if (value === "") {
-            setUiVariable("");
-        } else {
-            setUiVariable(value);
-            setSpeakerPhraseTimeout(value);
-        }
+
+    const selectFunction = (selected_data) => {
+        setSpeakerPhraseTimeout(selected_data.selected_id);
     };
-
-    useEffect(()=> {
-        setUiVariable(currentSpeakerPhraseTimeout.data);
-    }, [currentSpeakerPhraseTimeout]);
-
     return (
-        <EntryContainer
+        <DropdownMenuContainer
+            dropdown_id="speaker_phrase_timeout"
             label={t("config_page.transcription.speaker_phrase_timeout.label")}
             desc={t("config_page.transcription.speaker_phrase_timeout.desc")}
-            ui_variable={ui_variable}
-            onChange={onChangeFunction}
+            selected_id={currentSpeakerPhraseTimeout.data}
+            list={genNumObjArray(31)}
+            selectFunction={selectFunction}
+            state={currentSpeakerPhraseTimeout.state}
         />
     );
 };
 const SpeakerMaxWords_Box = () => {
     const { t } = useTranslation();
-    const [ui_variable, setUiVariable] = useState("");
     const { currentSpeakerMaxWords, setSpeakerMaxWords } = useSpeakerMaxWords();
-    const onChangeFunction = (e) => {
-        const value = e.currentTarget.value;
-        if (value === "") {
-            setUiVariable("");
-        } else {
-            setUiVariable(value);
-            setSpeakerMaxWords(value);
-        }
+
+    const selectFunction = (selected_data) => {
+        setSpeakerMaxWords(selected_data.selected_id);
     };
 
-    useEffect(()=> {
-        setUiVariable(currentSpeakerMaxWords.data);
-    }, [currentSpeakerMaxWords]);
-
     return (
-        <EntryContainer
+        <DropdownMenuContainer
+            dropdown_id="speaker_max_phrase"
             label={t("config_page.transcription.speaker_max_phrase.label")}
             desc={t("config_page.transcription.speaker_max_phrase.desc")}
-            ui_variable={ui_variable}
-            onChange={onChangeFunction}
+            selected_id={currentSpeakerMaxWords.data}
+            list={genNumObjArray(61)}
+            selectFunction={selectFunction}
+            state={currentSpeakerMaxWords.state}
         />
     );
 };
diff --git a/src-ui/utils.js b/src-ui/utils.js
index 145dc403..96a87c75 100644
--- a/src-ui/utils.js
+++ b/src-ui/utils.js
@@ -49,4 +49,12 @@ export const updateLabelsById = (data_array, updates) => {
         const update = updates.find(update_item => update_item.id === item.id);
         return update ? { ...item, label: update.label } : item;
     });
+};
+
+export const genNumArray = (count, start_from = 0) => {
+    return [...Array(count).keys()].map(i => i + start_from);
+};
+
+export const genNumObjArray = (count, start_from = 0) => {
+    return arrayToObject(genNumArray(count, start_from));
 };
\ No newline at end of file