every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Refactor] Change state management structures. Async atom to be manage manually.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-09-23 03:44:33 +09:00
parent 586aaf0091
commit 0616092eff
49 changed files with 295 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src-ui/app/main_page/sidebar_section/SidebarSection.jsx
View File

@@ -11,12 +11,12 @@ import { OpenSettings } from "./open_settings/OpenSettings";
export const SidebarSection = () => {
const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
const container_class_name = clsx(styles.container, {
[styles.is_compact_mode]: currentIsMainPageCompactMode
[styles.is_compact_mode]: currentIsMainPageCompactMode.data
});
const { currentIsOpenedLanguageSelector } = useStore_IsOpenedLanguageSelector();
const scroll_container_class_names = clsx(styles.scroll_container, {
[styles.is_opened]: (currentIsOpenedLanguageSelector.your_language === true || currentIsOpenedLanguageSelector.target_language === true)
[styles.is_opened]: (currentIsOpenedLanguageSelector.data.your_language === true || currentIsOpenedLanguageSelector.data.target_language === true)
});
return (
@@ -24,7 +24,7 @@ export const SidebarSection = () => {
<Logo />
<div className={scroll_container_class_names}>
<MainFunctionSwitch />
{!currentIsMainPageCompactMode && <LanguageSettings />}
{!currentIsMainPageCompactMode.data && <LanguageSettings />}
</div>
<OpenSettings />
</div>

8
src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx
View File

@@ -62,8 +62,8 @@ const PresetContainer = () => {
const yourLanguageSettings = {
title: t("main_page.your_language"),
is_opened: currentIsOpenedLanguageSelector.your_language,
onClickFunction: () => toggleSelector("your_language", currentIsOpenedLanguageSelector.your_language, updateIsOpenedLanguageSelector),
is_opened: currentIsOpenedLanguageSelector.data.your_language,
onClickFunction: () => toggleSelector("your_language", currentIsOpenedLanguageSelector.data.your_language, updateIsOpenedLanguageSelector),
TurnedOnSvgComponent: <MicSvg />,
is_turned_on: currentTranscriptionSendStatus.data,
variable: your_language_data?.primary,
@@ -71,8 +71,8 @@ const PresetContainer = () => {
const targetLanguageSettings = {
title: t("main_page.target_language"),
is_opened: currentIsOpenedLanguageSelector.target_language,
onClickFunction: () => toggleSelector("target_language", currentIsOpenedLanguageSelector.target_language, updateIsOpenedLanguageSelector),
is_opened: currentIsOpenedLanguageSelector.data.target_language,
onClickFunction: () => toggleSelector("target_language", currentIsOpenedLanguageSelector.data.target_language, updateIsOpenedLanguageSelector),
TurnedOnSvgComponent: <HeadphonesSvg />,
is_turned_on: currentTranscriptionReceiveStatus.data,
variable: target_language_data?.primary,

9
src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
View File

@@ -14,11 +14,10 @@ export const TranslatorSelectorOpenButton = () => {
currentSelectedTranslationEngines,
} = useLanguageSettings();
// console.log(currentTranslationEngines, currentSelectedTranslationEngines);
const selected_translator_name = (currentTranslationEngines.state === "loading")
const selected_translator_name = (currentTranslationEngines.state === "pending")
? "Loading..."
: currentTranslationEngines.data.find(
translator_data => translator_data.translator_id === currentSelectedTranslationEngines[currentSelectedPresetTabNumber.data]
translator_data => translator_data.translator_id === currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data]
)?.translator_name;
@@ -26,7 +25,7 @@ export const TranslatorSelectorOpenButton = () => {
const openTranslatorSelector = () => {
getTranslationEngines();
updateIsOpenedTranslatorSelector(!currentIsOpenedTranslatorSelector);
updateIsOpenedTranslatorSelector(!currentIsOpenedTranslatorSelector.data);
};
return (
@@ -35,7 +34,7 @@ export const TranslatorSelectorOpenButton = () => {
<p className={styles.label}>{t("main_page.translator")}: </p>
<p className={styles.label}>{selected_translator_name}</p>
</div>
{currentIsOpenedTranslatorSelector &&
{currentIsOpenedTranslatorSelector.data &&
<TranslatorSelector
selected_translator_id={currentSelectedTranslationEngines}
translation_engines={currentTranslationEngines}

2
src-ui/app/main_page/sidebar_section/logo/Logo.jsx
View File

@@ -15,7 +15,7 @@ import { useStore_IsMainPageCompactMode } from "@store";
export const LogoBox = () => {
const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
if (currentIsMainPageCompactMode === true) {
if (currentIsMainPageCompactMode.data === true) {
return <img src={chato_img} className={styles.logo_chato} alt="VRCT logo chato" />;
} else {
return <img src={vrct_logo} className={styles.logo} alt="VRCT logo" />;

6
src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.jsx
View File

@@ -77,9 +77,9 @@ export const SwitchContainer = ({ switchLabel, switch_id, children, currentState
const { currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
const getClassNames = (baseClass) => clsx(baseClass, {
[styles.is_compact_mode]: currentIsMainPageCompactMode,
[styles.is_compact_mode]: currentIsMainPageCompactMode.data,
[styles.is_active]: (currentState.data === true),
[styles.is_loading]: (currentState.state === "loading"),
[styles.is_loading]: (currentState.state === "pending"),
[styles.is_hovered]: is_hovered,
[styles.is_mouse_down]: is_mouse_down,
});
@@ -108,7 +108,7 @@ export const SwitchContainer = ({ switchLabel, switch_id, children, currentState
</div>
<div className={getClassNames(styles.switch_indicator)}></div>
{(currentState.state === "loading")
{(currentState.state === "pending")
? <span className={styles.loader}></span>
: null
}