[Refactor] App.jsx: Distribute controllers to each files.

src-ui/app/App.jsx

@@ -1,7 +1,20 @@
-import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 
-import { useStartPython } from "@logics/useStartPython";
+import {
+    useWindow,
+} from "@logics_common";
+
+// import React from "react";
+
+import {
+    StartPythonController,
+    UiLanguageController,
+    ConfigPageCloseTriggerController,
+    UiSizeController,
+    FontFamilyController,
+    TransparencyController,
+} from "./_app_controllers/index.js";
+
 import { WindowTitleBar } from "./window_title_bar/WindowTitleBar";
 import { MainPage } from "./main_page/MainPage";
 import { ConfigPage } from "./config_page/ConfigPage";
@@ -53,154 +66,4 @@ const Contents = () => {
             }
         </>
     );
-};
-
-import {
-    useWindow,
-    useVolume,
-    useIsOpenedConfigPage,
-} from "@logics_common";
-
-import {
-    useUiLanguage,
-    useUiScaling,
-    useSelectedFontFamily,
-    useTransparency,
-} from "@logics_configs";
-
-import {
-    useMainFunction,
-} from "@logics_main";
-
-const StartPythonController = () => {
-    const { asyncStartPython } = useStartPython();
-    const hasRunRef = useRef(false);
-    const { asyncFetchFonts } = useAsyncFetchFonts();
-
-    useEffect(() => {
-        if (!hasRunRef.current) {
-            asyncStartPython().then(() => {
-                startFeedingToWatchDogController();
-                asyncFetchFonts();
-            }).catch((err) => {
-                console.error(err);
-            });
-        }
-        return () => hasRunRef.current = true;
-    }, []);
-
-    return null;
-};
-
-const UiLanguageController = () => {
-    const { currentUiLanguage } = useUiLanguage();
-    const { i18n } = useTranslation();
-
-    useEffect(() => {
-        i18n.changeLanguage(currentUiLanguage.data);
-    }, [currentUiLanguage.data]);
-    return null;
-};
-
-import { useStore_MainFunctionsStateMemory } from "@store";
-
-const ConfigPageCloseTriggerController = () => {
-    const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
-    const { currentMainFunctionsStateMemory, updateMainFunctionsStateMemory} = useStore_MainFunctionsStateMemory();
-    const {
-        currentTranscriptionSendStatus,
-        setTranscriptionSend,
-        currentTranscriptionReceiveStatus,
-        setTranscriptionReceive,
-    } = useMainFunction();
-    const {
-        currentMicThresholdCheckStatus,
-        volumeCheckStop_Mic,
-        currentSpeakerThresholdCheckStatus,
-        volumeCheckStop_Speaker,
-    } = useVolume();
-
-
-    const memorizeLatestMainFunctionsState = () => {
-        updateMainFunctionsStateMemory({
-            transcription_send: currentTranscriptionSendStatus.data,
-            transcription_receive: currentTranscriptionReceiveStatus.data,
-        });
-    };
-
-    const restoreMainFunctionState = () => {
-        if (currentMainFunctionsStateMemory.data.transcription_send === true) setTranscriptionSend(true);
-        if (currentMainFunctionsStateMemory.data.transcription_receive === true) setTranscriptionReceive(true);
-    };
-
-    useEffect(() => {
-        if (currentIsOpenedConfigPage.data === true) { // When config page is opened.
-            memorizeLatestMainFunctionsState();
-            if (currentTranscriptionSendStatus.data === true) setTranscriptionSend(false);
-            if (currentTranscriptionReceiveStatus.data === true) setTranscriptionReceive(false);
-        } else if (currentIsOpenedConfigPage.data === false) { // When config page is closed.
-            if (currentMicThresholdCheckStatus.data === true) volumeCheckStop_Mic();
-            if (currentSpeakerThresholdCheckStatus.data === true) volumeCheckStop_Speaker();
-            restoreMainFunctionState();
-        }
-    }, [currentIsOpenedConfigPage.data]);
-    return null;
-};
-
-import React from "react";
-const UiSizeController = () => {
-    const { currentUiScaling } = useUiScaling();
-    const font_size = 62.5 * currentUiScaling.data / 100;
-
-    useEffect(() => {
-        document.documentElement.style.setProperty("font-size", `${font_size}%`);
-    }, [currentUiScaling.data]);
-
-    return null;
-};
-
-
-const FontFamilyController = () => {
-    const { currentSelectedFontFamily } = useSelectedFontFamily();
-    useEffect(() => {
-        document.documentElement.style.setProperty("--font_family", currentSelectedFontFamily.data);
-    }, [currentSelectedFontFamily.data]);
-
-    return null;
-};
-
-import { useStore_SelectableFontFamilyList } from "@store";
-import { arrayToObject } from "@utils";
-
-import { invoke } from "@tauri-apps/api/tauri";
-const useAsyncFetchFonts = () => {
-    const { updateSelectableFontFamilyList } = useStore_SelectableFontFamilyList();
-    const asyncFetchFonts = async () => {
-        try {
-            let fonts = await invoke("get_font_list");
-            fonts = fonts.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }));
-            updateSelectableFontFamilyList(arrayToObject(fonts));
-        } catch (error) {
-            console.error("Error fetching fonts:", error);
-        }
-    };
-    return { asyncFetchFonts };
-};
-
-
-const TransparencyController = () => {
-    const { currentTransparency } = useTransparency();
-    useEffect(() => {
-        document.documentElement.style.setProperty("opacity", `${currentTransparency.data / 100}`);
-    }, [currentTransparency.data]);
-
-    return null;
-};
-
-import { useStdoutToPython } from "@logics/useStdoutToPython";
-const startFeedingToWatchDogController = () => {
-    const { asyncStdoutToPython } = useStdoutToPython();
-    setInterval(() => {
-        asyncStdoutToPython("/run/feed_watchdog");
-    }, 20000); // 20000ミリ秒 = 20秒
 };

