[bugfix/Refactor]

Fix plugin compatibility list that was showed incorrectly.
Change init function.

src-ui/app/App.jsx

@@ -1,4 +1,3 @@
-import { useRef } from "react";
 import { useTranslation } from "react-i18next";
 
 import {
@@ -29,10 +28,6 @@ export const App = () => {
     const { currentIsBackendReady } = useIsBackendReady();
     const { WindowGeometryController } = useWindow();
     const { i18n } = useTranslation();
-    const pluginsControllerHasRunRef = useRef({
-        is_initialized_load_plugin: false,
-        is_init_fetched_plugins_info: false,
-    });
 
     return (
         <div className={styles.container}>
@@ -49,7 +44,7 @@ export const App = () => {
 
                 {(currentIsBackendReady.data === false || currentIsVrctAvailable.data === false)
                     ? <SplashComponent />
-                    : <Contents key={i18n.language} pluginsControllerHasRunRef={pluginsControllerHasRunRef} />
+                    : <Contents key={i18n.language} />
                 }
 
                 <SnackbarController />
@@ -58,11 +53,11 @@ export const App = () => {
     );
 };
 
-const Contents = ({ pluginsControllerHasRunRef }) => {
+const Contents = () => {
     const { currentIsSoftwareUpdating } = useIsSoftwareUpdating();
     return (
         <>
-            <PluginsController pluginsControllerHasRunRef={pluginsControllerHasRunRef} />
+            <PluginsController />
 
             <WindowTitleBar />
             {currentIsSoftwareUpdating.data === false

src-ui/app/_app_controllers/PluginsController.jsx

@@ -10,13 +10,13 @@ import { LoadPluginsController } from "./plugins_controllers/LoadPluginsControll
 import { FetchLatestPluginsDataController } from "./plugins_controllers/FetchLatestPluginsDataController";
 import { MergePluginsController } from "./plugins_controllers/MergePluginsController";
 
-export const PluginsController = ({ pluginsControllerHasRunRef }) => {
+export const PluginsController = () => {
 
     return (
         <>
             <MergePluginsController />
-            <LoadPluginsController pluginsControllerHasRunRef={pluginsControllerHasRunRef}/>
+            <LoadPluginsController />
-            <FetchLatestPluginsDataController pluginsControllerHasRunRef={pluginsControllerHasRunRef}/>
+            <FetchLatestPluginsDataController />
         </>
     );
 };

src-ui/app/_app_controllers/plugins_controllers/FetchLatestPluginsDataController.jsx

@@ -1,23 +1,15 @@
 import { useEffect } from "react";
 import { usePlugins } from "@logics_configs";
 
-export const FetchLatestPluginsDataController = ({ pluginsControllerHasRunRef }) => {
+export const FetchLatestPluginsDataController = () => {
     const {
         asyncFetchPluginsInfo,
+        isAnyPluginEnabled_Init,
     } = usePlugins();
 
-    const asyncInitFetchPluginsInfo = async () => {
-        try {
-            await asyncFetchPluginsInfo();
-        } catch (error) {
-            console.error(error);
-        }
-    };
-
     useEffect(() => {
-        if (!pluginsControllerHasRunRef.current.is_init_fetched_plugins_info) {
+        if (isAnyPluginEnabled_Init()) {
-            asyncInitFetchPluginsInfo();
+            asyncFetchPluginsInfo();
-            pluginsControllerHasRunRef.current.is_init_fetched_plugins_info = true;
         }
     }, []);
 

src-ui/app/_app_controllers/plugins_controllers/LoadPluginsController.jsx

@@ -1,7 +1,8 @@
 import { useEffect } from "react";
 import { usePlugins } from "@logics_configs";
+import { store } from "@store";
 
-export const LoadPluginsController = ({ pluginsControllerHasRunRef }) => {
+export const LoadPluginsController = () => {
     const {
         asyncLoadAllPlugins,
     } = usePlugins();
@@ -15,9 +16,9 @@ export const LoadPluginsController = ({ pluginsControllerHasRunRef }) => {
     };
 
     useEffect(() => {
-        if (!pluginsControllerHasRunRef.current.is_initialized_load_plugin) {
+        if (!store.is_initialized_load_plugin) {
             asyncInitLoadPlugins();
-            pluginsControllerHasRunRef.current.is_initialized_load_plugin = true;
+            store.is_initialized_load_plugin = true;
         }
     }, []);
 

src-ui/app/_app_controllers/plugins_controllers/MergePluginsController.jsx

@@ -10,7 +10,7 @@ export const MergePluginsController = () => {
         currentFetchedPluginsInfo,
         currentSavedPluginsStatus,
         downloadAndExtractPlugin,
-        toggleSavedPluginsStatus,
+        setTargetSavedPluginsStatus_Init,
     } = usePlugins();
     const { checkVrctVerCompatibility } = useSoftwareVersion();
 
@@ -131,7 +131,15 @@ export const MergePluginsController = () => {
                             !plugin.latest_plugin_info?.is_plugin_supported
                         ) {
                             plugin.is_enabled = false;
-                            toggleSavedPluginsStatus(plugin.plugin_id);
+                            setTargetSavedPluginsStatus_Init(plugin.plugin_id, false);
+                        }
+
+                        if (
+                            !plugin.downloaded_plugin_info.is_plugin_supported &&
+                            plugin.is_outdated
+                        ) {
+                            plugin.is_enabled = false;
+                            setTargetSavedPluginsStatus_Init(plugin.plugin_id, false);
                         }
                     }
                 });

src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.jsx

@@ -1,11 +1,20 @@
-import React from "react";
+import { useEffect, useRef } from "react";
 import { usePlugins } from "@logics_configs";
 import styles from "./Plugins.module.scss";
 import { PluginsControlComponent } from "../_components/plugins_control_component/PluginsControlComponent";
 
 export const Plugins = () => {
     const {
+        asyncFetchPluginsInfo,
     } = usePlugins();
+    const hasRunRef = useRef(false);
+
+    useEffect(() => {
+        if (!hasRunRef.current) {
+            asyncFetchPluginsInfo();
+        }
+        return () => hasRunRef.current = true;
+    }, []);
 
     return (
         <div className={styles.container}>

src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.jsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import styles from "./PluginCompatibilityList.module.scss";
 import { usePlugins } from "@logics_configs";
 import CheckMarkSvg from "@images/check_mark.svg?react";
@@ -5,7 +6,14 @@ import XSvg from "@images/x_mark.svg?react";
 import WarningSvg from "@images/warning.svg?react";
 
 export const PluginCompatibilityList = () => {
-    const { enabledPluginsList } = usePlugins();
+    const {
+        enabledPluginsList,
+        asyncFetchPluginsInfo,
+    } = usePlugins();
+
+    useEffect(() => {
+        asyncFetchPluginsInfo();
+    }, []);
 
     // ダウンロード済みのもの
     const downloaded_plugin = enabledPluginsList().filter(p => p.is_downloaded);
@@ -13,7 +21,7 @@ export const PluginCompatibilityList = () => {
     const compatible_plugins_list = [];
     const incompatible_plugins_list = [];
     for (const p of downloaded_plugin) {
-        if (!p.downloaded_plugin_info?.is_plugin_supported_latest_vrct || !p.latest_plugin_info?.is_plugin_supported_latest_vrct) {
+        if (!p.downloaded_plugin_info?.is_plugin_supported_latest_vrct && !p.latest_plugin_info?.is_plugin_supported_latest_vrct) {
             // プラグイン最新版でも、VRCT最新版（VRCTアプデ後）に非対応のもの
             incompatible_plugins_list.push(p);
         } else {

src-ui/logics/configs/plugins/usePlugins.js

@@ -1,10 +1,11 @@
 import { invoke } from "@tauri-apps/api/tauri";
 import { IS_PLUGIN_PATH_DEV_MODE, getPluginsList } from "@ui_configs";
 import {
+    store,
+
     createAtomWithHook,
     useStore_SavedPluginsStatus,
     useStore_PluginsData,
-    useStore_IsFetchedPluginsInfo,
 
     useStore_FetchedPluginsInfo,
     useStore_LoadedPlugins,
@@ -37,8 +38,6 @@ const PLUGIN_LIST_URL = getPluginsList();
 export const usePlugins = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
 
-    const { currentIsFetchedPluginsInfo, updateIsFetchedPluginsInfo, pendingIsFetchedPluginsInfo } = useStore_IsFetchedPluginsInfo();
-
     const { currentFetchedPluginsInfo, updateFetchedPluginsInfo, pendingFetchedPluginsInfo } = useStore_FetchedPluginsInfo();
     const { currentLoadedPlugins, updateLoadedPlugins, pendingLoadedPlugins } = useStore_LoadedPlugins();
 
@@ -222,7 +221,9 @@ export const usePlugins = () => {
 
 
     const asyncFetchPluginsInfo = async () => {
-        if (currentIsFetchedPluginsInfo.data) return;
+        if (store.is_fetched_plugins_info) return;
+        store.is_fetched_plugins_info = true;
+
         try {
             const response = await asyncTauriFetchGithub(PLUGIN_LIST_URL);
             if (response.status !== 200) {
@@ -247,7 +248,6 @@ export const usePlugins = () => {
                 })
             );
             updateFetchedPluginsInfo(updated_list);
-            updateIsFetchedPluginsInfo(true);
         } catch (error) {
             console.error("Error fetching plugin info list: ", error);
         }
@@ -327,11 +327,43 @@ export const usePlugins = () => {
         setSavedPluginsStatus(new_value);
     };
 
+
+    // Init時の処理 非対応のものを無効化する際に、savedDPluginsStatusから不要なものを削除する処理が邪魔になるので該当コードを削除したバージョン。Init以外で使用する時にはリファクタが必要になる。
+    const setTargetSavedPluginsStatus_Init = (target_plugin_id, is_enabled) => {
+        const is_exists = currentSavedPluginsStatus.data.some(
+            (d) => d.plugin_id === target_plugin_id
+        );
+        let new_value = [];
+        if (is_exists) {
+            new_value = currentSavedPluginsStatus.data.map((d) => {
+                if (d.plugin_id === target_plugin_id) {
+                    d.is_enabled = is_enabled;
+                }
+                return d;
+            });
+        } else {
+            new_value.push(...currentSavedPluginsStatus.data);
+            new_value.push({
+                plugin_id: target_plugin_id,
+                is_enabled: is_enabled,
+            });
+        }
+
+        setSavedPluginsStatus(new_value);
+    };
+
+
     const setSavedPluginsStatus = (plugins_status) => {
         pendingSavedPluginsStatus();
         asyncStdoutToPython("/set/data/plugins_status", plugins_status);
     };
 
+    // init時、currentPluginsDataからのデータではデータ更新が間に合わないので、currentSavedPluginsStatusから直接取得
+    const isAnyPluginEnabled_Init = () => {
+        console.log(currentSavedPluginsStatus);
+        return currentSavedPluginsStatus.data.some(plugin => plugin.is_enabled);
+    };
+
     const isAnyPluginEnabled = () => {
         return currentPluginsData.data.some(plugin => plugin.is_enabled);
     };
@@ -345,6 +377,7 @@ export const usePlugins = () => {
     return {
         asyncFetchPluginsInfo,
 
+        isAnyPluginEnabled_Init,
         isAnyPluginEnabled,
         enabledPluginsList,
 
@@ -357,9 +390,6 @@ export const usePlugins = () => {
         currentPluginsData,
         updatePluginsData,
 
-        currentIsFetchedPluginsInfo,
-        updateIsFetchedPluginsInfo,
-
         currentFetchedPluginsInfo,
         updateFetchedPluginsInfo,
 
@@ -367,6 +397,7 @@ export const usePlugins = () => {
         updateLoadedPlugins,
 
         toggleSavedPluginsStatus,
+        setTargetSavedPluginsStatus_Init,
         setSavedPluginsStatus,
 
         handlePendingPlugin,

src-ui/store.js

@@ -20,6 +20,8 @@ export const store = {
     log_box_ref: null,
     text_area_ref: null,
     is_applied_init_message_box_height: false,
+    is_initialized_load_plugin: false,
+    is_fetched_plugins_info: false,
 };
 
 const generatePropertyNames = (base_name) => ({
@@ -278,8 +280,6 @@ export const { atomInstance: Atom_Hotkeys, useHook: useStore_Hotkeys } = createA
 }, "Hotkeys");
 
 // Plugins
-export const { atomInstance: Atom_IsFetchedPluginsInfo, useHook: useStore_IsFetchedPluginsInfo } = createAtomWithHook(false, "IsFetchedPluginsInfo");
-
 export const { atomInstance: Atom_FetchedPluginsInfo, useHook: useStore_FetchedPluginsInfo } = createAtomWithHook([], "FetchedPluginsInfo");
 export const { atomInstance: Atom_LoadedPlugins, useHook: useStore_LoadedPlugins } = createAtomWithHook([], "LoadedPlugins");
 export const { atomInstance: Atom_SavedPluginsStatus, useHook: useStore_SavedPluginsStatus } = createAtomWithHook([], "SavedPluginsStatus");