...

5 files changed, 52 insertions, 31 deletions

diff --git a/FrontEnd/src/app/locales/en/translation.json b/FrontEnd/src/app/locales/en/translation.json
index 9e40cb85..274d629b 100644
--- a/FrontEnd/src/app/locales/en/translation.json
+++ b/FrontEnd/src/app/locales/en/translation.json
@@ -3,7 +3,7 @@
   "search": "Search",
   "edit": "Edit",
   "done": "Done",
-  "loadFailReload": "Load failed, click <1>here</1> to reload.",
+  "loadFailReload": "Load failed, <1>click here to reload</1>.",
   "error": {
     "network": "Network error.",
     "unknown": "Unknown error."
@@ -98,11 +98,6 @@
       "inputPrompt": "This is a dangerous action. If you are sure to delete timeline<1>{{name}}</1>, please input its name below and click confirm button.",
       "notMatch": "Name does not match."
     },
-    "postSyncState": {
-      "syncing": "Syncing",
-      "synced": "Synced",
-      "offline": "Offline"
-    },
     "post": {
       "deleteDialog": {
         "title": "Confirm Delete",
diff --git a/FrontEnd/src/app/locales/zh/translation.json b/FrontEnd/src/app/locales/zh/translation.json
index 8d6dbcf3..759dc63c 100644
--- a/FrontEnd/src/app/locales/zh/translation.json
+++ b/FrontEnd/src/app/locales/zh/translation.json
@@ -3,7 +3,7 @@
   "search": "搜索",
   "edit": "编辑",
   "done": "完成",
-  "loadFailReload": "加载失败，<1>点击</1>重试。",
+  "loadFailReload": "加载失败，<1>点击重试</1>。",
   "error": {
     "network": "网络错误。",
     "unknown": "未知错误。"
@@ -98,11 +98,6 @@
       "inputPrompt": "这是一个危险的操作。如果您确认要删除时间线<1>{{name}}</1>，请在下面输入它的名字并点击确认。",
       "notMatch": "名字不匹配"
     },
-    "postSyncState": {
-      "syncing": "同步中",
-      "synced": "同步成功",
-      "offline": "离线"
-    },
     "post": {
       "deleteDialog": {
         "title": "确认删除",
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>;
   }
 };