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

2
src-ui/app/App.jsx
View File

@@ -124,7 +124,7 @@ const ConfigPageCloseTrigger = () => {
} = useVolume();
useEffect(() => {
if (currentIsOpenedConfigPage === false) {
if (currentIsOpenedConfigPage.data === false) {
if (currentMicThresholdCheckStatus.data === true) volumeCheckStop_Mic();
if (currentSpeakerThresholdCheckStatus.data === true) volumeCheckStop_Speaker();
}

2
src-ui/app/config_page/ConfigPage.jsx
View File

@@ -21,7 +21,7 @@ export const ConfigPage = () => {
</div>
<p className={styles.software_version}>
{
t("config_page.version", {version: currentSoftwareVersion})
t("config_page.version", {version: currentSoftwareVersion.data})
}
</p>
</div>

2
src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
View File

@@ -7,7 +7,7 @@ import { Appearance } from "./appearance/Appearance";
export const SettingBox = () => {
const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
switch (currentSelectedConfigTabId) {
switch (currentSelectedConfigTabId.data) {
case "device":
return <Device />;
// case "others":

2
src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.jsx
View File

@@ -74,7 +74,7 @@ export const AboutVrct = () => {
<img src={special_thanks_section_title} className={clsx(styles.section_title, styles.special_thanks)} />
<img src={special_thanks_members} className={styles.special_thanks_members_img} />
{
currentUiLanguage === "ja"
currentUiLanguage.data === "ja"
? <img src={special_thanks_message_ja} className={styles.special_thanks_message_img} />
: <img src={special_thanks_message_en} className={styles.special_thanks_message_img} />
}

4
src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx
View File

@@ -19,7 +19,7 @@ export const PosterShowcaseWorldsContents = () => {
}));
const chunked_poster_showcase_world_images = chunkArray(poster_showcase_world_images, 8);
const target_poster_showcase_world_images = chunked_poster_showcase_world_images[currentPosterShowcaseWorldPageIndex];
const target_poster_showcase_world_images = chunked_poster_showcase_world_images[currentPosterShowcaseWorldPageIndex.data];
return (
@@ -70,7 +70,7 @@ const PosterShowcaseWorldsPagination = ({ page_length }) => {
};
const getClassNames = (index, baseClass) => clsx(baseClass, {
[styles.is_active]: (currentPosterShowcaseWorldPageIndex === index),
[styles.is_active]: (currentPosterShowcaseWorldPageIndex.data === index),
});
return (

6
src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/posters_contents/PostersContents.jsx
View File

@@ -34,11 +34,11 @@ export const PostersContents = () => {
const updateIndex = (delta) => {
const newIndex = (currentVrctPosterIndex + delta + poster_images.length) % poster_images.length;
const newIndex = (currentVrctPosterIndex.data + delta + poster_images.length) % poster_images.length;
updateVrctPosterIndex(newIndex);
};
const current_poster = poster_images[currentVrctPosterIndex];
const current_poster = poster_images[currentVrctPosterIndex.data];
const current_poster_authors_img_ja = (current_poster.poster_type === "poster") ? poster_images_authors_ja : poster_images_authors_m_ja;
const current_poster_authors_img_en = (current_poster.poster_type === "poster") ? poster_images_authors_en : poster_images_authors_m_en;
@@ -60,7 +60,7 @@ export const PostersContents = () => {
</button>
</div>
{
currentUiLanguage === "ja"
currentUiLanguage.data === "ja"
? <img src={current_poster_authors_img_ja} className={styles.poster_authors_img} />
: <img src={current_poster_authors_img_en} className={styles.poster_authors_img} />
}

2
src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
View File

@@ -101,7 +101,7 @@ const UiLanguageContainer = () => {
}
</div>
<div className={styles.ui_language_selector_container}>
{currentUiLanguage.state === "loading" && <span className={styles.loader}></span>}
{currentUiLanguage.state === "pending" && <span className={styles.loader}></span>}
{Object.entries(SELECTABLE_UI_LANGUAGES_DICT).map(([key, value]) => (
<label key={key} className={clsx(styles.radio_button_wrapper, { [styles.is_selected]: currentUiLanguage.data === key } )}>
<input

2
src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.jsx
View File

@@ -4,7 +4,7 @@ export const Checkbox = (props) => {
return (
<div className={styles.checkbox_container}>
<label className={styles.checkbox_wrapper} htmlFor={props.checkbox_id}>
{(props.state === "loading")
{(props.state === "pending")
? <span className={styles.loader}></span>
: <input
type="checkbox"

16
src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx
View File

@@ -7,7 +7,7 @@ export const DropdownMenu = (props) => {
const { updateIsOpenedDropdownMenu, currentIsOpenedDropdownMenu } = useStore_IsOpenedDropdownMenu();
const toggleDropdownMenu = () => {
if (currentIsOpenedDropdownMenu === props.dropdown_id) {
if (currentIsOpenedDropdownMenu.data === props.dropdown_id) {
updateIsOpenedDropdownMenu("");
} else {
if (props.openListFunction !== undefined) props.openListFunction();
@@ -24,21 +24,21 @@ export const DropdownMenu = (props) => {
};
const dropdown_content_wrapper_class_name = clsx(styles["dropdown_content_wrapper"], {
[styles.is_opened]: (currentIsOpenedDropdownMenu === props.dropdown_id) ? true : false,
[styles.is_opened]: (currentIsOpenedDropdownMenu.data === props.dropdown_id) ? true : false,
[styles.is_disabled]: props.is_disabled,
});
const dropdown_toggle_button_class_name = clsx(styles["dropdown_toggle_button"], {
[styles.is_loading]: (props.state === "loading") ? true : false,
[styles.is_loading]: (props.state === "pending") ? true : false,
[styles.is_disabled]: props.is_disabled,
});
const arrow_class_names = clsx(styles["arrow_left_svg"], {
[styles.is_opened]: (currentIsOpenedDropdownMenu === props.dropdown_id) ? true : false
[styles.is_opened]: (currentIsOpenedDropdownMenu.data === props.dropdown_id) ? true : false
});
const getSelectedText = () => {
if (props.state !== "hasData") return;
if (props.state !== "ok") return;
return props.selected_id;
};
const list = (props.list === undefined) ? {} : props.list;
@@ -46,18 +46,18 @@ export const DropdownMenu = (props) => {
return (
<div className={styles.container}>
<div className={dropdown_toggle_button_class_name} onClick={toggleDropdownMenu} style={props.style}>
{(props.state === "loading")
{(props.state === "pending")
? <p className={styles.dropdown_selected_text}>Loading...</p>
: <p className={styles.dropdown_selected_text}>{getSelectedText()}</p>
}
{(props.state === "loading")
{(props.state === "pending")
? <span className={styles.loader}></span>
: <ArrowLeftSvg className={arrow_class_names} />
}
</div>
<div className={dropdown_content_wrapper_class_name}>
<div className={styles.dropdown_content}>
{(props.state === "hasData")
{(props.state === "ok")
? Object.entries(list).map(([key, value]) => {
return (
<div key={key} className={styles.value_button} onClick={() => selectValue(key)}>

2
src-ui/app/config_page/setting_section/setting_box/components/message_format/MessageFormat.jsx
View File

@@ -56,7 +56,7 @@ const ExampleComponent = ({ id, current_format }) => {
let format = current_format;
if (["send_with_t", "received_with_t"].includes(id)) {
const translationLocale = currentUiLanguage === "en" ? "ja" : "en";
const translationLocale = currentUiLanguage.data === "en" ? "ja" : "en";
const translatedLangMessage = t("config_page.send_message_format.example_text", { lng: translationLocale });
return format.is_message_first

2
src-ui/app/config_page/setting_section/setting_box/components/radio_button/RadioButton.jsx
View File

@@ -7,7 +7,7 @@ export const RadioButton = (props) => {
<label key={option.radio_button_id} className={styles.radio_button_wrapper}>
{props.checked_variable.data === option.radio_button_id
? <>
{ props.checked_variable.state === "loading" && <span className={styles.loader}></span> }
{ props.checked_variable.state === "pending" && <span className={styles.loader}></span> }
<input
type="radio"
name="radio"

2
src-ui/app/config_page/setting_section/setting_box/components/switchbox/Switchbox.jsx
View File

@@ -6,7 +6,7 @@ export const Switchbox = (props) => {
const [is_hovered, setIsHovered] = useState(false);
const [is_mouse_down, setIsMouseDown] = useState(false);
const is_loading = (props.variable.state === "loading");
const is_loading = (props.variable.state === "pending");
const getClassNames = (base_class) => clsx(base_class, {
[styles.is_active]: (props.variable.data === true),

12
src-ui/app/config_page/setting_section/setting_box/components/threshold_component/ThresholdComponent.jsx
View File

@@ -22,7 +22,7 @@ const MicComponent = (props) => {
setMicThreshold,
currentEnableAutomaticMicThreshold,
} = useMicThreshold();
const [ui_threshold, setUiThreshold] = useState(currentMicThreshold);
const [ui_threshold, setUiThreshold] = useState(currentMicThreshold.data);
const {
volumeCheckStart_Mic,
volumeCheckStop_Mic,
@@ -34,9 +34,9 @@ const MicComponent = (props) => {
if (currentEnableAutomaticMicThreshold.data === true) {
setUiThreshold("Auto");
} else {
setUiThreshold(currentMicThreshold);
setUiThreshold(currentMicThreshold.data);
}
}, [currentMicThreshold, currentEnableAutomaticMicThreshold]);
}, [currentMicThreshold.data, currentEnableAutomaticMicThreshold]);
const setUiThresholdFunction = (payload_ui_threshold) => {
setUiThreshold(payload_ui_threshold);
@@ -80,7 +80,7 @@ const SpeakerComponent = (props) => {
setSpeakerThreshold,
currentEnableAutomaticSpeakerThreshold,
} = useSpeakerThreshold();
const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold);
const [ui_threshold, setUiThreshold] = useState(currentSpeakerThreshold.data);
const {
volumeCheckStart_Speaker,
volumeCheckStop_Speaker,
@@ -91,9 +91,9 @@ const SpeakerComponent = (props) => {
if (currentEnableAutomaticSpeakerThreshold.data === true) {
setUiThreshold("Auto");
} else {
setUiThreshold(currentSpeakerThreshold);
setUiThreshold(currentSpeakerThreshold.data);
}
}, [currentSpeakerThreshold, currentEnableAutomaticSpeakerThreshold]);
}, [currentSpeakerThreshold.data, currentEnableAutomaticSpeakerThreshold]);
const setUiThresholdFunction = (payload_ui_threshold) => {
setUiThreshold(payload_ui_threshold);

2
src-ui/app/config_page/setting_section/setting_box/components/threshold_component/volume_check_button/VolumeCheckButton.jsx
View File

@@ -5,7 +5,7 @@ import clsx from "clsx";
export const VolumeCheckButton = React.memo((props) => {
const getClassNames = (baseClass) => clsx(baseClass, {
[styles.is_active]: (props.isChecking?.data === true),
[styles.is_loading]: (props.isChecking.state === "loading"),
[styles.is_loading]: (props.isChecking.state === "pending"),
});
const toggleFunction = () => {

14
src-ui/app/config_page/setting_section/setting_box/components/word_filter/WordFilter.jsx
View File

@@ -15,7 +15,7 @@ export const WordFilter = () => {
if (input_value === undefined) return;
const input_value_array = input_value.split(",");
let updated_list = [...currentWordFilterList];
let updated_list = [...currentWordFilterList.data];
for (let each_input_value of input_value_array) {
each_input_value = each_input_value.trim();
@@ -57,10 +57,10 @@ export const WordFilter = () => {
return (
<div className={styles.container}>
{ currentIsOpenedWordFilterList &&
{ currentIsOpenedWordFilterList.data &&
<div className={styles.list_section_wrapper}>
{
currentWordFilterList.map((item, index) => {
currentWordFilterList.data.map((item, index) => {
return <WordFilterItem value={item.value} key={index} is_redoable={item.is_redoable} deleteAction={deleteAction} redoAction={redoAction}/>;
})
}
@@ -117,15 +117,15 @@ export const WordFilterListToggleComponent = (props) => {
const svg_class_names = clsx(styles["arrow_left_svg"], {
[styles.to_down]: !currentIsOpenedWordFilterList,
[styles.to_up]: currentIsOpenedWordFilterList
[styles.to_down]: !currentIsOpenedWordFilterList.data,
[styles.to_up]: currentIsOpenedWordFilterList.data
});
const OnclickFunction = () => {
updateIsOpenedWordFilterList(!currentIsOpenedWordFilterList);
updateIsOpenedWordFilterList(!currentIsOpenedWordFilterList.data);
};
const word_filter_list_length = currentWordFilterList.filter(item => item.is_redoable === false).length;
const word_filter_list_length = currentWordFilterList.data.filter(item => item.is_redoable === false).length;
return (

5
src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
View File

@@ -35,11 +35,12 @@ const Mic_Container = () => {
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
const { currentEnableAutomaticMicThreshold, toggleEnableAutomaticMicThreshold } = useMicThreshold();
const selectFunction_host = (selected_data) => {
setSelectedMicHost(selected_data.selected_id);
};
const is_disabled_selector = currentEnableAutoMicSelect.data === true || currentEnableAutoMicSelect.data === "loading";
const is_disabled_selector = currentEnableAutoMicSelect.data === true || currentEnableAutoMicSelect.data === "pending";
const { currentSelectedMicDevice, setSelectedMicDevice } = useSelectedMicDevice();
const { currentMicDeviceList, getMicDeviceList } = useMicDeviceList();
@@ -143,7 +144,7 @@ const Speaker_Container = () => {
setSelectedSpeakerDevice(selected_data.selected_id);
};
const is_disabled_selector = currentEnableAutoSpeakerSelect.data === true || currentEnableAutoSpeakerSelect.data === "loading";
const is_disabled_selector = currentEnableAutoSpeakerSelect.data === true || currentEnableAutoSpeakerSelect.data === "pending";
const getLabels = () => {
if (currentEnableAutomaticSpeakerThreshold.data === true) {

4
src-ui/app/config_page/sidebar_section/SidebarSection.jsx
View File

@@ -32,10 +32,10 @@ const Tab = (props) => {
};
const tab_container_class_names = clsx(styles["tab_container"], {
[styles["is_selected"]]: (currentSelectedConfigTabId === props.tab_id) ? true : false
[styles["is_selected"]]: (currentSelectedConfigTabId.data === props.tab_id) ? true : false
});
const switch_indicator_class_names = clsx(styles["switch_indicator"], {
[styles["is_selected"]]: (currentSelectedConfigTabId === props.tab_id) ? true : false
[styles["is_selected"]]: (currentSelectedConfigTabId.data === props.tab_id) ? true : false
});
return (

4
src-ui/app/config_page/topbar/Topbar.jsx
View File

@@ -16,8 +16,8 @@ export const Topbar = () => {
return (
<div className={clsx(styles.container, {
[styles.show_config]: currentIsOpenedConfigPage,
[styles.show_main]: !currentIsOpenedConfigPage
[styles.show_config]: currentIsOpenedConfigPage.data,
[styles.show_main]: !currentIsOpenedConfigPage.data
})}>
<div className={styles.wrapper} onClick={() => closeConfigPage()}>
<div className={styles.go_back_button}>

2
src-ui/app/config_page/topbar/section_title_box/SectionTitleBox.jsx
View File

@@ -7,7 +7,7 @@ export const SectionTitleBox = () => {
const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
return (
<div className={styles.container}>
<p className={styles.title}>{t(`config_page.side_menu_labels.${currentSelectedConfigTabId}`)}</p>
<p className={styles.title}>{t(`config_page.side_menu_labels.${currentSelectedConfigTabId.data}`)}</p>
</div>
);
};

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
}