Merge branch 'ui' into develop

src-ui/views/app/config_page/setting_section/setting_box/_components/connection_check_button/ConnectionCheckButton.jsx

@@ -10,7 +10,6 @@ export const ConnectionCheckButton = (props) => {
     return (
         <div className={styles.container}>
             <p>{label}</p>
-            <p>{`UI Status: ${props.state}`}</p>
             <button className={styles.button_wrapper} onClick={props.checkFunction}>
                 <p className={styles.button_label}>Connection Check</p>
             </button>

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

@@ -10,6 +10,7 @@ import {
 import { useAppearance } from "@logics_configs";
 import { ui_configs } from "@ui_configs";
 import { ResetButton } from "@common_components";
+import { useState, useEffect, useRef } from "react";
 
 const ENTRY_WIDTH = "8rem";
 
@@ -199,23 +200,51 @@ const InputComponent = ({id, variable, setFunction, format_id }) => {
         return replaced;
     };
 
+    const [local_var, setLocalVar] = useState(variable);
+    const debounce_ref = useRef(null);
+
+    useEffect(() => {
+        setLocalVar(variable);
+    }, [variable]);
+
+    useEffect(() => {
+        return () => {
+            if (debounce_ref.current) {
+                clearTimeout(debounce_ref.current);
+                debounce_ref.current = null;
+            }
+        };
+    }, []);
+
+    const scheduleUpdate = (new_var) => {
+        if (debounce_ref.current) clearTimeout(debounce_ref.current);
+        debounce_ref.current = setTimeout(() => {
+            setFunction(new_var);
+            debounce_ref.current = null;
+        }, 500);
+    };
+
     const handleChange = (parent_key, child_key) => (e) => {
-        const rawValue = e.target.value;
+        const raw_value = e.target.value;
-        const parsedValue = replaceValue(rawValue);
+        const parsed_value = replaceValue(raw_value);
 
         if (child_key !== undefined) {
-            setFunction({
+            const new_var = {
-                ...variable,
+                ...local_var,
                 [parent_key]: {
-                    ...variable[parent_key],
+                    ...local_var[parent_key],
-                    [child_key]: parsedValue
+                    [child_key]: parsed_value,
-                }
+                },
-            });
+            };
+            setLocalVar(new_var);
+            scheduleUpdate(new_var);
         } else {
-            setFunction({
+            const new_var = {
-                ...variable,
+                ...local_var,
-                [parent_key]: parsedValue
+                [parent_key]: parsed_value,
-            });
+            };
+            setLocalVar(new_var);
+            scheduleUpdate(new_var);
         }
     };
 
@@ -229,16 +258,16 @@ const InputComponent = ({id, variable, setFunction, format_id }) => {
     };
 
     const resetFunction = () => {
-        if (format_id === "send") {
+        const new_val = format_id === "send" ? ui_configs.send_message_format_parts : ui_configs.received_message_format_parts;
-            setFunction(ui_configs.send_message_format_parts);
+        setLocalVar(new_val);
-        } else if (format_id === "received") {
+        setFunction(new_val);
-            setFunction(ui_configs.received_message_format_parts);
-        }
     };
 
     const SwapButton = ({ variable, setFunction }) => {
         const swapMessageAndTranslate = () => {
-            setFunction({ ...variable, translation_first: !variable.translation_first });
+            const new_var = { ...variable, translation_first: !variable.translation_first };
+            setLocalVar(new_var);
+            setFunction(new_var);
         };
 
         return (
@@ -255,38 +284,38 @@ const InputComponent = ({id, variable, setFunction, format_id }) => {
             <p className={styles.section_title}>{label_title}</p>
             <div className={styles.message_format_settings_wrapper}>
                 <div className={styles.swap_button_container}>
-                    <SwapButton variable={variable} setFunction={setFunction} />
+                    <SwapButton variable={local_var} setFunction={setFunction} />
                 </div>
-                { !variable.translation_first ?
+                { !local_var.translation_first ?
                 <div className={styles.input_wrapper}>
                     <div className={styles.input_contents}>
-                        <_Entry ui_variable={toUiValue(variable.message.prefix)} width={ENTRY_WIDTH} onChange={handleChange("message", "prefix")} />
+                        <_Entry ui_variable={toUiValue(local_var.message.prefix)} width={ENTRY_WIDTH} onChange={handleChange("message", "prefix")} />
                         <p className={styles.preset_text}>{LABEL_ORIGINAL}</p>
-                        <_Entry ui_variable={toUiValue(variable.message.suffix)} width={ENTRY_WIDTH} onChange={handleChange("message", "suffix")} />
+                        <_Entry ui_variable={toUiValue(local_var.message.suffix)} width={ENTRY_WIDTH} onChange={handleChange("message", "suffix")} />
                     </div>
                     <div className={styles.input_contents}>
-                        <_Entry ui_variable={toUiValue(variable.separator)} width={ENTRY_WIDTH} onChange={handleChange("separator")} />
+                        <_Entry ui_variable={toUiValue(local_var.separator)} width={ENTRY_WIDTH} onChange={handleChange("separator")} />
                     </div>
                     <div className={styles.input_contents}>
-                        <_Entry ui_variable={toUiValue(variable.translation.prefix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "prefix")} />
+                        <_Entry ui_variable={toUiValue(local_var.translation.prefix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "prefix")} />
                         <p className={styles.preset_text}>{LABEL_TRANSLATED}</p>
-                        <_Entry ui_variable={toUiValue(variable.translation.suffix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "suffix")} />
+                        <_Entry ui_variable={toUiValue(local_var.translation.suffix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "suffix")} />
                     </div>
                 </div>
                 :
                 <div className={styles.input_wrapper}>
                     <div className={styles.input_contents}>
-                        <_Entry ui_variable={toUiValue(variable.translation.prefix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "prefix")} />
+                        <_Entry ui_variable={toUiValue(local_var.translation.prefix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "prefix")} />
                         <p className={styles.preset_text}>{LABEL_TRANSLATED}</p>
-                        <_Entry ui_variable={toUiValue(variable.translation.suffix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "suffix")} />
+                        <_Entry ui_variable={toUiValue(local_var.translation.suffix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "suffix")} />
                     </div>
                     <div className={styles.input_contents}>
-                        <_Entry ui_variable={toUiValue(variable.separator)} width={ENTRY_WIDTH} onChange={handleChange("separator")} />
+                        <_Entry ui_variable={toUiValue(local_var.separator)} width={ENTRY_WIDTH} onChange={handleChange("separator")} />
                     </div>
                     <div className={styles.input_contents}>
-                        <_Entry ui_variable={toUiValue(variable.message.prefix)} width={ENTRY_WIDTH} onChange={handleChange("message", "prefix")} />
+                        <_Entry ui_variable={toUiValue(local_var.message.prefix)} width={ENTRY_WIDTH} onChange={handleChange("message", "prefix")} />
                         <p className={styles.preset_text}>{LABEL_ORIGINAL}</p>
-                        <_Entry ui_variable={toUiValue(variable.message.suffix)} width={ENTRY_WIDTH} onChange={handleChange("message", "suffix")} />
+                        <_Entry ui_variable={toUiValue(local_var.message.suffix)} width={ENTRY_WIDTH} onChange={handleChange("message", "suffix")} />
                     </div>
                 </div>
                 }
@@ -295,7 +324,7 @@ const InputComponent = ({id, variable, setFunction, format_id }) => {
                         <p className={styles.multi_translation_title}>{LABEL_FOR_MULTI_TRANSLATION}</p>
                         <div className={styles.input_contents}>
                             <p className={styles.preset_text}>{LABEL_TRANSLATED}</p>
-                            <_Entry ui_variable={toUiValue(variable.translation.separator)} width={ENTRY_WIDTH} onChange={handleChange("translation", "separator")} />
+                            <_Entry ui_variable={toUiValue(local_var.translation.separator)} width={ENTRY_WIDTH} onChange={handleChange("translation", "separator")} />
                             <p className={styles.preset_text}>{LABEL_TRANSLATED}</p>
                         </div>
                     </div>