[Update] Add WordFilter.

src-ui/app/App.jsx

@@ -54,6 +54,7 @@ import {
     useMicRecordTimeout,
     useMicPhraseTimeout,
     useMicMaxWords,
+    useMicWordFilterList,
     useSpeakerRecordTimeout,
     useSpeakerPhraseTimeout,
     useSpeakerMaxWords,
@@ -109,6 +110,7 @@ const StartPythonFacadeComponent = () => {
     const { getMicRecordTimeout } = useMicRecordTimeout();
     const { getMicPhraseTimeout } = useMicPhraseTimeout();
     const { getMicMaxWords } = useMicMaxWords();
+    const { getMicWordFilterList } = useMicWordFilterList();
 
     const { getSpeakerRecordTimeout } = useSpeakerRecordTimeout();
     const { getSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
@@ -160,6 +162,7 @@ const StartPythonFacadeComponent = () => {
                 getMicRecordTimeout();
                 getMicPhraseTimeout();
                 getMicMaxWords();
+                getMicWordFilterList();
 
                 getSpeakerRecordTimeout();
                 getSpeakerPhraseTimeout();

src-ui/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.jsx

@@ -1,11 +1,19 @@
 import styles from "./WordFilter.module.scss";
 import { _Entry } from "../_atoms/_entry/_Entry";
 import { useState } from "react";
-import { useStore_WordFilterList, useStore_IsOpenedWordFilterList } from "@store";
+import { useStore_IsOpenedMicWordFilterList } from "@store";
+import { useMicWordFilterList } from "@logics_configs";
+
 export const WordFilter = () => {
-    const [input_value, setInputValue] = useState();
-    const { currentWordFilterList, updateWordFilterList } = useStore_WordFilterList();
-    const { currentIsOpenedWordFilterList, updateIsOpenedWordFilterList } = useStore_IsOpenedWordFilterList();
+    const [input_value, setInputValue] = useState("");
+    const { currentMicWordFilterList, updateMicWordFilterList, setMicWordFilterList } = useMicWordFilterList();
+    const { currentIsOpenedMicWordFilterList, updateIsOpenedMicWordFilterList } = useStore_IsOpenedMicWordFilterList();
+
+    const extractRedoableFalseItem = (updated_list) => {
+        return updated_list.filter(item => {
+            if (item.is_redoable === false) return true;
+        });
+    };
 
     const onChangeEntry = (e) => {
         setInputValue(e.target.value);
@@ -13,37 +21,43 @@ export const WordFilter = () => {
 
     const addWords = () => {
         if (input_value === undefined) return;
-        const input_value_array = input_value.split(",");
-
-        let updated_list = [...currentWordFilterList.data];
-
-        for (let each_input_value of input_value_array) {
-            each_input_value = each_input_value.trim();
-            if (each_input_value) {
-                const target_item = updated_list.find((item) => item.value === each_input_value);
-                if (target_item === undefined) {
-                    // Add
-                    updated_list = [...updated_list, { value: each_input_value, is_redoable: false }];
-                } else {
-                    // Update
-                    updated_list = updated_list.map(item =>
-                        item.value === each_input_value ? { ...item, is_redoable: false } : item
-                    );
+        updateMicWordFilterList((prev_list) => {
+            const input_value_array = input_value.split(",");
+            let updated_list = [...prev_list.data];
+            for (let each_input_value of input_value_array) {
+                each_input_value = each_input_value.trim();
+                if (each_input_value) {
+                    const target_item = updated_list.find((item) => item.value === each_input_value);
+                    if (target_item === undefined) {
+                        // Add
+                        updated_list = [...updated_list, { value: each_input_value, is_redoable: false }];
+                    } else {
+                        // Update
+                        updated_list = updated_list.map(item =>
+                            item.value === each_input_value ? { ...item, is_redoable: false } : item
+                        );
+                    }
                 }
             }
-        }
+            const updated_list_for_restoring = extractRedoableFalseItem(updated_list).map((d) => d.value);
+            setMicWordFilterList(updated_list_for_restoring);
+            return updated_list;
+        });
 
-        updateWordFilterList(updated_list);
-        updateIsOpenedWordFilterList(true);
+        updateIsOpenedMicWordFilterList(true);
+        setInputValue("");
     };
 
 
     const updateRedoable = (target_item_value, is_redoable) => {
-        updateWordFilterList((prev_list) =>
-            prev_list.map(item =>
+        updateMicWordFilterList((prev_list) => {
+            const updated_list = prev_list.data.map(item =>
                 item.value === target_item_value ? { ...item, is_redoable: is_redoable } : item
-            )
-        );
+            );
+            const updated_list_for_restoring = extractRedoableFalseItem(updated_list).map((d) => d.value);
+            setMicWordFilterList(updated_list_for_restoring);
+            return updated_list;
+        });
     };
 
     const deleteAction = (target_item_value) => {
@@ -57,17 +71,17 @@ export const WordFilter = () => {
 
     return (
         <div className={styles.container}>
-            { currentIsOpenedWordFilterList.data &&
+            { currentIsOpenedMicWordFilterList.data &&
             <div className={styles.list_section_wrapper}>
                 {
-                    currentWordFilterList.data.map((item, index) => {
+                    currentMicWordFilterList.data.map((item, index) => {
                         return <WordFilterItem value={item.value} key={index} is_redoable={item.is_redoable} deleteAction={deleteAction} redoAction={redoAction}/>;
                     })
                 }
             </div>
             }
             <div className={styles.entry_section_wrapper}>
-                <_Entry width="30rem" onChange={onChangeEntry}/>
+                <_Entry width="30rem" onChange={onChangeEntry} ui_variable={input_value}/>
                 <button className={styles.add_button} onClick={addWords}>Add</button>
             </div>
         </div>
@@ -112,20 +126,20 @@ import { useTranslation } from "react-i18next";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
 export const WordFilterListToggleComponent = (props) => {
     const { t } = useTranslation();
-    const { currentIsOpenedWordFilterList, updateIsOpenedWordFilterList } = useStore_IsOpenedWordFilterList();
-    const { currentWordFilterList } = useStore_WordFilterList();
+    const { currentIsOpenedMicWordFilterList, updateIsOpenedMicWordFilterList } = useStore_IsOpenedMicWordFilterList();
+    const { currentMicWordFilterList } = useMicWordFilterList();
 
 
     const svg_class_names = clsx(styles["arrow_left_svg"], {
-        [styles.to_down]: !currentIsOpenedWordFilterList.data,
-        [styles.to_up]: currentIsOpenedWordFilterList.data
+        [styles.to_down]: !currentIsOpenedMicWordFilterList.data,
+        [styles.to_up]: currentIsOpenedMicWordFilterList.data
     });
 
     const OnclickFunction = () => {
-        updateIsOpenedWordFilterList(!currentIsOpenedWordFilterList.data);
+        updateIsOpenedMicWordFilterList(!currentIsOpenedMicWordFilterList.data);
     };
 
-    const word_filter_list_length = currentWordFilterList.data.filter(item => item.is_redoable === false).length;
+    const word_filter_list_length = currentMicWordFilterList.data.filter(item => item.is_redoable === false).length;
 
 
     return (

src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx

@@ -14,6 +14,7 @@ import {
 
 import {
     EntryContainer,
+    WordFilterContainer,
 } from "../_templates/Templates";
 
 export const Transcription = () => {
@@ -32,6 +33,7 @@ const Mic_Container = () => {
             <MicRecordTimeout_Box />
             <MicPhraseTimeout_Box />
             <MicMaxWords_Box />
+            <MicWordFilter_Box />
         </>
     );
 };
@@ -118,6 +120,16 @@ const MicMaxWords_Box = () => {
     );
 };
 
+const MicWordFilter_Box = () => {
+    const { t } = useTranslation();
+
+    return (
+        <WordFilterContainer
+            label={t("config_page.mic_word_filter.label")}
+            desc={t("config_page.mic_word_filter.desc")}
+        />
+    );
+};