src-ui/app/_app_controllers/ConfigPageCloseTriggerController.jsx

@@ -0,0 +1,55 @@
+import { useEffect } from "react";
+
+import {
+    useVolume,
+    useIsOpenedConfigPage,
+} from "@logics_common";
+
+import {
+    useMainFunction,
+} from "@logics_main";
+
+import { useStore_MainFunctionsStateMemory } from "@store";
+
+export const ConfigPageCloseTriggerController = () => {
+    const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
+    const { currentMainFunctionsStateMemory, updateMainFunctionsStateMemory} = useStore_MainFunctionsStateMemory();
+    const {
+        currentTranscriptionSendStatus,
+        setTranscriptionSend,
+        currentTranscriptionReceiveStatus,
+        setTranscriptionReceive,
+    } = useMainFunction();
+    const {
+        currentMicThresholdCheckStatus,
+        volumeCheckStop_Mic,
+        currentSpeakerThresholdCheckStatus,
+        volumeCheckStop_Speaker,
+    } = useVolume();
+
+
+    const memorizeLatestMainFunctionsState = () => {
+        updateMainFunctionsStateMemory({
+            transcription_send: currentTranscriptionSendStatus.data,
+            transcription_receive: currentTranscriptionReceiveStatus.data,
+        });
+    };
+
+    const restoreMainFunctionState = () => {
+        if (currentMainFunctionsStateMemory.data.transcription_send === true) setTranscriptionSend(true);
+        if (currentMainFunctionsStateMemory.data.transcription_receive === true) setTranscriptionReceive(true);
+    };
+
+    useEffect(() => {
+        if (currentIsOpenedConfigPage.data === true) { // When config page is opened.
+            memorizeLatestMainFunctionsState();
+            if (currentTranscriptionSendStatus.data === true) setTranscriptionSend(false);
+            if (currentTranscriptionReceiveStatus.data === true) setTranscriptionReceive(false);
+        } else if (currentIsOpenedConfigPage.data === false) { // When config page is closed.
+            if (currentMicThresholdCheckStatus.data === true) volumeCheckStop_Mic();
+            if (currentSpeakerThresholdCheckStatus.data === true) volumeCheckStop_Speaker();
+            restoreMainFunctionState();
+        }
+    }, [currentIsOpenedConfigPage.data]);
+    return null;
+};

