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

4
src-ui/app/main_page/MainPage.jsx
View File

@@ -9,8 +9,8 @@ export const MainPage = () => {
return (
<div className={clsx(styles.page, styles.main_page, {
[styles.show_config]: currentIsOpenedConfigPage,
[styles.show_main]: !currentIsOpenedConfigPage
[styles.show_config]: currentIsOpenedConfigPage.data,
[styles.show_main]: !currentIsOpenedConfigPage.data
})}>
<div className={styles.container}>
<SidebarSection />

4
src-ui/app/main_page/main_section/MainSection.jsx
View File

@@ -28,10 +28,10 @@ const HandleLanguageSelector = () => {
setSelectedTargetLanguages,
} = useLanguageSettings();
if (currentIsOpenedLanguageSelector.your_language === true) {
if (currentIsOpenedLanguageSelector.data.your_language === true) {
const onclickFunction_YourLanguage = (payload) => setSelectedYourLanguages(payload);
return <LanguageSelector id="your_language" onClickFunction={onclickFunction_YourLanguage}/>;
} else if (currentIsOpenedLanguageSelector.target_language === true) {
} else if (currentIsOpenedLanguageSelector.data.target_language === true) {
const onclickFunction_TargetLanguage = (payload) => setSelectedTargetLanguages(payload);
return <LanguageSelector id="target_language" onClickFunction={onclickFunction_TargetLanguage}/>;
} else {

2
src-ui/app/main_page/main_section/language_selector/LanguageSelector.jsx
View File

@@ -27,7 +27,7 @@ export const LanguageSelector = ({ id, onClickFunction }) => {
}, {});
};
const groupedLanguages = groupLanguagesByFirstLetter(currentSelectableLanguageList);
const groupedLanguages = groupLanguagesByFirstLetter(currentSelectableLanguageList.data);
return (
<div className={styles.container}>

10
src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx
View File

@@ -1,20 +1,22 @@
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import styles from "./LogBox.module.scss";
import { useStore_MessageLogs, store } from "@store";
import { store } from "@store";
import { MessageContainer } from "./message_container/MessageContainer";
import { scrollToBottom } from "@utils/scrollToBottom";
import { useMessage } from "@logics_common/useMessage";
export const LogBox = () => {
const { currentMessageLogs } = useStore_MessageLogs();
const { currentMessageLogs } = useMessage();
const log_container_ref = useRef(null);
const [is_scrolling, setIsScrolling] = useState(false);
useLayoutEffect(() => {
store.log_box_ref = log_container_ref;
if (!is_scrolling) {
scrollToBottom(store.log_box_ref, true);
}
}, [currentMessageLogs]);
}, [currentMessageLogs.data]);
useEffect(() => {
const handleScroll = () => {
@@ -39,7 +41,7 @@ export const LogBox = () => {
return (
<div id="log_container" className={styles.container} ref={log_container_ref}>
{currentMessageLogs.map(message_data => (
{currentMessageLogs.data.map(message_data => (
<MessageContainer key={message_data.id} {...message_data} />
))}
</div>

4
src-ui/app/main_page/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx
View File

@@ -8,11 +8,11 @@ export const SidebarCompactModeButton = () => {
const { updateIsMainPageCompactMode, currentIsMainPageCompactMode } = useStore_IsMainPageCompactMode();
const toggleCompactMode = () => {
updateIsMainPageCompactMode(!currentIsMainPageCompactMode);
updateIsMainPageCompactMode(!currentIsMainPageCompactMode.data);
};
const class_names = clsx(styles["arrow_left_svg"], {
[styles["reverse"]]: currentIsMainPageCompactMode
[styles["reverse"]]: currentIsMainPageCompactMode.data
});
return (

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
}