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

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

View File

@@ -1,8 +1,8 @@
import { useSettingBox } from "../useSettingBox";
import { useSelectedMicDevice, useMicDeviceList } from "@store";
import { useSelectedMicDeviceStatus, useMicDeviceListStatus } from "@store";
export const Appearance = () => {
const { currentSelectedMicDevice, updateSelectedMicDevice } = useSelectedMicDevice();
const { currentMicDeviceList } = useMicDeviceList();
const { currentSelectedMicDeviceStatus, updateSelectedMicDeviceStatus } = useSelectedMicDeviceStatus();
const { currentMicDeviceListStatus } = useMicDeviceListStatus();
const { DropdownMenuContainer } = useSettingBox();
const selectFunction = (selected_data) => {
@@ -13,13 +13,13 @@ export const Appearance = () => {
}, 3000);
});
};
updateSelectedMicDevice(asyncFunction);
updateSelectedMicDeviceStatus(asyncFunction);
};
return (
<>
<DropdownMenuContainer dropdown_id="mic_host" label="Mic Host/Driver" desc="description" selected_id="b" list={{a: "A", b: "B", c: "C"}} />
<DropdownMenuContainer dropdown_id="mic_device" label="Mic Device" desc="description" selected_id={currentSelectedMicDevice.data} list={currentMicDeviceList} selectFunction={selectFunction} state={currentSelectedMicDevice.state} />
<DropdownMenuContainer dropdown_id="mic_device" label="Mic Device" desc="description" selected_id={currentSelectedMicDeviceStatus.data} list={currentMicDeviceListStatus} selectFunction={selectFunction} state={currentSelectedMicDeviceStatus.state} />
</>
);
};

View File

