every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Remove message format redo function.
This commit is contained in:
Sakamoto Shiina
2025-10-22 13:41:08 +09:00
parent dfb08a96bb
commit 9473bdef13
2 changed files with 16 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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);
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 exists = updated_list.find((item) => item === each_input_value);
if (!exists) {
updated_list = [...updated_list, each_input_value];
}
}
}
const updated_list_for_restoring = extractRedoableFalseItem(updated_list).map((d) => d.value);
setMicWordFilterList(updated_list_for_restoring);
setMicWordFilterList(updated_list);
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 =>
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);
const updated_list = prev_list.data.filter((item) => item !== target_item_value);
setMicWordFilterList(updated_list);
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"], {
[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;
const item_wrapper_class_names = clsx(styles["item_wrapper"]);
const item_text_class_names = clsx(styles["item_text"]);
return (
<div className={item_wrapper_class_names}>
<p className={item_text_class_names}>{target_item_value}</p>
{props.is_redoable
?
<button className={clsx(styles.action_button, styles.redo)} onClick={() => props.redoAction(target_item_value)}>
<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>
}
<p className={item_text_class_names}>{props.value}</p>
<button className={clsx(styles.action_button, styles.delete)} onClick={() => props.deleteAction(props.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>

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

@@ -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 {