From 72b01be3af0a84d20f8f549c76bced402004e433 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Mon, 23 Sep 2024 03:53:00 +0900 Subject: [PATCH] [Remove] Remove MessageFormat. --- .../setting_box/appearance/Appearance.jsx | 11 -- .../message_format/MessageFormat.jsx | 180 ------------------ .../message_format/MessageFormat.module.scss | 65 ------- .../setting_box/components/useSettingBox.jsx | 33 ---- src-ui/store.js | 97 ---------- 5 files changed, 386 deletions(-) delete mode 100644 src-ui/app/config_page/setting_section/setting_box/components/message_format/MessageFormat.jsx delete mode 100644 src-ui/app/config_page/setting_section/setting_box/components/message_format/MessageFormat.module.scss diff --git a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx index edf1dadb..de5223e2 100644 --- a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx @@ -16,7 +16,6 @@ export const Appearance = () => { // ThresholdContainer, // RadioButtonContainer, // DeeplAuthKeyContainer, - // MessageFormatContainer, // WordFilterContainer, // ActionButtonContainer, } = useSettingBox(); @@ -54,16 +53,6 @@ export const Appearance = () => { - - - - - - - - - - {}}/> */} diff --git a/src-ui/app/config_page/setting_section/setting_box/components/message_format/MessageFormat.jsx b/src-ui/app/config_page/setting_section/setting_box/components/message_format/MessageFormat.jsx deleted file mode 100644 index 1474c97d..00000000 --- a/src-ui/app/config_page/setting_section/setting_box/components/message_format/MessageFormat.jsx +++ /dev/null @@ -1,180 +0,0 @@ -import styles from "./MessageFormat.module.scss"; -import { useTranslation } from "react-i18next"; -import { - useStore_UiLanguage, - useStore_SendMessageFormat, - useStore_SendMessageFormatWithT, - useStore_ReceivedMessageFormat, - useStore_ReceivedMessageFormatWithT, -} from "@store"; -import { _Entry } from "../_atoms/_entry/_Entry"; -import SwapImg from "@images/swap_icon.png"; - -export const MessageFormat = (props) => { - const { currentSendMessageFormat, updateSendMessageFormat } = useStore_SendMessageFormat(); - const { currentSendMessageFormatWithT, updateSendMessageFormatWithT } = useStore_SendMessageFormatWithT(); - const { currentReceivedMessageFormat, updateReceivedMessageFormat } = useStore_ReceivedMessageFormat(); - const { currentReceivedMessageFormatWithT, updateReceivedMessageFormatWithT } = useStore_ReceivedMessageFormatWithT(); - - let atoms = []; - switch (props.id) { - case "send": - atoms = [currentSendMessageFormat, updateSendMessageFormat]; - break; - - case "send_with_t": - atoms = [currentSendMessageFormatWithT, updateSendMessageFormatWithT]; - break; - - case "received": - atoms = [currentReceivedMessageFormat, updateReceivedMessageFormat]; - break; - - case "received_with_t": - atoms = [currentReceivedMessageFormatWithT, updateReceivedMessageFormatWithT]; - break; - - default: - break; - } - - return ( -
- - - {["send_with_t", "received_with_t"].includes(props.id) && } -
- ); -}; - -const ExampleComponent = ({ id, current_format }) => { - const { t } = useTranslation(); - const { currentUiLanguage } = useStore_UiLanguage(); - - const createExampleMessage = () => { - const originalLangMessage = t("config_page.send_message_format.example_text"); - let format = current_format; - - if (["send_with_t", "received_with_t"].includes(id)) { - const translationLocale = currentUiLanguage.data === "en" ? "ja" : "en"; - const translatedLangMessage = t("config_page.send_message_format.example_text", { lng: translationLocale }); - - return format.is_message_first - ? `${format.before}${originalLangMessage}${format.between}${translatedLangMessage}${format.after}` - : `${format.before}${translatedLangMessage}${format.between}${originalLangMessage}${format.after}`; - } else { - return `${format.before}${originalLangMessage}${format.after}`; - } - }; - - return ( -
-

{createExampleMessage()}

-
- ); -}; - -const InputComponent = ({ id, atoms }) => { - const [current, updater] = atoms; - - const handleChange = (key) => (e) => { - updater({ ...current, [key]: e.target.value }); - }; - - return ( -
- <_Entry width="100%" onChange={handleChange("before")} /> - {["send_with_t", "received_with_t"].includes(id) ? ( - <> -

{current.is_message_first ? "[message]" : "[translation]"}

- <_Entry width="100%" onChange={handleChange("between")} /> -

{current.is_message_first ? "[translation]" : "[message]"}

- - ) : ( -

[message]

- )} - <_Entry width="100%" onChange={handleChange("after")} /> -
- ); -}; - -const SwapButton = ({ atoms }) => { - const [current, updater] = atoms; - - const swapMessageAndTranslate = () => { - updater({ ...current, is_message_first: !current.is_message_first }); - }; - - return ( -
-
-

{current.is_message_first ? "[message]" : "[translation]"}

- Swap Icon -

{current.is_message_first ? "[translation]" : "[message]"}

-
-
- ); -}; - - - -// const extractMessageFormat = (text) => { -// const split_result = text.split("[message]"); -// let result_data = { -// before: split_result[0], -// after: split_result[1] -// }; -// return result_data; -// }; - - - - -// const extractMessageFormatWithT = (text) => { -// const message_index = text.indexOf("[message]"); -// const translation_index = text.indexOf("[translation]"); - -// let result_data = { -// is_message_first: true, -// before: "", -// between: "", -// after: "" -// }; - -// if (message_index < translation_index) { -// const text_before_message = text.slice(0, message_index); -// result_data.before = text_before_message; - -// const match = text.match(/\[message\](.*?)\[translation\]/); -// if (match) { -// const extracted_text = match[1]; -// result_data.between = extracted_text; -// } else { -// throw new Error("Invalid Message Format"); -// } - -// const text_after_translation = text.slice(translation_index + "[translation]".length); -// result_data.after = text_after_translation; - -// } else if (translation_index < message_index) { -// result_data.is_message_first = false; -// const text_before_translation = text.slice(0, translation_index); -// result_data.before = text_before_translation; - -// const match = text.match(/\[translation\](.*?)\[message\]/); -// if (match) { -// const extracted_text = match[1]; -// result_data.between = extracted_text; -// } else { -// throw new Error("Invalid Message Format"); -// } - -// const text_after_message = text.slice(message_index + "[message]".length); -// result_data.after = text_after_message; - -// } else { -// throw new Error("Invalid Message Format"); -// } - -// return result_data; -// }; \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/components/message_format/MessageFormat.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/message_format/MessageFormat.module.scss deleted file mode 100644 index dfe4fc07..00000000 --- a/src-ui/app/config_page/setting_section/setting_box/components/message_format/MessageFormat.module.scss +++ /dev/null @@ -1,65 +0,0 @@ -.container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 100%; - gap: 1.6rem; -} - -.example_container { - padding: 1rem; - background-color: #3A4554; - border-radius: 1.4rem; - max-width: 30rem; - text-align: center; -} - -.example_text { - font-size: 1.4rem; -} - -.input_wrapper { - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; -} - -.preset_text { - font-size: 1.6rem; - width: 40rem; - text-align: center; -} - - -.swap_button_container { - width: 100%; - display: flex; - justify-content: end; -} - -.swap_button_wrapper { - display: flex; - justify-content: center; - align-items: center; - gap: 0.8rem; - padding: 0.6rem 1.2rem; - border-radius: 0.4rem; - background-color: var(--dark_850_color); - cursor: pointer; - &:hover { - background-color: var(--dark_800_color); - } - &:active { - background-color: var(--dark_900_color); - } -} - -.swap_text { - font-size: 1.4rem; -} - -.swap_img { - width: 2rem; -} \ No newline at end of file diff --git a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx index 5d6f0982..e82175e8 100644 --- a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.jsx @@ -8,10 +8,8 @@ import { Slider } from "./slider/Slider"; import { Checkbox } from "./checkbox/Checkbox"; import { Switchbox } from "./switchbox/Switchbox"; import { Entry } from "./entry/Entry"; -import { ThresholdComponent } from "./threshold_component/ThresholdComponent"; import { RadioButton } from "./radio_button/RadioButton"; import { OpenWebpage_DeeplAuthKey, DeeplAuthKey } from "./deepl_auth_key/DeeplAuthKey"; -import { MessageFormat } from "./message_format/MessageFormat"; import { ActionButton } from "./action_button/ActionButton"; import { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter"; @@ -38,21 +36,6 @@ export const DropdownMenuContainer = (props) => { }; -// export const ThresholdContainer = (props) => { -// return ( -//
-//
-// -// -//
-//
-// -//
-//
-// ); -// }; - - export const useSettingBox = () => { const SliderContainer = (props) => { return ( @@ -111,21 +94,6 @@ export const useSettingBox = () => { ); }; - - const MessageFormatContainer = (props) => { - return ( -
-
- -
-
- -
-
- ); - }; - - const ActionButtonContainer = (props) => { return (
@@ -159,7 +127,6 @@ export const useSettingBox = () => { EntryContainer, RadioButtonContainer, DeeplAuthKeyContainer, - MessageFormatContainer, WordFilterContainer, ActionButtonContainer, }; diff --git a/src-ui/store.js b/src-ui/store.js index 22fde03a..5173dc62 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -27,76 +27,6 @@ const generatePropertyNames = (base_ame) => ({ async_add: `asyncAdd${base_ame}`, }); -const createAtomWithHook = (initialValue, base_ame) => { - const property_names = generatePropertyNames(base_ame); - const atomInstance = atom(initialValue); - - const useHook = () => { - const currentAtom = useAtomValue(atomInstance); - const setAtom = useSetAtom(atomInstance); - - const updateAtom = (value) => { - setAtom(value); - }; - - const addAtom = (value) => { - setAtom((old_value) => [...old_value, value]); - }; - - return { - [property_names.current]: currentAtom, - [property_names.update]: updateAtom, - [property_names.add]: addAtom, - }; - }; - - return { atomInstance, useHook }; -}; - -import { loadable } from "jotai/utils"; -const createAsyncAtomWithHook = (initialValue, base_ame) => { - const property_names = generatePropertyNames(base_ame); - const atomInstance = atom(initialValue); - const asyncAtom = atom(async (get) => get(atomInstance)); - const loadableAtom = loadable(asyncAtom); - - const useHook = () => { - const asyncCurrentAtom = useAtomValue(loadableAtom); - const setAtom = useSetAtom(atomInstance); - - const updateAtom = (value) => { - setAtom(value); - }; - - const asyncSetAtom = useSetAtom(atom(null, async (get, set, payloadAsyncFunc, ...args) => { - set(atomInstance, payloadAsyncFunc(...args)); - })); - - const asyncUpdateAtom = async (asyncFunction, ...args) => { - asyncSetAtom(asyncFunction, ...args); - }; - - const addAtom = (value) => { - setAtom((old_value) => [...old_value, value]); - }; - - const asyncAddAtom = useSetAtom(atom(null, async (get, set, payloadAsyncFunc, ...args) => { - const old_value = await get(atomInstance); - set(atomInstance, payloadAsyncFunc([...old_value, ...args])); - })); - - return { - [property_names.current]: asyncCurrentAtom, - [property_names.update]: updateAtom, - [property_names.async_update]: asyncUpdateAtom, - [property_names.add]: addAtom, - [property_names.async_add]: asyncAddAtom, - }; - }; - - return { atomInstance, useHook }; -}; - const createAtomWithHook_WIP = (initialValue, base_ame, options) => { const property_names = generatePropertyNames(base_ame); @@ -229,33 +159,6 @@ export const { atomInstance: Atom_EnableAutomaticSpeakerThreshold, useHook: useS export const { atomInstance: Atom_UiLanguage, useHook: useStore_UiLanguage } = createAtomWithHook_WIP("en", "UiLanguage"); - - - - - - -export const { atomInstance: Atom_SendMessageFormat, useHook: useStore_SendMessageFormat } = createAtomWithHook({ - before: "", - after: "", -}, "SendMessageFormat"); -export const { atomInstance: Atom_SendMessageFormatWithT, useHook: useStore_SendMessageFormatWithT } = createAtomWithHook({ - before: "", - between: "", - after: "", - is_message_first: true, -}, "SendMessageFormatWithT"); -export const { atomInstance: Atom_ReceivedMessageFormat, useHook: useStore_ReceivedMessageFormat } = createAtomWithHook({ - before: "", - after: "", -}, "ReceivedMessageFormat"); -export const { atomInstance: Atom_ReceivedMessageFormatWithT, useHook: useStore_ReceivedMessageFormatWithT } = createAtomWithHook({ - before: "", - between: "", - after: "", - is_message_first: true, -}, "ReceivedMessageFormatWithT"); - export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useStore_IsOpenedWordFilterList } = createAtomWithHook_WIP(false, "IsOpenedWordFilterList"); export const { atomInstance: Atom_WordFilterList, useHook: useStore_WordFilterList } = createAtomWithHook_WIP(word_filter_list, "WordFilterList");