[Refactor/TMP4] Refactor UI components and connect to backend APIs. (MessageFormat)

src-ui/app/config_page/setting_section/setting_box/_components/message_format/MessageFormat.jsx

@@ -3,7 +3,10 @@ import { useTranslation } from "react-i18next";
 import { _Entry } from "../_atoms/_entry/_Entry";
 import SwapImg from "@images/swap_icon.png";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
-import { useStore_IsBreakPoint } from "@store";
+import {
+    useStore_IsBreakPoint,
+    useStore_MessageFormat_ExampleViewFilter,
+} from "@store";
 import { useAppearance } from "@logics_configs";
 import { ui_configs } from "@ui_configs";
 import { ResetButton } from "@common_components";
@@ -27,8 +30,6 @@ export const MessageFormat = (props) => {
         <div className={message_format_container_class}>
             <ExampleComponent
                 format={props.variable.data}
-                example_view_filter_variable={props.example_view_filter_variable}
-                exampleViewFilterToggleFunction={props.exampleViewFilterToggleFunction}
                 format_id={props.format_id}
             />
             <div className={styles.border}></div>
@@ -41,10 +42,13 @@ export const MessageFormat = (props) => {
     );
 };
 
-const ExampleComponent = ({ format, example_view_filter_variable, exampleViewFilterToggleFunction, format_id }) => {
+const ExampleComponent = ({ format, format_id }) => {
     const { currentUiLanguage } = useAppearance();
     const { t } = useTranslation();
-
+    const {
+        currentMessageFormat_ExampleViewFilter,
+        updateMessageFormat_ExampleViewFilter,
+    } = useStore_MessageFormat_ExampleViewFilter();
 
     const locale_base_path = "config_page.others.message_format_common.example_view.";
 
@@ -116,8 +120,8 @@ const ExampleComponent = ({ format, example_view_filter_variable, exampleViewFil
     };
 
     const svg_class_names = clsx(styles.arrow_left_svg, {
-        [styles.to_down]: example_view_filter_variable[format_id] === "Simplified",
-        [styles.to_up]: example_view_filter_variable[format_id] === "All"
+        [styles.to_down]: currentMessageFormat_ExampleViewFilter.data[format_id] === "Simplified",
+        [styles.to_up]: currentMessageFormat_ExampleViewFilter.data[format_id] === "All"
     });
 
 
@@ -151,12 +155,22 @@ const ExampleComponent = ({ format, example_view_filter_variable, exampleViewFil
         }
     };
 
+    const exampleViewFilterToggleFunction = (format_id) => {
+        if (["send", "received"].includes(format_id) === false) return console.error(`format_id should be small case 'send' or 'received'. got format_id: ${format_id}`);
+
+        updateMessageFormat_ExampleViewFilter({
+            ...currentMessageFormat_ExampleViewFilter.data,
+            [format_id]: currentMessageFormat_ExampleViewFilter.data[format_id] === "Simplified"
+                ? "All"
+                : "Simplified"
+        });
+    };
 
     return (
         <div className={styles.example_container}>
             <p className={styles.section_title}>{label_title}</p>
             <div className={styles.example_view_container}>
-                <FilteredExampleBox format_id={format_id} id={example_view_filter_variable[format_id]} />
+                <FilteredExampleBox format_id={format_id} id={currentMessageFormat_ExampleViewFilter.data[format_id]} />
             </div>
             { format_id === "send" &&
                 <div className={styles.show_more_container} onClick={() => exampleViewFilterToggleFunction(format_id)}>

src-ui/app/config_page/setting_section/setting_box/others/Others.jsx

@@ -168,8 +168,6 @@ const SendMessageFormatPartsContainer = () => {
     const {
         currentSendMessageFormatParts,
         setSendMessageFormatParts,
-        currentMessageFormat_ExampleViewFilter,
-        toggleMessageFormat_ExampleViewFilter,
     } = useOthers();
 
     return (
@@ -178,8 +176,6 @@ const SendMessageFormatPartsContainer = () => {
             desc={t("config_page.others.send_message_format.desc")}
             variable={currentSendMessageFormatParts}
             setFunction={setSendMessageFormatParts}
-            example_view_filter_variable={currentMessageFormat_ExampleViewFilter.data}
-            exampleViewFilterToggleFunction={toggleMessageFormat_ExampleViewFilter}
             format_id="send"
         />
     );
@@ -190,8 +186,6 @@ const ReceivedMessageFormatPartsContainer = () => {
     const {
         currentReceivedMessageFormatParts,
         setReceivedMessageFormatParts,
-        currentMessageFormat_ExampleViewFilter,
-        toggleMessageFormat_ExampleViewFilter,
     } = useOthers();
 
     return (
@@ -200,8 +194,6 @@ const ReceivedMessageFormatPartsContainer = () => {
             desc={t("config_page.others.received_message_format.desc")}
             variable={currentReceivedMessageFormatParts}
             setFunction={setReceivedMessageFormatParts}
-            example_view_filter_variable={currentMessageFormat_ExampleViewFilter.data}
-            exampleViewFilterToggleFunction={toggleMessageFormat_ExampleViewFilter}
             format_id="received"
         />
     );

src-ui/store.js

@@ -332,10 +332,10 @@ export const { atomInstance: Atom_OverlayShowOnlyTranslatedMessages, useHook: us
 // export const { atomInstance: Atom_EnableSendMessageToVrc, useHook: useStore_EnableSendMessageToVrc } = createAtomWithHook(true, "EnableSendMessageToVrc");
 // export const { atomInstance: Atom_EnableSendReceivedMessageToVrc, useHook: useStore_EnableSendReceivedMessageToVrc } = createAtomWithHook(false, "EnableSendReceivedMessageToVrc");
 // export const { atomInstance: Atom_EnableNotificationVrcSfx, useHook: useStore_EnableNotificationVrcSfx } = createAtomWithHook(true, "EnableNotificationVrcSfx");
-// export const { atomInstance: Atom_MessageFormat_ExampleViewFilter, useHook: useStore_MessageFormat_ExampleViewFilter } = createAtomWithHook({
-//     send: "Simplified",
-//     received: "Simplified",
-// }, "MessageFormat_ExampleViewFilter");
+export const { atomInstance: Atom_MessageFormat_ExampleViewFilter, useHook: useStore_MessageFormat_ExampleViewFilter } = createAtomWithHook({
+    send: "Simplified",
+    received: "Simplified",
+}, "MessageFormat_ExampleViewFilter");
 // export const { atomInstance: Atom_SendMessageFormatParts, useHook: useStore_SendMessageFormatParts } = createAtomWithHook({
 //     message: {
 //         prefix: "",

src-ui/ui_config_setter.js

@@ -468,14 +468,6 @@ export const SETTINGS_ARRAY = [
         logics_template_id: "toggle_enable_disable",
         base_endpoint_name: "send_received_message_to_vrc",
     },
-    {
-        Category: "Others",
-        Base_Name: "MessageFormat_ExampleViewFilter",
-        default_value: {},
-        ui_template_id: "object",
-        logics_template_id: "get_set",
-        base_endpoint_name: "message_format_example_view_filter",
-    },
     {
         Category: "Others",
         Base_Name: "SendMessageFormatParts",