From 7dbf324e311ac9e00fcd76088548738a80b672a9 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Mon, 23 Sep 2024 09:26:58 +0900
Subject: [PATCH] [Update] Main Page. Add Language swap button functionally.

---
 .../language_swap_button/LanguageSwapButton.jsx           | 3 +++
 src-ui/logics/main/useLanguageSettings.js                 | 8 ++++++++
 src-ui/logics/useReceiveRoutes.js                         | 5 +++++
 3 files changed, 16 insertions(+)

diff --git a/src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.jsx b/src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.jsx
index 8174cea4..3a4d374d 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.jsx
+++ b/src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.jsx
@@ -5,10 +5,12 @@ import { useTranslation } from "react-i18next";
 import styles from "./LanguageSwapButton.module.scss";
 
 import NarrowArrowDownSvg from "@images/narrow_arrow_down.svg?react";
+import { useLanguageSettings } from "@logics_main/useLanguageSettings";
 
 export const LanguageSwapButton = () => {
     const [isHovered, setIsHovered] = useState(false);
     const { t } = useTranslation();
+    const { runLanguageSwap } = useLanguageSettings();
 
     const label = isHovered
         ? t("main_page.swap_button_label")
@@ -27,6 +29,7 @@ export const LanguageSwapButton = () => {
                 className={styles.swap_button_wrapper}
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
+                onClick={runLanguageSwap}
             >
                 <NarrowArrowDownSvg className={clsx(styles.narrow_arrow_down_svg, styles.reverse)} />
                 <p className={labelClassName}>{label}</p>
diff --git a/src-ui/logics/main/useLanguageSettings.js b/src-ui/logics/main/useLanguageSettings.js
index 64d3213c..193ff972 100644
--- a/src-ui/logics/main/useLanguageSettings.js
+++ b/src-ui/logics/main/useLanguageSettings.js
@@ -104,6 +104,12 @@ export const useLanguageSettings = () => {
         asyncStdoutToPython("/set/selected_translator_engines", send_obj);
     };
 
+    const runLanguageSwap = () => {
+        pendingSelectedYourLanguages();
+        pendingSelectedTargetLanguages();
+        asyncStdoutToPython("/run/swap_your_language_and_target_language");
+    };
+
 
     return {
         currentSelectedPresetTabNumber,
@@ -134,5 +140,7 @@ export const useLanguageSettings = () => {
         getSelectedTranslationEngines,
         updateSelectedTranslationEngines,
         setSelectedTranslationEngines,
+
+        runLanguageSwap,
     };
 };
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index 2b8c7eeb..5bf83b57 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -97,6 +97,11 @@ export const useReceiveRoutes = () => {
         "/get/selected_translator_engines": updateSelectedTranslationEngines,
         "/set/selected_translator_engines": updateSelectedTranslationEngines,
 
+        "/run/swap_your_language_and_target_language": (payload) => {
+            updateSelectedYourLanguages(payload.your);
+            updateSelectedTargetLanguages(payload.target);
+        },
+
 
         // Language Selector
         "/get/list_languages": updateSelectableLanguageList,