From 2b9061d74d205e7911912139b05326a625741060 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sun, 8 Sep 2024 23:13:18 +0900
Subject: [PATCH] [Update] Config Page: Others Tab. Add section, send message
 button type.

---
 src-ui/app/App.jsx                            |  2 +
 .../components/radio_button/RadioButton.jsx   | 37 ++++++++++---------
 .../radio_button/RadioButton.module.scss      |  7 ++++
 .../setting_box/others/Others.jsx             | 12 +++++-
 src-ui/logics/useConfig.js                    | 16 ++++++++
 src-ui/logics/useReceiveRoutes.js             |  3 ++
 src-ui/store.js                               |  2 +-
 7 files changed, 59 insertions(+), 20 deletions(-)

diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx
index b9abafcc..03ae751f 100644
--- a/src-ui/app/App.jsx
+++ b/src-ui/app/App.jsx
@@ -31,6 +31,7 @@ const StartPythonFacadeComponent = () => {
         getSelectedSpeakerDevice,
 
         getEnableAutoClearMessageBox,
+        getSendMessageButtonType,
     } = useConfig();
 
 
@@ -46,6 +47,7 @@ const StartPythonFacadeComponent = () => {
                 getSelectedSpeakerDevice();
 
                 getEnableAutoClearMessageBox();
+                getSendMessageButtonType();
             }).catch((err) => {
                 console.error(err);
             });
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.jsx b/src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.jsx
index 3a409752..11fcfb83 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.jsx
@@ -1,27 +1,28 @@
-import clsx from "clsx";
-import { useState } from "react";
 import styles from "./RadioButton.module.scss";
 
 export const RadioButton = (props) => {
-    const options = [
-        { radio_button_id: "1", label: "AAAAAAAA" },
-        { radio_button_id: "2", label: "BBBBBB" }
-    ];
-
-    const changeValue = (e) => {
-        console.log(e.target.value);
-    };
-
     return (
         <div className={styles.container}>
-            {options.map((option) => (
+            {props.options.map((option) => (
                 <label key={option.radio_button_id} className={styles.radio_button_wrapper}>
-                    <input
-                        type="radio"
-                        name="radio"
-                        value={option.radio_button_id}
-                        onChange={changeValue}
-                    />
+                    {props.checked_variable.data === option.radio_button_id
+                        ? <>
+                            { props.checked_variable.state === "loading" && <span className={styles.loader}></span> }
+                            <input
+                                type="radio"
+                                name="radio"
+                                value={option.radio_button_id}
+                                onChange={() => props.selectFunction(option.radio_button_id)}
+                                checked
+                            />
+                        </>
+                        : <input
+                            type="radio"
+                            name="radio"
+                            value={option.radio_button_id}
+                            onChange={() => props.selectFunction(option.radio_button_id)}
+                        />
+                    }
                     <p className={styles.radio_button_label}>{option.label}</p>
                 </label>
             ))}
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.module.scss
index ba631f17..b8e82e23 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.module.scss
@@ -1,3 +1,5 @@
+@import "@scss_mixins";
+
 .container {
     display: flex;
     flex-direction: column;
@@ -12,6 +14,7 @@
     gap: 1rem;
     padding: 0.6rem 0.8rem;
     border-radius: 0.4rem;
+    position: relative;
     &:hover {
         background-color: var(--dark_800_color);
     }
@@ -38,4 +41,8 @@ input[type="radio"] {
 .radio_button_label {
     font-size: 1.4rem;
     font-weight: 300;
+}
+
+.loader {
+    @include loader(2rem, 0.2rem, left, -1.6rem);
 }
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
index 4995e6e7..dabb27d1 100644
--- a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
@@ -14,6 +14,7 @@ export const Others = () => {
     } = useSettingBox();
 
     const { currentEnableAutoClearMessageBox, toggleEnableAutoClearMessageBox } = useConfig();
+    const { currentSendMessageButtonType, setSendMessageButtonType } = useConfig();
 
 
     return (
@@ -24,7 +25,16 @@ export const Others = () => {
                 toggleFunction={toggleEnableAutoClearMessageBox}
             />
 
-            {/* <RadioButtonContainer label={t("config_page.send_message_button_type.label")} checkbox_id="checkbox_id_1"/> */}
+            <RadioButtonContainer
+                label={t("config_page.send_message_button_type.label")}
+                selectFunction={setSendMessageButtonType}
+                options={[
+                    { radio_button_id: "hide", label: t("config_page.send_message_button_type.hide") },
+                    { radio_button_id: "show", label: t("config_page.send_message_button_type.show") },
+                    { radio_button_id: "show_and_disable_enter_key", label: t("config_page.send_message_button_type.show_and_disable_enter_key") },
+                ]}
+                checked_variable={currentSendMessageButtonType}
+            />
         </>
     );
 };
\ No newline at end of file
diff --git a/src-ui/logics/useConfig.js b/src-ui/logics/useConfig.js
index 1c6e5705..1557c119 100644
--- a/src-ui/logics/useConfig.js
+++ b/src-ui/logics/useConfig.js
@@ -8,6 +8,7 @@ import {
     useSelectedSpeakerDevice,
 
     useEnableAutoClearMessageBox,
+    useSendMessageButtonType,
 } from "@store";
 
 import { useStdoutToPython } from "./useStdoutToPython";
@@ -25,6 +26,7 @@ export const useConfig = () => {
     const { updateSpeakerDeviceList } = useSpeakerDeviceList();
     const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
     const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
+    const { currentSendMessageButtonType, updateSendMessageButtonType } = useSendMessageButtonType();
 
 
     const asyncPending = () => new Promise(() => {});
@@ -117,6 +119,20 @@ export const useConfig = () => {
             updateEnableAutoClearMessageBox(payload.data);
         },
 
+        getSendMessageButtonType: () => {
+            updateSendMessageButtonType(asyncPending);
+            asyncStdoutToPython("/config/send_message_button_type");
+        },
+        setSendMessageButtonType: (selected_type) => {
+            updateSendMessageButtonType(asyncPending);
+            asyncStdoutToPython("/controller/callback_set_send_message_button_type", selected_type);
+        },
+        currentSendMessageButtonType: currentSendMessageButtonType,
+        updateSendMessageButtonType: (payload) => {
+            updateSendMessageButtonType(payload.data);
+        },
+
+
 
     };
 };
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index b856d752..18d5ecd5 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -28,6 +28,7 @@ export const useReceiveRoutes = () => {
         updateSelectedSpeakerDevice,
 
         updateEnableAutoClearMessageBox,
+        updateSendMessageButtonType,
     } = useConfig();
 
     const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume();
@@ -62,6 +63,8 @@ export const useReceiveRoutes = () => {
         "/controller/callback_enable_auto_clear_chatbox": updateEnableAutoClearMessageBox,
         "/controller/callback_disable_auto_clear_chatbox": updateEnableAutoClearMessageBox,
 
+        "/config/send_message_button_type": updateSendMessageButtonType,
+        "/controller/callback_set_send_message_button_type": updateSendMessageButtonType,
 
 
         "/controller/callback_messagebox_send": updateSentMessageLog,
diff --git a/src-ui/store.js b/src-ui/store.js
index e47e40df..3c57adb4 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -155,7 +155,7 @@ export const { atomInstance: Atom_WordFilterList, useHook: useWordFilterList } =
 
 // Others
 export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useEnableAutoClearMessageBox } = createAsyncAtomWithHook(true, "EnableAutoClearMessageBox");
-
+export const { atomInstance: Atom_SendMessageButtonType, useHook: useSendMessageButtonType } = createAsyncAtomWithHook("show", "SendMessageButtonType");