[Update/Refactor] Plugins: Organize codes.

src-ui/app/config_page/setting_section/setting_box/_components/plugins_control_component/PluginsControlComponent.jsx

@@ -3,14 +3,12 @@ import { SwitchBox } from "../index";
 import { _DownloadButton } from "../_atoms/_download_button/_DownloadButton";
 import styles from "./PluginsControlComponent.module.scss";
 
-// メインのコントロールコンポーネント。ダウンロード済み / 未ダウンロードで分岐して表示する
 export const PluginsControlComponent = ({
     variable_state,
     plugin_status,
     toggleFunction,
     downloadStartFunction,
 }) => {
-    // 共通オプション（各子コンポーネントに引き回す情報）
     const option = {
         id: plugin_status.plugin_id,
         is_pending: plugin_status.is_pending,
@@ -41,84 +39,53 @@ export const PluginsControlComponent = ({
     }
 };
 
-// -------------------------
+
-// ダウンロード済みのプラグイン用コンポーネント
-// 状態により以下の分岐を行う
-// ・ is_latest_version_already が true なら「最新版を使用中」
-// ・ is_latest_version_already が false かつ is_latest_version_available が true なら「最新版を利用可能」（アップデートボタン＋スイッチ）
-// ・ それ以外（is_latest_version_already:false && is_latest_version_available: false）なら、desc等の情報とスイッチのみ表示
 const DownloadedPluginControl = ({
     option,
     plugin_status,
     toggleFunction,
     downloadStartFunction,
 }) => {
-    // on/off トグル時の処理
     const togglePlugin = () => {
         toggleFunction(plugin_status.plugin_id);
     };
 
+    const latest_version = plugin_status.latest_plugin_info?.plugin_version;
 
-    // ダウンロード済みの場合、ダウンロードされた情報からタイトルやバージョンを取得
-    const title = plugin_status.downloaded_plugin_info?.title || plugin_status.latest_plugin_info.title;
-    const current_version =
-        plugin_status.downloaded_plugin_info?.plugin_version || plugin_status.latest_plugin_info.plugin_version;
-
-    // コンポーネントごとに表示内容を分岐
     if (plugin_status.is_latest_version_already) {
-        // 最新版が既に使用中
         return (
             <div className={styles.container}>
-                <p>{title}</p>
+                <p>最新のバージョン: {latest_version}</p>
-                <p>現在のバージョン: {current_version}</p>
                 <p>最新版を使用中</p>
                 <SwitchBox variable={option} toggleFunction={togglePlugin} />
             </div>
         );
     } else if (plugin_status.is_latest_version_available) {
-        // 最新版の利用可能なお知らせとアップデートボタン＋スイッチ
         return (
             <div className={styles.container}>
-                <p>{title}</p>
+                <p>最新のバージョン: {latest_version}</p>
-                <p>現在のバージョン: {current_version}</p>
                 <p>最新版を利用可能</p>
                 <_DownloadButton option={option} downloadStartFunction={downloadStartFunction} />
                 <SwitchBox variable={option} toggleFunction={togglePlugin} />
             </div>
         );
     } else {
-        // 最新版利用可能ではないがダウンロード済み
-        // ※「desc」に関しては、情報があればplugin_status.descやlatest_plugin_info.descを利用してください
-        const desc =
-            plugin_status.latest_plugin_info.desc ||
-            "追加情報がありません。";
         return (
             <div className={styles.container}>
-                <p>{title}</p>
+                <p>最新のバージョン: {latest_version}</p>
-                <p>現在のバージョン: {current_version}</p>
-                <p>{desc}</p>
                 <SwitchBox variable={option} toggleFunction={togglePlugin} />
             </div>
         );
     }
 };
 
-// -------------------------
+
-// 未ダウンロードのプラグイン用コンポーネント
-// 状態により以下の分岐を行う
-// ・ is_latest_version_available が true なら：info_title, 最新バージョン情報とダウンロードボタン
-// ・ is_latest_version_available が false なら：info_title, 最新バージョン情報と「現在利用不可」
 const NotDownloadedPluginControl = ({ option, plugin_status, downloadStartFunction }) => {
-    const title = plugin_status.latest_plugin_info.title;
     const latest_version = plugin_status.latest_plugin_info.plugin_version;
-    // ※未ダウンロードの場合、current_versionは「未ダウンロード」や「なし」といった扱いとする
-    const current_version = "未ダウンロード";
 
     if (plugin_status.is_latest_version_available) {
         return (
             <div className={styles.container}>
-                <p>{title}</p>
-                <p>現在のバージョン: {current_version}</p>
                 <p>最新バージョン: {latest_version}</p>
                 <_DownloadButton option={option} downloadStartFunction={downloadStartFunction} />
             </div>
@@ -126,8 +93,6 @@ const NotDownloadedPluginControl = ({ option, plugin_status, downloadStartFuncti
     } else {
         return (
             <div className={styles.container}>
-                <p>{title}</p>
-                <p>現在のバージョン: {current_version}</p>
                 <p>最新バージョン: {latest_version}</p>
                 <p>現在利用不可</p>
             </div>

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

@@ -79,20 +79,19 @@ const PluginDownloadContainer = () => {
                 <div key={plugin.plugin_id} className={styles.plugin_wrapper}>
                     <p className={styles.title}>
                         {plugin.is_downloaded
-                            ? plugin.downloaded_plugin_info?.title || plugin.latest_plugin_info.title
+                            ? plugin.downloaded_plugin_info?.title
-                            : plugin.latest_plugin_info.title}
+                            : plugin.latest_plugin_info?.title}
                     </p>
                     <p className={styles.plugin_id}>{plugin.plugin_id}</p>
-                    {plugin.error ? (
+                    {plugin.is_error ? (
-                        <p style={{ color: "red" }}>Error: {plugin.error}</p>
+                        <p style={{ color: "red" }}>Error: {plugin.error_message}</p>
                     ) : (
                         <div className={styles.plugin_info_wrapper}>
                             <div className={styles.plugin_info}>
-                                {/* 状態に応じた情報表示（例：バージョン等） */}
                                 <p>
                                     {plugin.is_downloaded
                                         ? `現在のバージョン: ${plugin.downloaded_plugin_info?.plugin_version}`
-                                        : `最新バージョン: ${plugin.latest_plugin_info.plugin_version}`}
+                                        : null}
                                 </p>
                             </div>
                             <PluginsControlComponent

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

@@ -49,6 +49,7 @@ export const usePlugins = () => {
                     const prev_map = new Map(prev.data.map(item => [item.plugin_id, item]));
                     const new_data = [];
                     let new_value = {};
+                    const { is_plugin_supported, is_plugin_supported_latest_vrct } = checkVrctVerCompatibility(downloaded_plugin_info.min_supported_vrct_version, downloaded_plugin_info.max_supported_vrct_version);
 
                     if (!prev_map.has(downloaded_plugin_info.plugin_id)) { // 未ダウンロード 新規登録
                         new_value = {
@@ -67,9 +68,8 @@ export const usePlugins = () => {
                     }
 
                     for (const old_plugin_data of prev.data) {
-                        const { is_plugin_supported, is_plugin_supported_latest_vrct } = checkVrctVerCompatibility(downloaded_plugin_info.min_supported_vrct_version, downloaded_plugin_info.max_supported_vrct_version);
 
-                        if (prev_map.has(downloaded_plugin_info.plugin_id) && old_plugin_data.plugin_id === downloaded_plugin_info.plugin_id) { // ダウンロード済み
+                        if (prev_map.has(downloaded_plugin_info.plugin_id) && old_plugin_data.plugin_id === downloaded_plugin_info.plugin_id) { // ダウンロード済み アップデート
 
 
                             const target_prev_plugin = prev_map.get(downloaded_plugin_info.plugin_id);
@@ -262,7 +262,7 @@ export const usePlugins = () => {
                             title: plugin_data.title,
                             plugin_id: plugin_data.plugin_id || plugin_data.title,
                             is_error: true,
-                            error: error.message,
+                            error_message: error.message,
                             url: plugin_data.url
                         };
                     }