From 33bb2c7620147ec6de8972cfd8dd4f2d40194896 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Fri, 25 Oct 2024 13:02:53 +0900
Subject: [PATCH] [bugfix] Config Page: VR Tab. Fix the bug that the settings
 data has sent to the backend when init.

---
 .../setting_section/setting_box/vr/Vr.jsx     | 46 +++++++++----------
 1 file changed, 21 insertions(+), 25 deletions(-)

diff --git a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
index faf524d2..92bc97cf 100644
--- a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import styles from "./Vr.module.scss";
 import { Slider } from "../_components/";
@@ -28,28 +28,26 @@ export const Vr = () => {
         fadeout_duration: 2,
     });
 
+    const [timeout_id, setTimeoutId] = useState(null);
+
     const onchangeFunction = (key, value) => {
         setSettings((prev) => {
             const new_data = { ...prev, [key]: value };
             return new_data;
         });
-    };
 
-    useEffect(() => {
-        let settings_timeout;
-
-        if (settings_timeout) {
-            clearTimeout(settings_timeout);
+        if (timeout_id) {
+            clearTimeout(timeout_id);
         }
 
-        settings_timeout = setTimeout(() => {
-            setOverlaySmallLogSettings(settings);
+        const newTimeoutId = setTimeout(() => {
+            let new_data = settings;
+            new_data[key] = value;
+            setOverlaySmallLogSettings(new_data);
         }, 50);
 
-        return () => {
-            clearTimeout(settings_timeout);
-        };
-    }, [settings]);
+        setTimeoutId(newTimeoutId);
+    };
 
     const toggle_button_class_names__position = clsx(styles.controller_type_switcher, {
         [styles.is_selected]: is_opened_position_controller,
@@ -80,9 +78,6 @@ export const Vr = () => {
     );
 };
 
-
-
-
 const CommonControls = () => {
     const { t } = useTranslation();
     const { currentOverlaySettings, setOverlaySettings } = useOverlaySettings();
@@ -92,25 +87,26 @@ const CommonControls = () => {
         ui_scaling: 1,
     });
 
+    const [timeout_id, setTimeoutId] = useState(null);
+
     const onchangeFunction = (key, value) => {
         setSettings((prev) => {
             const new_data = { ...prev, [key]: value };
             return new_data;
         });
-    };
 
+        if (timeout_id) {
+            clearTimeout(timeout_id);
+        }
 
-    useEffect(() => {
-        let settings_timeout;
-
-        settings_timeout = setTimeout(() => {
+        const newTimeoutId = setTimeout(() => {
+            let new_data = settings;
+            new_data[key] = value;
             setOverlaySettings(settings);
         }, 50);
 
-        return () => {
-            clearTimeout(settings_timeout);
-        };
-    }, [settings]);
+        setTimeoutId(newTimeoutId);
+    };
 
     const ui_variable_opacity = (settings.opacity * 100).toFixed(0);
     const ui_variable_ui_scaling = (settings.ui_scaling * 100).toFixed(0);