From b86aeb9150c197ffa96ce6f48d7c4b852fbfba2f Mon Sep 17 00:00:00 2001
From: CalciumIon <1808837298@qq.com>
Date: Sat, 14 Dec 2024 12:57:56 +0800
Subject: [PATCH] feat: Implement status loading in App component and refactor
 SiderBar

- Added a new function to load status data from the API in the App component, enhancing the application's ability to display real-time status updates.
- Integrated error handling for API calls to improve user feedback in case of connection issues.
- Removed the redundant status loading logic from the SiderBar component, streamlining the code and ensuring a single source of truth for status management.
- Updated the useEffect hook in SiderBar to maintain sidebar collapse state based on local storage, improving user experience.
---
 web/src/App.js                 | 25 ++++++++++++++++++++++++-
 web/src/components/SiderBar.js | 22 +++-------------------
 2 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/web/src/App.js b/web/src/App.js
index 10ad9e34..8aa16fab 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -27,6 +27,9 @@ import Task from "./pages/Task/index.js";
 import Playground from './pages/Playground/Playground.js';
 import OAuth2Callback from "./components/OAuth2Callback.js";
 import { useTranslation } from 'react-i18next';
+import { StatusContext } from './context/Status';
+import { setStatusData } from './helpers/data.js';
+import { API, showError } from './helpers';
 
 const Home = lazy(() => import('./pages/Home'));
 const Detail = lazy(() => import('./pages/Detail'));
@@ -34,7 +37,7 @@ const About = lazy(() => import('./pages/About'));
 
 function App() {
   const [userState, userDispatch] = useContext(UserContext);
-  // const [statusState, statusDispatch] = useContext(StatusContext);
+  const [statusState, statusDispatch] = useContext(StatusContext);
   const { i18n } = useTranslation();
 
   const loadUser = () => {
@@ -45,6 +48,23 @@ function App() {
     }
   };
 
+  const loadStatus = async () => {
+    try {
+      const res = await API.get('/api/status');
+      if (!res?.data) return;
+      
+      const { success, data } = res.data;
+      if (success) {
+        statusDispatch({ type: 'set', payload: data });
+        setStatusData(data);
+      } else {
+        showError('Unable to connect to server');
+      }
+    } catch (error) {
+      showError('Failed to load status');
+    }
+  };
+
   useEffect(() => {
     loadUser();
     let systemName = getSystemName();
@@ -63,6 +83,9 @@ function App() {
     if (savedLang) {
       i18n.changeLanguage(savedLang);
     }
+    loadStatus();
+
+
   }, [i18n]);
 
   return (
diff --git a/web/src/components/SiderBar.js b/web/src/components/SiderBar.js
index c2566535..503dc81a 100644
--- a/web/src/components/SiderBar.js
+++ b/web/src/components/SiderBar.js
@@ -168,31 +168,13 @@ const SiderBar = () => {
     ],
   );
 
-  const loadStatus = async () => {
-    const res = await API.get('/api/status');
-    if (res === undefined) {
-      return;
-    }
-    const { success, data } = res.data;
-    if (success) {
-      statusDispatch({ type: 'set', payload: data });
-      setStatusData(data);
-    } else {
-      showError('无法正常连接至服务器！');
-    }
-  };
-
   useEffect(() => {
-    loadStatus().then(() => {
-      setIsCollapsed(
-          localStorage.getItem('default_collapse_sidebar') === 'true',
-      );
-    });
     let localKey = window.location.pathname.split('/')[1];
     if (localKey === '') {
       localKey = 'home';
     }
     setSelectedKeys([localKey]);
+    
     let chatLink = localStorage.getItem('chat_link');
     if (!chatLink) {
         let chats = localStorage.getItem('chats');
@@ -220,6 +202,8 @@ const SiderBar = () => {
             }
         }
     }
+    
+    setIsCollapsed(localStorage.getItem('default_collapse_sidebar') === 'true');
   }, []);
 
   return (