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/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) {