src-ui/app/_app_controllers/FontFamilyController.jsx

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+import { useSelectedFontFamily } from "@logics_configs";
+
+export const FontFamilyController = () => {
+    const { currentSelectedFontFamily } = useSelectedFontFamily();
+    useEffect(() => {
+        document.documentElement.style.setProperty("--font_family", currentSelectedFontFamily.data);
+    }, [currentSelectedFontFamily.data]);
+
+    return null;
+};

src-ui/app/_app_controllers/StartPythonController.jsx

@@ -0,0 +1,48 @@
+import { invoke } from "@tauri-apps/api/tauri";
+import { useEffect, useRef } from "react";
+import { useStartPython } from "@logics/useStartPython";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+import { useStore_SelectableFontFamilyList } from "@store";
+import { arrayToObject } from "@utils";
+
+export const StartPythonController = () => {
+    const { asyncStartPython } = useStartPython();
+    const hasRunRef = useRef(false);
+    const { asyncFetchFonts } = useAsyncFetchFonts();
+
+    useEffect(() => {
+        if (!hasRunRef.current) {
+            asyncStartPython().then(() => {
+                startFeedingToWatchDogController();
+                asyncFetchFonts();
+            }).catch((err) => {
+                console.error(err);
+            });
+        }
+        return () => hasRunRef.current = true;
+    }, []);
+
+    return null;
+};
+
+const useAsyncFetchFonts = () => {
+    const { updateSelectableFontFamilyList } = useStore_SelectableFontFamilyList();
+    const asyncFetchFonts = async () => {
+        try {
+            let fonts = await invoke("get_font_list");
+            fonts = fonts.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }));
+            updateSelectableFontFamilyList(arrayToObject(fonts));
+        } catch (error) {
+            console.error("Error fetching fonts:", error);
+        }
+    };
+    return { asyncFetchFonts };
+};
+
+const startFeedingToWatchDogController = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    setInterval(() => {
+        asyncStdoutToPython("/run/feed_watchdog");
+    }, 20000); // 20000ミリ秒 = 20秒
+};

src-ui/app/_app_controllers/TransparencyController.jsx

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+import { useTransparency } from "@logics_configs";
+
+export const TransparencyController = () => {
+    const { currentTransparency } = useTransparency();
+    useEffect(() => {
+        document.documentElement.style.setProperty("opacity", `${currentTransparency.data / 100}`);
+    }, [currentTransparency.data]);
+
+    return null;
+};

src-ui/app/_app_controllers/UiLanguageController.jsx

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+
+import { useTranslation } from "react-i18next";
+import { useUiLanguage } from "@logics_configs";
+
+export const UiLanguageController = () => {
+    const { currentUiLanguage } = useUiLanguage();
+    const { i18n } = useTranslation();
+
+    useEffect(() => {
+        i18n.changeLanguage(currentUiLanguage.data);
+    }, [currentUiLanguage.data]);
+    return null;
+};

src-ui/app/_app_controllers/UiSizeController.jsx

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+import { useUiScaling } from "@logics_configs";
+
+export const UiSizeController = () => {
+    const { currentUiScaling } = useUiScaling();
+    const font_size = 62.5 * currentUiScaling.data / 100;
+
+    useEffect(() => {
+        document.documentElement.style.setProperty("font-size", `${font_size}%`);
+    }, [currentUiScaling.data]);
+
+    return null;
+};

src-ui/app/_app_controllers/index.js

@@ -0,0 +1,6 @@
+export { StartPythonController } from "./StartPythonController";
+export { UiLanguageController } from "./UiLanguageController";
+export { ConfigPageCloseTriggerController } from "./ConfigPageCloseTriggerController";
+export { UiSizeController } from "./UiSizeController";
+export { FontFamilyController } from "./FontFamilyController";
+export { TransparencyController } from "./TransparencyController";