fix(update-version): remove modalVisibleState in GlobalStore

desktop/renderer-app/src/components/AppUpgradeModal/index.tsx

@@ -1,17 +1,19 @@
 import "./index.less";
 import { Button, Modal } from "antd";
 import { observer } from "mobx-react-lite";
-import React, { useContext, useEffect, useState } from "react";
-import { GlobalStoreContext } from "../StoreProvider";
+import React, { useEffect, useState } from "react";
 import { ipcAsyncByMainWindow, ipcReceive, ipcReceiveRemove, ipcSyncByApp } from "../../utils/ipc";
 import { useSafePromise } from "../../utils/hooks/lifecycle";
 
 export interface AppUpgradeModalProps {
-    hasNewVersion?: boolean;
+    visible: boolean;
+    onClose: () => void;
 }
 
-export const AppUpgradeModal = observer<AppUpgradeModalProps>(function AppUpgradeModal() {
-    const globalStore = useContext(GlobalStoreContext);
+export const AppUpgradeModal = observer<AppUpgradeModalProps>(function AppUpgradeModal({
+    onClose,
+    visible,
+}) {
     const [appVersion, setAppVersion] = useState(" ");
     const [upgradePercent, setUpgradePercent] = useState(0);
     const [showUpgradeProgress, setShowUpgradeProgress] = useState(false);
@@ -32,15 +34,15 @@ export const AppUpgradeModal = observer<AppUpgradeModalProps>(function AppUpgrad
         return () => {
             ipcReceiveRemove("update-progress");
         };
-    }, [appVersion, globalStore, sp]);
+    }, [appVersion, sp]);
 
     const renderModalTitle = (): React.ReactNode => {
         return <div className="app-upgrade-modal-title">版本更新</div>;
     };
 
     const cancelUpgrade = (): void => {
         setShowUpgradeProgress(false);
-        globalStore.hideAppUpgradeModal();
+        onClose();
     };
 
     const upgradeStart = (): void => {
@@ -71,7 +73,7 @@ export const AppUpgradeModal = observer<AppUpgradeModalProps>(function AppUpgrad
             maskClosable={false}
             title={renderModalTitle()}
             footer={[]}
-            visible={globalStore.isShowAppUpgradeModal}
+            visible={visible}
             onCancel={cancelUpgrade}
             wrapClassName="app-upgrade-modal-container"
             closable={false}

desktop/renderer-app/src/pages/HomePage/index.tsx

@@ -1,6 +1,6 @@
 import "./HomePage.less";
 
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { ipcAsyncByMainWindow, ipcReceiveRemove, ipcSyncByApp } from "../../utils/ipc";
 import { MainRoomMenu } from "./MainRoomMenu";
@@ -11,13 +11,13 @@ import { shouldWindowCenter } from "./utils";
 import { constants } from "flat-types";
 import { MainPageLayoutContainer } from "../../components/MainPageLayoutContainer";
 import { AppUpgradeModal } from "../../components/AppUpgradeModal";
-import { globalStore } from "../../stores/GlobalStore";
 import { useSafePromise } from "../../utils/hooks/lifecycle";
 
 export type HomePageProps = {};
 
 export const HomePage = observer<HomePageProps>(function HomePage() {
     const lastLocation = useLastLocation();
+    const [showModal, setShowModal] = useState(false);
     const sp = useSafePromise();
 
     useEffect(() => {
@@ -31,7 +31,8 @@ export const HomePage = observer<HomePageProps>(function HomePage() {
         sp(ipcSyncByApp("get-update-info"))
             .then(data => {
                 if (data.hasNewVersion) {
-                    globalStore.showAppUpgradeModal();
+                    console.log("[Auto Updater]: has newVersion", data.hasNewVersion);
+                    setShowModal(true);
                 }
             })
             .catch(err => {
@@ -52,7 +53,7 @@ export const HomePage = observer<HomePageProps>(function HomePage() {
                     <MainRoomHistoryPanel />
                 </div>
             </div>
-            <AppUpgradeModal />
+            <AppUpgradeModal visible={showModal} onClose={() => setShowModal(false)} />
         </MainPageLayoutContainer>
     );
 });

desktop/renderer-app/src/pages/UserSettingPage/AboutPage/index.tsx

@@ -2,33 +2,26 @@ import logoSVG from "../icons/logo.svg";
 import updateSVG from "../icons/update.svg";
 import "./index.less";
 
-import React, { useContext, useEffect, useState } from "react";
+import React, { useState } from "react";
 import { UserSettingLayoutContainer } from "../UserSettingLayoutContainer";
 import { Button, message } from "antd";
-import { GlobalStoreContext } from "../../../components/StoreProvider";
 import { runtime } from "../../../utils/runtime";
 import { ipcSyncByApp } from "../../../utils/ipc";
 import { AppUpgradeModal } from "../../../components/AppUpgradeModal";
+import { useSafePromise } from "../../../utils/hooks/lifecycle";
 
 export const AboutPage = (): React.ReactElement => {
-    const [appVersionState, setAppVersionState] = useState<string>();
+    const sp = useSafePromise();
+    const [showModal, setShowModal] = useState(false);
 
-    const globalStore = useContext(GlobalStoreContext);
-
-    useEffect(() => {
-        ipcSyncByApp("get-update-info").then(data => {
-            if (data.hasNewVersion) {
-                setAppVersionState(data.version);
+    const checkUpgradeVersion = (): void => {
+        sp(ipcSyncByApp("get-update-info")).then(data => {
+            if (!data.hasNewVersion || data.version === runtime.appVersion) {
+                message.info("当前已是最新版本");
+            } else {
+                setShowModal(true);
             }
         });
-    }, [appVersionState]);
-
-    const checkUpgradeVersion = (): void => {
-        if (appVersionState === runtime.appVersion) {
-            message.info("当前已是最新版本");
-        } else {
-            globalStore.showAppUpgradeModal();
-        }
     };
 
     return (
@@ -47,7 +40,7 @@ export const AboutPage = (): React.ReactElement => {
                     <a href="">服务协议</a>｜<a href="">隐私政策</a>｜<a href="">GitHub</a>
                 </div> */}
             </div>
-            <AppUpgradeModal />
+            <AppUpgradeModal visible={showModal} onClose={() => setShowModal(false)} />
         </UserSettingLayoutContainer>
     );
 };

desktop/renderer-app/src/stores/GlobalStore.ts

@@ -15,7 +15,6 @@ export class GlobalStore {
      * Hide it permanently if user close the tooltip.
      */
     isShowRecordHintTips = true;
-    isShowAppUpgradeModal = false;
     wechat: WechatInfo | null = null;
     whiteboardRoomUUID: string | null = null;
     whiteboardRoomToken: string | null = null;
@@ -65,14 +64,6 @@ export class GlobalStore {
     hideRecordHintTips = (): void => {
         this.isShowRecordHintTips = false;
     };
-
-    showAppUpgradeModal = (): void => {
-        this.isShowAppUpgradeModal = true;
-    };
-
-    hideAppUpgradeModal = (): void => {
-        this.isShowAppUpgradeModal = false;
-    };
 }
 
 export const globalStore = new GlobalStore();