87 lines
3.3 KiB
JavaScript
87 lines
3.3 KiB
JavaScript
import { useTranslation } from "react-i18next";
|
|
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";
|
|
|
|
export const MainSection = () => {
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<TopBar />
|
|
<MessageContainer />
|
|
<HandleLanguageSelector />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
|
|
const HandleLanguageSelector = () => {
|
|
const { t } = useTranslation();
|
|
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;
|
|
}
|
|
}; |