From fe7587f44296b88c08927d2eae8fda3f375eaa8c Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sun, 14 Feb 2021 17:29:11 +0800
Subject: ...

---
 FrontEnd/src/app/views/common/LoadFailReload.tsx   | 37 ++++++++++++++++++++++
 FrontEnd/src/app/views/home/TimelineBoard.tsx      | 17 ++--------
 .../timeline-common/TimelinePostContentView.tsx    | 15 ++++++---
 3 files changed, 50 insertions(+), 19 deletions(-)
 create mode 100644 FrontEnd/src/app/views/common/LoadFailReload.tsx

(limited to 'FrontEnd/src/app/views')

diff --git a/FrontEnd/src/app/views/common/LoadFailReload.tsx b/FrontEnd/src/app/views/common/LoadFailReload.tsx
new file mode 100644
index 00000000..a80e7b76
--- /dev/null
+++ b/FrontEnd/src/app/views/common/LoadFailReload.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { Trans } from "react-i18next";
+
+export interface LoadFailReloadProps {
+  className?: string;
+  style?: React.CSSProperties;
+  onReload: () => void;
+}
+
+const LoadFailReload: React.FC<LoadFailReloadProps> = ({
+  onReload,
+  className,
+  style,
+}) => {
+  return (
+    <Trans
+      i18nKey="loadFailReload"
+      parent="div"
+      className={className}
+      style={style}
+    >
+      0
+      <a
+        href="#"
+        onClick={(e) => {
+          onReload();
+          e.preventDefault();
+        }}
+      >
+        1
+      </a>
+      2
+    </Trans>
+  );
+};
+
+export default LoadFailReload;
diff --git a/FrontEnd/src/app/views/home/TimelineBoard.tsx b/FrontEnd/src/app/views/home/TimelineBoard.tsx
index 58988b17..552ec7dd 100644
--- a/FrontEnd/src/app/views/home/TimelineBoard.tsx
+++ b/FrontEnd/src/app/views/home/TimelineBoard.tsx
@@ -1,13 +1,14 @@
 import React from "react";
 import clsx from "clsx";
 import { Link } from "react-router-dom";
-import { Trans, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { Spinner } from "react-bootstrap";
 
 import { HttpTimelineInfo } from "@/http/timeline";
 
 import TimelineLogo from "../common/TimelineLogo";
 import UserTimelineLogo from "../common/UserTimelineLogo";
+import LoadFailReload from "../common/LoadFailReload";
 
 interface TimelineBoardItemProps {
   timeline: HttpTimelineInfo;
@@ -259,19 +260,7 @@ const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
         } else if (timelines === "offline") {
           return (
             <div className="d-flex flex-grow-1 justify-content-center align-items-center">
-              <Trans i18nKey="loadFailReload" parent="div">
-                0
-                <a
-                  href="#"
-                  onClick={(e) => {
-                    props.onReload();
-                    e.preventDefault();
-                  }}
-                >
-                  1
-                </a>
-                2
-              </Trans>
+              <LoadFailReload onReload={props.onReload} />
             </div>
           );
         } else {
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostContentView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostContentView.tsx
index 35d091af..2f5d3989 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostContentView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostContentView.tsx
@@ -7,6 +7,7 @@ import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
 import { useUser } from "@/services/user";
 
 import Skeleton from "../common/Skeleton";
+import LoadFailReload from "../common/LoadFailReload";
 
 const TextView: React.FC<TimelinePostContentViewProps> = (props) => {
   const { post, className, style } = props;
@@ -14,6 +15,8 @@ const TextView: React.FC<TimelinePostContentViewProps> = (props) => {
   const [text, setText] = React.useState<string | null>(null);
   const [error, setError] = React.useState<"offline" | "error" | null>(null);
 
+  const [reloadKey, setReloadKey] = React.useState<number>(0);
+
   React.useEffect(() => {
     let subscribe = true;
 
@@ -40,14 +43,15 @@ const TextView: React.FC<TimelinePostContentViewProps> = (props) => {
     return () => {
       subscribe = false;
     };
-  }, [post.timelineName, post.id]);
+  }, [post.timelineName, post.id, reloadKey]);
 
   if (error != null) {
-    // TODO: i18n
     return (
-      <div className={className} style={style}>
-        Error!
-      </div>
+      <LoadFailReload
+        className={className}
+        style={style}
+        onReload={() => setReloadKey(reloadKey + 1)}
+      />
     );
   } else if (text == null) {
     return <Skeleton />;
@@ -109,6 +113,7 @@ const TimelinePostContentView: React.FC<TimelinePostContentViewProps> = (
     return <View post={post} className={className} style={style} />;
   } else {
     // TODO: i18n
+    console.error("Unknown post type", post);
     return <div>Error, unknown post type!</div>;
   }
 };
-- 
cgit v1.2.3