[Update/Refactor/TMP3] Refactor UI components and connect to backend APIs. (WordFilter)

Remove message format redo function.

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

@@ -12,12 +12,6 @@ export const WordFilter = () => {
     const { currentMicWordFilterList, updateMicWordFilterList, setMicWordFilterList } = useTranscription();
     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);
     };
@@ -30,20 +24,13 @@ export const WordFilter = () => {
             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);
+                    const exists = updated_list.find((item) => item === each_input_value);
-                    if (target_item === undefined) {
+                    if (!exists) {
-                        // Add
+                        updated_list = [...updated_list, each_input_value];
-                        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);
-            setMicWordFilterList(updated_list_for_restoring);
             return updated_list;
         });
 
@@ -52,25 +39,14 @@ export const WordFilter = () => {
     };
 
 
-    const updateRedoable = (target_item_value, is_redoable) => {
+    const deleteAction = (target_item_value) => {
         updateMicWordFilterList((prev_list) => {
-            const updated_list = prev_list.data.map(item =>
+            const updated_list = prev_list.data.filter((item) => item !== target_item_value);
-                item.value === target_item_value ? { ...item, is_redoable: is_redoable } : item
+            setMicWordFilterList(updated_list);
-            );
-            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) => {
-        updateRedoable(target_item_value, true);
-    };
-
-    const redoAction = (target_item_value) => {
-        updateRedoable(target_item_value, false);
-    };
-
 
     return (
         <div className={styles.container}>
@@ -78,7 +54,7 @@ export const WordFilter = () => {
             <div className={styles.list_section_wrapper}>
                 {
                     currentMicWordFilterList.data.map((item, index) => {
-                        return <WordFilterItem value={item.value} key={index} is_redoable={item.is_redoable} deleteAction={deleteAction} redoAction={redoAction}/>;
+                        return <WordFilterItem value={item} key={index} deleteAction={deleteAction}/>;
                     })
                 }
             </div>
@@ -92,45 +68,27 @@ export const WordFilter = () => {
 };
 
 import DeleteSvg from "@images/cancel.svg?react";
-import RedoSvg from "@images/redo.svg?react";
 import clsx from "clsx";
 const WordFilterItem = (props) => {
-
+    const item_wrapper_class_names = clsx(styles["item_wrapper"]);
-
+    const item_text_class_names = clsx(styles["item_text"]);
-    const item_wrapper_class_names = clsx(styles["item_wrapper"], {
-        [styles["is_redoable"]]: props.is_redoable
-    });
-
-    const item_text_class_names = clsx(styles["item_text"], {
-        [styles["is_redoable"]]: props.is_redoable
-    });
-
-    const target_item_value = props.value;
 
     return (
         <div className={item_wrapper_class_names}>
-            <p className={item_text_class_names}>{target_item_value}</p>
+            <p className={item_text_class_names}>{props.value}</p>
-            {props.is_redoable
+            <button className={clsx(styles.action_button, styles.delete)} onClick={() => props.deleteAction(props.value)}>
-            ?
+                <DeleteSvg className={styles.delete_svg}/>
-                <button className={clsx(styles.action_button, styles.redo)} onClick={() => props.redoAction(target_item_value)}>
+            </button>
-                    <RedoSvg className={styles.redo_svg}/>
-                </button>
-            :
-                <button className={clsx(styles.action_button, styles.delete)} onClick={() => props.deleteAction(target_item_value)}>
-                    <DeleteSvg className={styles.delete_svg}/>
-                </button>
-            }
         </div>
     );
 };
 
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
-export const WordFilterListToggleComponent = (props) => {
+export const WordFilterListToggleComponent = () => {
     const { t } = useI18n();
     const { currentIsOpenedMicWordFilterList, updateIsOpenedMicWordFilterList } = useStore_IsOpenedMicWordFilterList();
     const { currentMicWordFilterList } = useTranscription();
 
-
     const svg_class_names = clsx(styles["arrow_left_svg"], {
         [styles.to_down]: !currentIsOpenedMicWordFilterList.data,
         [styles.to_up]: currentIsOpenedMicWordFilterList.data
@@ -140,12 +98,9 @@ export const WordFilterListToggleComponent = (props) => {
         updateIsOpenedMicWordFilterList(!currentIsOpenedMicWordFilterList.data);
     };
 
-    const word_filter_list_length = currentMicWordFilterList.data.filter(item => item.is_redoable === false).length;
-
-
     return (
         <div className={styles.toggle_button_container}>
-            <p className={styles.words_count_text}>{t("config_page.transcription.mic_word_filter.count_desc", {count: word_filter_list_length} )}</p>
+            <p className={styles.words_count_text}>{t("config_page.transcription.mic_word_filter.count_desc", {count: currentMicWordFilterList.data.length} )}</p>
             <button className={styles.toggle_button_wrapper} onClick={OnclickFunction}>
                 <ArrowLeftSvg className={svg_class_names}/>
             </button>

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

@@ -25,16 +25,10 @@
     background-color: var(--dark_800_color);
     padding: 0.2rem 0.2rem 0.2rem 1rem;
     border-radius: 0.4rem;
-    &.is_redoable {
-        background-color: var(--dark_850_color);
-    }
 }
 .item_text {
     font-size: 1.4rem;
     font-weight: 300;
-    &.is_redoable {
-        text-decoration: line-through;
-    }
 }
 
 .action_button {