refactor(project): show refresh button on network error

netless-io · Jan 5, 2022 · 82ebc29 · 82ebc29
1 parent 41ee399
commit 82ebc29
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 14 deletions.
diff --git a/desktop/renderer-app/src/pages/BigClassPage/index.tsx b/desktop/renderer-app/src/pages/BigClassPage/index.tsx
@@ -186,7 +186,7 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
 
     return (
         <div className="realtime-container">
-            {loadingPageRef.current && <LoadingPage />}
+            {loadingPageRef.current && <LoadingPage onTimeout="full-reload" />}
             <div className="realtime-box">
                 <TopBar
                     isMac={runtime.isMac}

diff --git a/desktop/renderer-app/src/pages/OneToOnePage/index.tsx b/desktop/renderer-app/src/pages/OneToOnePage/index.tsx
@@ -143,7 +143,7 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
 
     return (
         <div className="one-to-one-realtime-container">
-            {loadingPageRef.current && <LoadingPage />}
+            {loadingPageRef.current && <LoadingPage onTimeout="full-reload" />}
             <div className="one-to-one-realtime-box">
                 <TopBar
                     isMac={runtime.isMac}

diff --git a/desktop/renderer-app/src/pages/SmallClassPage/index.tsx b/desktop/renderer-app/src/pages/SmallClassPage/index.tsx
@@ -161,7 +161,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
 
     return (
         <div className="realtime-container">
-            {loadingPageRef.current && <LoadingPage />}
+            {loadingPageRef.current && <LoadingPage onTimeout="full-reload" />}
             <div className="realtime-box">
                 <TopBar
                     isMac={runtime.isMac}

diff --git a/desktop/renderer-app/src/stores/whiteboard-store.ts b/desktop/renderer-app/src/stores/whiteboard-store.ts
@@ -360,6 +360,7 @@ export class WhiteboardStore {
                     }
                 },
                 onDisconnectWithError: error => {
+                    void message.error(this.i18n.t("on-disconnect-with-error"));
                     this.preloadPPTResource.cancel();
                     console.error(error);
                 },

diff --git a/packages/flat-components/src/components/LoadingPage/index.tsx b/packages/flat-components/src/components/LoadingPage/index.tsx
@@ -1,19 +1,26 @@
 import "./style.less";
 import loadingGIF from "./icons/loading.gif";
 
-import React, { FC, useEffect, useState } from "react";
-import { Button } from "antd";
+import React, { FC, useCallback, useEffect, useState } from "react";
 import classNames from "classnames";
-import { Link } from "react-router-dom";
+import { Button } from "antd";
 import { useTranslation } from "react-i18next";
 
 export interface LoadingPageProps {
     text?: string;
     timeMS?: number;
     hasHeader?: boolean;
+    onTimeout?: "return-home" | "full-reload" | (() => void);
+    onTimeoutText?: string;
 }
 
-export const LoadingPage: FC<LoadingPageProps> = ({ text, timeMS = 20 * 1000, hasHeader }) => {
+export const LoadingPage: FC<LoadingPageProps> = ({
+    text,
+    timeMS = 20 * 1000,
+    hasHeader,
+    onTimeout = "return-home",
+    onTimeoutText,
+}) => {
     const [isShowReturnHomePage, showReturnHomePage] = useState(false);
     const { t } = useTranslation();
 
@@ -23,6 +30,21 @@ export const LoadingPage: FC<LoadingPageProps> = ({ text, timeMS = 20 * 1000, ha
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+    const timeoutText =
+        onTimeoutText || (typeof onTimeout === "string" ? t(onTimeout) : t("return-home"));
+
+    const timeoutBehavior = useCallback(
+        (type: "return-home" | "full-reload") => () => {
+            if (type === "return-home") {
+                window.location.pathname = "/";
+            }
+            if (type === "full-reload") {
+                window.location.reload();
+            }
+        },
+        [],
+    );
+
     return (
         <div className="loading-page">
             <div
@@ -34,14 +56,15 @@ export const LoadingPage: FC<LoadingPageProps> = ({ text, timeMS = 20 * 1000, ha
                 <img className="loading-page-image" src={loadingGIF} alt="loading" />
                 {text && <span>{text}</span>}
             </div>
-            <Link
-                to="/"
+            <Button
+                size="large"
                 className={classNames("loading-page-return-btn", {
                     "is-show": isShowReturnHomePage,
                 })}
+                onClick={typeof onTimeout === "string" ? timeoutBehavior(onTimeout) : onTimeout}
             >
-                <Button size="large">{t("return-home")}</Button>
-            </Link>
+                {timeoutText}
+            </Button>
         </div>
     );
 };
diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -85,6 +85,8 @@
     "time": "by room end date"
   },
   "return-home": "Return Home",
+  "full-reload": "Refresh",
+  "on-disconnect-with-error": "The network is not available",
   "error-page-description": "Please try again",
   "error-page-title": "Sorry, we have an unknown error",
   "error-page-return-home": "({{countdown}}) Go Back",

diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -85,6 +85,8 @@
     "SmallClass": "最多 16 位学生"
   },
   "return-home": "返回首页",
+  "full-reload": "刷新",
+  "on-disconnect-with-error": "当前网络不可用",
   "error-page-title": "抱歉，遇到未知错误",
   "error-page-description": "请重试",
   "error-page-return-home": "({{countdown}}) 返回首页",

diff --git a/web/flat-web/src/pages/BigClassPage/index.tsx b/web/flat-web/src/pages/BigClassPage/index.tsx
@@ -171,7 +171,7 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
 
     return (
         <div className="realtime-container">
-            {loadingPageRef.current && <LoadingPage />}
+            {loadingPageRef.current && <LoadingPage onTimeout="full-reload" />}
             <div className="realtime-box">
                 <TopBar
                     isMac={runtime.isMac}

diff --git a/web/flat-web/src/pages/OneToOnePage/index.tsx b/web/flat-web/src/pages/OneToOnePage/index.tsx
@@ -126,7 +126,7 @@ export const OneToOnePage = observer<OneToOnePageProps>(function OneToOnePage()
 
     return (
         <div className="one-to-one-realtime-container">
-            {loadingPageRef.current && <LoadingPage />}
+            {loadingPageRef.current && <LoadingPage onTimeout="full-reload" />}
             <div className="one-to-one-realtime-box">
                 <TopBar
                     isMac={runtime.isMac}

diff --git a/web/flat-web/src/pages/SmallClassPage/index.tsx b/web/flat-web/src/pages/SmallClassPage/index.tsx
@@ -151,7 +151,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
 
     return (
         <div className="realtime-container">
-            {loadingPageRef.current && <LoadingPage />}
+            {loadingPageRef.current && <LoadingPage onTimeout="full-reload" />}
             <div className="realtime-box">
                 <TopBar
                     isMac={runtime.isMac}

diff --git a/web/flat-web/src/stores/whiteboard-store.ts b/web/flat-web/src/stores/whiteboard-store.ts
@@ -364,6 +364,7 @@ export class WhiteboardStore {
                     }
                 },
                 onDisconnectWithError: error => {
+                    void message.error(this.i18n.t("on-disconnect-with-error"));
                     console.error(error);
                     this.preloadPPTResource.cancel();
                 },