[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}/>
-            <FetchLatestPluginsDataController pluginsControllerHasRunRef={pluginsControllerHasRunRef}/>
+            <LoadPluginsController />
+            <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) {
-            asyncInitFetchPluginsInfo();
-            pluginsControllerHasRunRef.current.is_init_fetched_plugins_info = true;
+        if (isAnyPluginEnabled_Init()) {
+            asyncFetchPluginsInfo();
         }
     }, []);
 

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 {