From 249c686442220e86c5a6e4505cbf25600718ca82 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Fri, 25 Apr 2025 18:51:16 +0900
Subject: [PATCH] [Update] Plugins: Add error handlings when network is not
 connected and failed to fetch plugins info. Also add pending ui(TMP) while
 fetching.

---
 .../setting_section/setting_box/plugins/Plugins.jsx        | 7 +++++++
 .../plugins_compatibility_list/PluginCompatibilityList.jsx | 7 +++++++
 src-ui/logics/configs/plugins/usePlugins.js                | 3 ++-
 src-ui/logics/useReceiveRoutes.js                          | 7 ++++++-
 src-ui/store.js                                            | 2 +-
 5 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.jsx b/src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.jsx
index aadaf64f..b42ea31b 100644
--- a/src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/plugins/Plugins.jsx
@@ -33,6 +33,7 @@ const PluginDownloadContainer = () => {
         currentSavedPluginsStatus,
         toggleSavedPluginsStatus,
         handlePendingPlugin,
+        currentFetchedPluginsInfo,
     } = usePlugins();
     const { showNotification_Success, showNotification_Error } = useNotificationStatus();
 
@@ -65,8 +66,14 @@ const PluginDownloadContainer = () => {
         a.plugin_id.localeCompare(b.plugin_id)
     );
 
+    // Duplicate
+    const is_failed_to_fetch = currentFetchedPluginsInfo.state === "error";
+    const is_fetching = currentFetchedPluginsInfo.state === "pending";
+
     return (
         <div className={styles.plugins_list_container}>
+            {is_failed_to_fetch && <p>Failed to fetch plugins data</p>}
+            {is_fetching && <p>Fetching plugins data...</p>}
             {sorted_plugins_data.map((plugin) => (
                 <div key={plugin.plugin_id} className={styles.plugin_wrapper}>
                     <p className={styles.title}>
diff --git a/src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.jsx b/src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.jsx
index dd0133b1..e23c320c 100644
--- a/src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.jsx
+++ b/src-ui/app/modal_controller/update_modal/plugins_compatibility_list/PluginCompatibilityList.jsx
@@ -9,6 +9,7 @@ export const PluginCompatibilityList = () => {
     const {
         enabledPluginsList,
         asyncFetchPluginsInfo,
+        currentFetchedPluginsInfo,
     } = usePlugins();
 
     useEffect(() => {
@@ -35,9 +36,15 @@ export const PluginCompatibilityList = () => {
 
     if (!is_any_incompatible_plugin && !is_any_compatible_plugin) return null; // This is just for safety.
 
+    // Duplicate
+    const is_failed_to_fetch = currentFetchedPluginsInfo.state === "error";
+    const is_fetching = currentFetchedPluginsInfo.state === "pending";
+
     return (
         <div className={styles.container}>
             <p className={styles.title}>使用中プラグインの互換性チェック</p>
+            {is_failed_to_fetch && <p>Failed to fetch plugins data</p>}
+            {is_fetching && <p>Fetching plugins data...</p>}
             <div className={styles.plugins_compatibility_container}>
                 {incompatible_plugins_list.map(plugin => {
                     const target_data = plugin.downloaded_plugin_info;
diff --git a/src-ui/logics/configs/plugins/usePlugins.js b/src-ui/logics/configs/plugins/usePlugins.js
index b3b1e561..309c012c 100644
--- a/src-ui/logics/configs/plugins/usePlugins.js
+++ b/src-ui/logics/configs/plugins/usePlugins.js
@@ -40,7 +40,7 @@ export const usePlugins = () => {
     const { showNotification_Success, showNotification_Error } = useNotificationStatus();
     const { asyncStdoutToPython } = useStdoutToPython();
 
-    const { currentFetchedPluginsInfo, updateFetchedPluginsInfo, pendingFetchedPluginsInfo } = useStore_FetchedPluginsInfo();
+    const { currentFetchedPluginsInfo, updateFetchedPluginsInfo, pendingFetchedPluginsInfo, errorFetchedPluginsInfo } = useStore_FetchedPluginsInfo();
     const { currentLoadedPlugins, updateLoadedPlugins, pendingLoadedPlugins } = useStore_LoadedPlugins();
 
     const { currentSavedPluginsStatus, updateSavedPluginsStatus, pendingSavedPluginsStatus } = useStore_SavedPluginsStatus();
@@ -252,6 +252,7 @@ export const usePlugins = () => {
             updateFetchedPluginsInfo(updated_list);
         } catch (error) {
             console.error("Error fetching plugin info list: ", error);
+            errorFetchedPluginsInfo();
         }
 
         store.is_initialized_fetched_plugin_info = true;
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index c015d43e..4a4f944c 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -206,7 +206,12 @@ export const useReceiveRoutes = () => {
         "/set/data/main_window_geometry": () => {},
         "/run/open_filepath_logs": () => console.log("Opened Directory, Message Logs"),
         "/run/open_filepath_config_file": () => console.log("Opened Directory, Config File"),
-        "/run/software_update_info": updateLatestSoftwareVersionInfo,
+        "/run/software_update_info": (payload) => {
+            updateLatestSoftwareVersionInfo(prev => ({
+                is_update_available: payload.is_update_available,
+                new_version: payload.new_version || prev.data.new_version,
+            }));
+        },
         "/run/connected_network": handleNetworkConnection,
 
         // Main Page
diff --git a/src-ui/store.js b/src-ui/store.js
index e648f946..d1712f1c 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -119,7 +119,7 @@ export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_Ma
 export const { atomInstance: Atom_OpenedQuickSetting, useHook: useStore_OpenedQuickSetting } = createAtomWithHook("", "OpenedQuickSetting");
 export const { atomInstance: Atom_LatestSoftwareVersionInfo, useHook: useStore_LatestSoftwareVersionInfo } = createAtomWithHook({
     is_update_available: false,
-    new_version: "",
+    new_version: "0.0.0",
 }, "LatestSoftwareVersionInfo");
 export const { atomInstance: Atom_InitProgress, useHook: useStore_InitProgress } = createAtomWithHook(0, "InitProgress");
 export const { atomInstance: Atom_IsBreakPoint, useHook: useStore_IsBreakPoint } = createAtomWithHook(false, "IsBreakPoint");