[Refactor] Move to src-ui/views and src-ui/logics structure.

src-ui/views/app/main_page/main_section/MainSection.jsx

@@ -0,0 +1,102 @@
+import { useI18n } from "@useI18n";
+import styles from "./MainSection.module.scss";
+
+import { TopBar } from "./top_bar/TopBar";
+import { MessageContainer } from "./message_container/MessageContainer";
+import { LanguageSelector } from "./language_selector/LanguageSelector";
+
+import { useStore_IsOpenedLanguageSelector } from "@store";
+import { useLanguageSettings } from "@logics_main";
+import { useEffect } from "react";
+
+import { PluginHost } from "./PluginHost";
+
+import { usePlugins } from "@logics_configs";
+
+export const MainSection = () => {
+    const { currentPluginsData } = usePlugins();
+
+    const render_plugins = currentPluginsData.data.filter((plugin) => (
+        plugin.is_downloaded &&
+        plugin.is_enabled &&
+        plugin.downloaded_plugin_info.is_plugin_supported &&
+        plugin.downloaded_plugin_info.location === "main_section"
+    ));
+
+    return (
+        <div className={styles.container}>
+            <TopBar />
+            {render_plugins.length
+                ? <PluginHost render_components={render_plugins}/>
+                : <MessageContainer />
+            }
+            <HandleLanguageSelector />
+        </div>
+    );
+};
+
+
+const HandleLanguageSelector = () => {
+    const { t } = useI18n();
+    const { currentIsOpenedLanguageSelector, updateIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
+    const {
+        currentSelectedPresetTabNumber,
+        currentSelectedYourLanguages,
+        setSelectedYourLanguages,
+        currentSelectedTargetLanguages,
+        setSelectedTargetLanguages,
+    } = useLanguageSettings();
+
+    useEffect(() => {
+        updateIsOpenedLanguageSelector({
+            your_language: false,
+            target_language: false,
+            target_key: "1"
+        });
+
+    }, [currentSelectedPresetTabNumber.data, currentSelectedYourLanguages.data, currentSelectedTargetLanguages.data]);
+
+    const getTitle = (target_selector_key) => {
+        if (target_selector_key === "your_language") return t("main_page.language_selector.title_your_language");
+        if (target_selector_key === "target_language") {
+            if (currentSelectedTargetLanguages.data[currentSelectedPresetTabNumber.data]["2"].enable === false) return t("main_page.language_selector.title_target_language");
+            return `${t("main_page.language_selector.title_target_language")} (${currentIsOpenedLanguageSelector.data.target_key})`;
+        }
+    };
+
+
+
+    if (currentIsOpenedLanguageSelector.data.your_language === true) {
+        const onclickFunction_YourLanguage = (payload) => {
+            updateIsOpenedLanguageSelector({ your_language: false, target_language: false, target_key: currentIsOpenedLanguageSelector.data.target_key });
+            setSelectedYourLanguages({
+                ...payload,
+                target_key: currentIsOpenedLanguageSelector.data.target_key,
+            });
+        };
+        const title = getTitle("your_language");
+        return (
+            <LanguageSelector
+                title={title}
+                onClickFunction={onclickFunction_YourLanguage}
+            />
+        );
+    } else if (currentIsOpenedLanguageSelector.data.target_language === true) {
+        const onclickFunction_TargetLanguage = (payload) => {
+            updateIsOpenedLanguageSelector({ your_language: false, target_language: false, target_key: currentIsOpenedLanguageSelector.data.target_key });
+            setSelectedTargetLanguages({
+                ...payload,
+                target_key: currentIsOpenedLanguageSelector.data.target_key,
+            });
+        };
+        const title = getTitle("target_language");
+        return (
+            <LanguageSelector
+                title={title}
+                onClickFunction={onclickFunction_TargetLanguage}
+            />
+        );
+    } else {
+        return null;
+    }
+};