@@ -1,12 +1,12 @@
import styles from "./SettingBox.module.scss";
import { useSelectedConfigTab } from "@store";
import { useSelectedConfigTabId } from "@store";
import { Appearance } from "./appearance/Appearance";
import { AboutVrct } from "./about_vrct/AboutVrct";
export const SettingBox = () => {
const { currentSelectedConfigTab } = useSelectedConfigTab();
switch (currentSelectedConfigTab) {
const { currentSelectedConfigTabId } = useSelectedConfigTabId();
switch (currentSelectedConfigTabId) {
case "appearance":
return <Appearance />;
case "about_vrct":

View File

@@ -19,12 +19,12 @@ import vrchat_disclaimer from "@images/about_vrct/vrchat_disclaimer.png";
import clsx from "clsx";
import { useTranslation } from "react-i18next";
import { useUiLanguage } from "@store";
import { useUiLanguageStatus } from "@store";
import { PosterShowcaseContents } from "./poster_showcase_contents/PosterShowcaseContents";
export const AboutVrct = () => {
const { t } = useTranslation();
const { currentUiLanguage } = useUiLanguage();
const { currentUiLanguageStatus } = useUiLanguageStatus();
return (
<div className={styles.container}>
<div className={styles.dev_section}>
@@ -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"
currentUiLanguageStatus === "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} />
}

View File

@@ -1,6 +1,6 @@
import clsx from "clsx";
import styles from "./PostersContents.module.scss";
import { useUiLanguage } from "@store";
import { useUiLanguageStatus } from "@store";
import { useVrctPosterIndex } from "@store";
import ArrowLeftSvg from "@images/arrow_left.svg?react";
@@ -30,7 +30,7 @@ import poster_images_authors_m_en from "@images/about_vrct/vrct_posters/authors/
export const PostersContents = () => {
const { currentVrctPosterIndex, updateVrctPosterIndex } = useVrctPosterIndex();
const { currentUiLanguage } = useUiLanguage();
const { currentUiLanguageStatus } = useUiLanguageStatus();
const updateIndex = (delta) => {
@@ -60,7 +60,7 @@ export const PostersContents = () => {
</button>
</div>
{
currentUiLanguage === "ja"
currentUiLanguageStatus === "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} />
}

View File

@@ -2,17 +2,17 @@ import styles from "./DropdownMenu.module.scss";
import clsx from "clsx";
import { useOpenedDropdownMenu } from "@store";
import { useIsOpenedDropdownMenu } from "@store";
export const DropdownMenu = (props) => {
const { updateOpenedDropdownMenu, currentOpenedDropdownMenu } = useOpenedDropdownMenu();
const { updateIsOpenedDropdownMenu, currentIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
const openDropdownMenu = () => {
updateOpenedDropdownMenu(props.dropdown_id);
updateIsOpenedDropdownMenu(props.dropdown_id);
};
const selectValue = (key) => {
updateOpenedDropdownMenu("");
updateIsOpenedDropdownMenu("");
props.selectFunction({
dropdown_id: props.dropdown_id,
selected_id: key,
@@ -20,7 +20,7 @@ export const DropdownMenu = (props) => {
};
const dropdown_content_wrapper_class_name = clsx(styles["dropdown_content_wrapper"], {
[styles["is_opened"]]: (currentOpenedDropdownMenu === props.dropdown_id) ? true : false
[styles["is_opened"]]: (currentIsOpenedDropdownMenu === props.dropdown_id) ? true : false
});
const dropdown_toggle_button_class_name = clsx(styles["dropdown_toggle_button"], {

View File

@@ -1,14 +1,14 @@
import styles from "./useSettingBox.module.scss";
import { LabelComponent } from "./components/label_component/LabelComponent";
import { DropdownMenu } from "./components/dropdown_menu/DropdownMenu";
import { useOpenedDropdownMenu } from "@store";
import { useIsOpenedDropdownMenu } from "@store";
export const useSettingBox = () => {
const { updateOpenedDropdownMenu } = useOpenedDropdownMenu();
const { updateIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
const DropdownMenuContainer = (props) => {
const onMouseLeaveFunction = () => {
updateOpenedDropdownMenu("");
updateIsOpenedDropdownMenu("");
};
return (

View File

@@ -21,20 +21,20 @@ export const SidebarSection = () => {
import clsx from "clsx";
import { useTranslation } from "react-i18next";
import { useSelectedConfigTab } from "@store";
import { useSelectedConfigTabId } from "@store";
const Tab = (props) => {
const { t } = useTranslation();
const { updateSelectedConfigTab, currentSelectedConfigTab } = useSelectedConfigTab();
const { updateSelectedConfigTabId, currentSelectedConfigTabId } = useSelectedConfigTabId();
const onclickFunction = () => {
updateSelectedConfigTab(props.tab_id);
updateSelectedConfigTabId(props.tab_id);
};
const tab_container_class_names = clsx(styles["tab_container"], {
[styles["is_selected"]]: (currentSelectedConfigTab === props.tab_id) ? true : false
[styles["is_selected"]]: (currentSelectedConfigTabId === props.tab_id) ? true : false
});
const switch_indicator_class_names = clsx(styles["switch_indicator"], {
[styles["is_selected"]]: (currentSelectedConfigTab === props.tab_id) ? true : false
[styles["is_selected"]]: (currentSelectedConfigTabId === props.tab_id) ? true : false
});
return (

View File

@@ -1,13 +1,13 @@
import { useTranslation } from "react-i18next";
import styles from "./SectionTitleBox.module.scss";
import { useSelectedConfigTab } from "@store";
import { useSelectedConfigTabId } from "@store";
export const SectionTitleBox = () => {
const { t } = useTranslation();
const { currentSelectedConfigTab } = useSelectedConfigTab();
const { currentSelectedConfigTabId } = useSelectedConfigTabId();
return (
<div className={styles.container}>
<p className={styles.title}>{t(`config_window.side_menu_labels.${currentSelectedConfigTab}`)}</p>
<p className={styles.title}>{t(`config_window.side_menu_labels.${currentSelectedConfigTabId}`)}</p>
</div>
);
};