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

[Refactor] store.js, etc..: Rename variables and functions.

Browse Source 
suffix '_Status' is for async. It has 'loading' state, for now.
This commit is contained in:
Sakamoto Shiina
2024-07-27 21:08:48 +09:00
parent 03d689ac18
commit 04a68fe074
23 changed files with 162 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src-ui/windows/main_window/main_section/message_container/log_box/LogBox.jsx
View File

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

8
src-ui/windows/main_window/main_section/top_bar/sidebar_compact_mode_button/SidebarCompactModeButton.jsx
View File

@@ -1,18 +1,18 @@
import clsx from "clsx";
import styles from "./SidebarCompactModeButton.module.scss";
import { useIsCompactMode } from "@store";
import { useMainWindowCompactModeStatus } from "@store";
import ArrowLeftSvg from "@images/arrow_left.svg?react";
export const SidebarCompactModeButton = () => {
const { updateIsCompactMode, currentIsCompactMode } = useIsCompactMode();
const { updateMainWindowCompactModeStatus, currentMainWindowCompactModeStatus } = useMainWindowCompactModeStatus();
const toggleCompactMode = () => {
updateIsCompactMode(!currentIsCompactMode);
updateMainWindowCompactModeStatus(!currentMainWindowCompactModeStatus);
};
const class_names = clsx(styles["arrow_left_svg"], {
[styles["reverse"]]: currentIsCompactMode
[styles["reverse"]]: currentMainWindowCompactModeStatus
});
return (

8
src-ui/windows/main_window/sidebar_section/SidebarSection.jsx
View File

@@ -1,7 +1,7 @@
import clsx from "clsx";
import styles from "./SidebarSection.module.scss";
import { useIsCompactMode } from "@store";
import { useMainWindowCompactModeStatus } from "@store";
import { Logo } from "./logo/Logo";
import { MainFunctionSwitch } from "./main_function_switch/MainFunctionSwitch";
@@ -9,16 +9,16 @@ import { LanguageSettings } from "./language_settings/LanguageSettings";
import { OpenSettings } from "./open_settings/OpenSettings";
export const SidebarSection = () => {
const { currentIsCompactMode } = useIsCompactMode();
const { currentMainWindowCompactModeStatus } = useMainWindowCompactModeStatus();
const container_class_name = clsx(styles["container"], {
[styles["is_compact_mode"]]: currentIsCompactMode
[styles["is_compact_mode"]]: currentMainWindowCompactModeStatus
});
return (
<div className={container_class_name}>
<Logo />
<MainFunctionSwitch />
{!currentIsCompactMode && <LanguageSettings />}
{!currentMainWindowCompactModeStatus && <LanguageSettings />}
<OpenSettings />
</div>
);

18
src-ui/windows/main_window/sidebar_section/language_settings/LanguageSettings.jsx
View File

@@ -2,20 +2,20 @@ import { useTranslation } from "react-i18next";
import styles from "./LanguageSettings.module.scss";
import { PresetSelectTabs } from "./preset_select_tabs/PresetSelectTabs";
import { PresetTabSelector } from "./preset_tab_selector/PresetTabSelector";
import { LanguageSelectorOpenButton } from "./language_selector_open_button/LanguageSelectorOpenButton";
import { LanguageSwapButton } from "./language_swap_button/LanguageSwapButton";
import { TranslatorSelectorOpenButton } from "./translator_selector_open_button/TranslatorSelectorOpenButton";
import { useOpenedTranslatorSelector } from "@store";
import { useIsOpenedTranslatorSelector } from "@store";
export const LanguageSettings = () => {
const { updateOpenedTranslatorSelector} = useOpenedTranslatorSelector();
const closeTranslatorSelector = () => updateOpenedTranslatorSelector(false);
const { updateIsOpenedTranslatorSelector} = useIsOpenedTranslatorSelector();
const closeTranslatorSelector = () => updateIsOpenedTranslatorSelector(false);
return (
<div className={styles.container} onMouseLeave={closeTranslatorSelector} >
<p className={styles.title}>Language Settings</p>
<PresetSelectTabs />
<PresetTabSelector />
<PresetContainer />
</div>
);
@@ -32,8 +32,8 @@ const PresetContainer = () => {
const { updateIsOpenedLanguageSelector, currentIsOpenedLanguageSelector } = useIsOpenedLanguageSelector();
const {
currentState_TranscriptionSend,
currentState_TranscriptionReceive,
currentTranscriptionSendStatus,
currentTranscriptionReceiveStatus,
} = useMainFunction();
@@ -79,7 +79,7 @@ const PresetContainer = () => {
is_opened: currentIsOpenedLanguageSelector.your_language,
onClickFunction: () => handleLanguageSelectorClick("your_language"),
TurnedOnSvgComponent: <MicSvg />,
is_turned_on: currentState_TranscriptionSend.data,
is_turned_on: currentTranscriptionSendStatus.data,
};
const target_language_settings = {
@@ -87,7 +87,7 @@ const PresetContainer = () => {
is_opened: currentIsOpenedLanguageSelector.target_language,
onClickFunction: () => handleLanguageSelectorClick("target_language"),
TurnedOnSvgComponent: <HeadphonesSvg />,
is_turned_on: currentState_TranscriptionReceive.data,
is_turned_on: currentTranscriptionReceiveStatus.data,
};
return (

12
src-ui/windows/main_window/sidebar_section/language_settings/preset_select_tabs/PresetSelectTabs.jsx → src-ui/windows/main_window/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.jsx
View File

@@ -1,6 +1,6 @@
import styles from "./PresetSelectTabs.module.scss";
import styles from "./PresetTabSelector.module.scss";
export const PresetSelectTabs = () => {
export const PresetTabSelector = () => {
return (
<div className={styles.container}>
<Tab preset_number={1} />
@@ -12,16 +12,16 @@ export const PresetSelectTabs = () => {
import clsx from "clsx";
import { useSelectedTab } from "@store";
import { useSelectedPresetTabStatus } from "@store";
const Tab = (props) => {
const { updateSelectedTab, currentSelectedTab } = useSelectedTab();
const { updateSelectedPresetTabStatus, currentSelectedPresetTabStatus } = useSelectedPresetTabStatus();
const onclickFunction = () => {
updateSelectedTab(props.preset_number);
updateSelectedPresetTabStatus(props.preset_number);
};
const class_names = clsx(styles["tab_container"], {
[styles["is_selected"]]: (currentSelectedTab === props.preset_number) ? true : false
[styles["is_selected"]]: (currentSelectedPresetTabStatus === props.preset_number) ? true : false
});
return (

0
src-ui/windows/main_window/sidebar_section/language_settings/preset_select_tabs/PresetSelectTabs.module.scss → src-ui/windows/main_window/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.module.scss
View File

16
src-ui/windows/main_window/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
View File

@@ -2,19 +2,19 @@ import { useTranslation } from "react-i18next";
import styles from "./TranslatorSelectorOpenButton.module.scss";
import { TranslatorSelector } from "./translator_selector/TranslatorSelector";
import { useTranslatorList, useSelectedTranslator, useOpenedTranslatorSelector } from "@store";
import { useTranslatorListStatus, useSelectedTranslatorIdStatus, useIsOpenedTranslatorSelector } from "@store";
export const TranslatorSelectorOpenButton = () => {
const { t } = useTranslation();
const { currentSelectedTranslator } = useSelectedTranslator();
const { currentTranslatorList } = useTranslatorList();
const currentTranslator = currentTranslatorList.find(
translator_data => translator_data.translator_key === currentSelectedTranslator
const { currentSelectedTranslatorIdStatus } = useSelectedTranslatorIdStatus();
const { currentTranslatorListStatus } = useTranslatorListStatus();
const currentTranslator = currentTranslatorListStatus.find(
translator_data => translator_data.translator_key === currentSelectedTranslatorIdStatus
);
const { currentOpenedTranslatorSelector, updateOpenedTranslatorSelector} = useOpenedTranslatorSelector();
const { currentIsOpenedTranslatorSelector, updateIsOpenedTranslatorSelector} = useIsOpenedTranslatorSelector();
const openTranslatorSelector = () => updateOpenedTranslatorSelector(!currentOpenedTranslatorSelector);
const openTranslatorSelector = () => updateIsOpenedTranslatorSelector(!currentIsOpenedTranslatorSelector);
return (
<div className={styles.container}>
@@ -22,7 +22,7 @@ export const TranslatorSelectorOpenButton = () => {
<p className={styles.label}>{t("main_window.translator")}</p>
<p className={styles.label}>{currentTranslator?.translator_name}</p>
</div>
{currentOpenedTranslatorSelector && <TranslatorSelector />}
{currentIsOpenedTranslatorSelector && <TranslatorSelector />}
</div>
);
};

16
src-ui/windows/main_window/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx
View File

@@ -1,10 +1,10 @@
import styles from "./TranslatorSelector.module.scss";
import { chunkArray } from "@utils/chunkArray";
import { useTranslatorList, useSelectedTranslator, useOpenedTranslatorSelector } from "@store";
import { useTranslatorListStatus, useSelectedTranslatorIdStatus, useIsOpenedTranslatorSelector } from "@store";
export const TranslatorSelector = () => {
const { currentTranslatorList } = useTranslatorList();
const columns = chunkArray(currentTranslatorList, 2);
const { currentTranslatorListStatus } = useTranslatorListStatus();
const columns = chunkArray(currentTranslatorListStatus, 2);
return (
<div className={styles.container}>
@@ -28,18 +28,18 @@ export const TranslatorSelector = () => {
import clsx from "clsx";
const TranslatorBox = (props) => {
const { currentSelectedTranslator, updateSelectedTranslator} = useSelectedTranslator();
const { updateOpenedTranslatorSelector} = useOpenedTranslatorSelector();
const { currentSelectedTranslatorIdStatus, updateSelectedTranslatorIdStatus} = useSelectedTranslatorIdStatus();
const { updateIsOpenedTranslatorSelector} = useIsOpenedTranslatorSelector();
const box_class_name = clsx(
styles.box,
{ [styles["is_selected"]]: (currentSelectedTranslator === props.translator_id) ? true : false },
{ [styles["is_selected"]]: (currentSelectedTranslatorIdStatus === props.translator_id) ? true : false },
{ [styles["is_available"]]: (props.is_available === true) ? true : false }
);
const selectTranslator = () => {
updateSelectedTranslator(props.translator_id);
updateOpenedTranslatorSelector(false);
updateSelectedTranslatorIdStatus(props.translator_id);
updateIsOpenedTranslatorSelector(false);
};
return (
<div className={box_class_name} onClick={selectTranslator}>

6
src-ui/windows/main_window/sidebar_section/logo/Logo.jsx
View File

@@ -11,11 +11,11 @@ export const Logo = () => {
import vrct_logo from "@images/vrct_logo_for_dark_mode.png";
import chato_img from "@images/chato_white.png";
import { useIsCompactMode } from "@store";
import { useMainWindowCompactModeStatus } from "@store";
export const LogoBox = () => {
const { currentIsCompactMode } = useIsCompactMode();
if (currentIsCompactMode === true) {
const { currentMainWindowCompactModeStatus } = useMainWindowCompactModeStatus();
if (currentMainWindowCompactModeStatus === 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" />;

22
src-ui/windows/main_window/sidebar_section/main_function_switch/MainFunctionSwitch.jsx
View File

@@ -5,7 +5,7 @@ import TranslationSvg from "@images/translation.svg?react";
import MicSvg from "@images/mic.svg?react";
import HeadphonesSvg from "@images/headphones.svg?react";
import ForegroundSvg from "@images/foreground.svg?react";
import { useIsCompactMode } from "@store";
import { useMainWindowCompactModeStatus } from "@store";
import { useMainFunction } from "@logics/useMainFunction";
@@ -13,10 +13,10 @@ export const MainFunctionSwitch = () => {
const { t } = useTranslation();
const {
toggleTranslation, currentState_Translation,
toggleTranscriptionSend, currentState_TranscriptionSend,
toggleTranscriptionReceive, currentState_TranscriptionReceive,
toggleForeground, currentState_Foreground,
toggleTranslation, currentTranslationStatus,
toggleTranscriptionSend, currentTranscriptionSendStatus,
toggleTranscriptionReceive, currentTranscriptionReceiveStatus,
toggleForeground, currentForegroundStatus,
} = useMainFunction();
@@ -25,28 +25,28 @@ export const MainFunctionSwitch = () => {
switch_id: "translation",
label: t("main_window.translation"),
SvgComponent: TranslationSvg,
currentState: currentState_Translation,
currentState: currentTranslationStatus,
toggleFunction: toggleTranslation,
},
{
switch_id: "transcription_send",
label: t("main_window.transcription_send"),
SvgComponent: MicSvg,
currentState: currentState_TranscriptionSend,
currentState: currentTranscriptionSendStatus,
toggleFunction: toggleTranscriptionSend,
},
{
switch_id: "transcription_receive",
label: t("main_window.transcription_receive"),
SvgComponent: HeadphonesSvg,
currentState: currentState_TranscriptionReceive,
currentState: currentTranscriptionReceiveStatus,
toggleFunction: toggleTranscriptionReceive,
},
{
switch_id: "foreground",
label: t("main_window.foreground"),
SvgComponent: ForegroundSvg,
currentState: currentState_Foreground,
currentState: currentForegroundStatus,
toggleFunction: toggleForeground,
},
];
@@ -74,10 +74,10 @@ export const SwitchContainer = ({ switchLabel, switch_id, children, currentState
const [is_hovered, setIsHovered] = useState(false);
const [is_mouse_down, setIsMouseDown] = useState(false);
const { currentIsCompactMode } = useIsCompactMode();
const { currentMainWindowCompactModeStatus } = useMainWindowCompactModeStatus();
const getClassNames = (baseClass) => clsx(baseClass, {
[styles.is_compact_mode]: currentIsCompactMode,
[styles.is_compact_mode]: currentMainWindowCompactModeStatus,
[styles.is_active]: (currentState.data === true),
[styles.is_loading]: (currentState.state === "loading"),
[styles.is_hovered]: is_hovered,