3 files changed, 80 insertions, 92 deletions
diff --git a/FrontEnd/src/app/views/home/BoardWithUser.tsx b/FrontEnd/src/app/views/home/BoardWithUser.tsx
index 16648820..9b2f395d 100644
--- a/FrontEnd/src/app/views/home/BoardWithUser.tsx
+++ b/FrontEnd/src/app/views/home/BoardWithUser.tsx
@@ -3,61 +3,30 @@ import { Row, Col } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 
 import { AuthUser } from "@/services/user";
-import { TimelineInfo } from "@/services/timeline";
+import { getHttpHighlightClient } from "@/http/highlight";
 import { getHttpTimelineClient } from "@/http/timeline";
 
 import TimelineBoard from "./TimelineBoard";
-import OfflineBoard from "./OfflineBoard";
 
 const BoardWithUser: React.FC<{ user: AuthUser }> = ({ user }) => {
   const { t } = useTranslation();
 
-  const [relatedTimelines, setRelatedTimelines] = React.useState<
-    TimelineInfo[] | "offline" | "loading"
-  >("loading");
-
-  React.useEffect(() => {
-    let subscribe = true;
-    if (relatedTimelines === "loading") {
-      void getHttpTimelineClient()
-        .listTimeline({ relate: user.username })
-        .then(
-          (timelines) => {
-            if (subscribe) {
-              setRelatedTimelines(timelines);
-            }
-          },
-          () => {
-            setRelatedTimelines("offline");
-          }
-        );
-    }
-    return () => {
-      subscribe = false;
-    };
-  }, [user, relatedTimelines]);
-
   return (
     <Row className="my-3 justify-content-center">
-      {relatedTimelines === "offline" ? (
-        <Col sm="8" lg="6">
-          <OfflineBoard
-            onReload={() => {
-              setRelatedTimelines("loading");
-            }}
-          />
-        </Col>
-      ) : (
-        <Col sm="6" lg="5">
-          <TimelineBoard
-            title={t("home.relatedTimeline")}
-            timelines={relatedTimelines}
-            onReload={() => {
-              setRelatedTimelines("loading");
-            }}
-          />
-        </Col>
-      )}
+      <Col sm="6" lg="5">
+        <TimelineBoard
+          title={t("home.highlightTimeline")}
+          load={() => getHttpHighlightClient().list()}
+        />
+      </Col>
+      <Col sm="6" lg="5">
+        <TimelineBoard
+          title={t("home.relatedTimeline")}
+          load={() =>
+            getHttpTimelineClient().listTimeline({ relate: user.username })
+          }
+        />
+      </Col>
     </Row>
   );
 };
diff --git a/FrontEnd/src/app/views/home/BoardWithoutUser.tsx b/FrontEnd/src/app/views/home/BoardWithoutUser.tsx
index 7e30f799..ad88af7a 100644
--- a/FrontEnd/src/app/views/home/BoardWithoutUser.tsx
+++ b/FrontEnd/src/app/views/home/BoardWithoutUser.tsx
@@ -1,58 +1,31 @@
 import React from "react";
 import { Row, Col } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
 
-import { TimelineInfo } from "@/services/timeline";
+import { getHttpHighlightClient } from "@/http/highlight";
 import { getHttpTimelineClient } from "@/http/timeline";
 
 import TimelineBoard from "./TimelineBoard";
-import OfflineBoard from "./OfflineBoard";
 
 const BoardWithoutUser: React.FC = () => {
-  const [publicTimelines, setPublicTimelines] = React.useState<
-    TimelineInfo[] | "offline" | "loading"
-  >("loading");
-
-  React.useEffect(() => {
-    let subscribe = true;
-    if (publicTimelines === "loading") {
-      void getHttpTimelineClient()
-        .listTimeline({ visibility: "Public" })
-        .then(
-          (timelines) => {
-            if (subscribe) {
-              setPublicTimelines(timelines);
-            }
-          },
-          () => {
-            setPublicTimelines("offline");
-          }
-        );
-    }
-    return () => {
-      subscribe = false;
-    };
-  }, [publicTimelines]);
+  const { t } = useTranslation();
 
   return (
     <Row className="my-3 justify-content-center">
-      {publicTimelines === "offline" ? (
-        <Col sm="8" lg="6">
-          <OfflineBoard
-            onReload={() => {
-              setPublicTimelines("loading");
-            }}
-          />
-        </Col>
-      ) : (
-        <Col sm="8" lg="6">
-          <TimelineBoard
-            timelines={publicTimelines}
-            onReload={() => {
-              setPublicTimelines("loading");
-            }}
-          />
-        </Col>
-      )}
+      <Col sm="6" lg="5">
+        <TimelineBoard
+          title={t("home.highlightTimeline")}
+          load={() => getHttpHighlightClient().list()}
+        />
+      </Col>
+      <Col sm="8" lg="6">
+        <TimelineBoard
+          title={t("home.publicTimeline")}
+          load={() =>
+            getHttpTimelineClient().listTimeline({ visibility: "Public" })
+          }
+        />
+      </Col>
     </Row>
   );
 };
diff --git a/FrontEnd/src/app/views/home/TimelineBoard.tsx b/FrontEnd/src/app/views/home/TimelineBoard.tsx
index c2a7e5fe..ae7783e6 100644
--- a/FrontEnd/src/app/views/home/TimelineBoard.tsx
+++ b/FrontEnd/src/app/views/home/TimelineBoard.tsx
@@ -8,14 +8,14 @@ import { TimelineInfo } from "@/services/timeline";
 import TimelineLogo from "../common/TimelineLogo";
 import UserTimelineLogo from "../common/UserTimelineLogo";
 
-export interface TimelineBoardProps {
+interface TimelineBoardUIProps {
   title?: string;
   timelines: TimelineInfo[] | "offline" | "loading";
   onReload: () => void;
   className?: string;
 }
 
-const TimelineBoard: React.FC<TimelineBoardProps> = (props) => {
+const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
   const { title, timelines, className } = props;
 
   return (
@@ -71,4 +71,50 @@ const TimelineBoard: React.FC<TimelineBoardProps> = (props) => {
   );
 };
 
+export interface TimelineBoardProps {
+  title?: string;
+  className?: string;
+  load: () => Promise<TimelineInfo[]>;
+}
+
+const TimelineBoard: React.FC<TimelineBoardProps> = ({
+  className,
+  title,
+  load,
+}) => {
+  const [timelines, setTimelines] = React.useState<
+    TimelineInfo[] | "offline" | "loading"
+  >("loading");
+
+  React.useEffect(() => {
+    let subscribe = true;
+    if (timelines === "loading") {
+      void load().then(
+        (timelines) => {
+          if (subscribe) {
+            setTimelines(timelines);
+          }
+        },
+        () => {
+          setTimelines("offline");
+        }
+      );
+    }
+    return () => {
+      subscribe = false;
+    };
+  }, [load, timelines]);
+
+  return (
+    <TimelineBoardUI
+      title={title}
+      className={className}
+      timelines={timelines}
+      onReload={() => {
+        setTimelines("loading");
+      }}
+    />
+  );
+};
+
 export default TimelineBoard;