[Refactor] store.js, etc..: Rename variables and functions.
suffix '_Status' is for async. It has 'loading' state, for now.
This commit is contained in:
@@ -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} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -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":
|
||||
|
||||
@@ -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} />
|
||||
}
|
||||
|
||||
@@ -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} />
|
||||
}
|
||||
|
||||
@@ -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"], {
|
||||
|
||||
@@ -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 (
|
||||
|
||||
@@ -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 (
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user