1 files changed, 45 insertions, 2 deletions

diff --git a/FrontEnd/src/app/views/home-v2/index.tsx b/FrontEnd/src/app/views/home-v2/index.tsx
index 75c51540..cb3c1428 100644
--- a/FrontEnd/src/app/views/home-v2/index.tsx
+++ b/FrontEnd/src/app/views/home-v2/index.tsx
@@ -8,6 +8,14 @@ import SearchInput from "../common/SearchInput";
 
 import TimelineListView from "./TimelineListView";
 import TimelineCreateDialog from "../home/TimelineCreateDialog";
+import { HttpTimelineInfo } from "@/http/timeline";
+import { getHttpHighlightClient } from "@/http/highlight";
+
+const highlightTimelineMessageMap = {
+  loading: "home.loadingHighlightTimelines",
+  done: "home.loadedHighlightTimelines",
+  error: "home.errorHighlightTimelines",
+} as const;
 
 const HomeV2: React.FC = () => {
   const history = useHistory();
@@ -20,11 +28,43 @@ const HomeV2: React.FC = () => {
 
   const [dialog, setDialog] = React.useState<"create" | null>(null);
 
+  const [highlightTimelineState, setHighlightTimelineState] = React.useState<
+    "loading" | "done" | "error"
+  >("loading");
+  const [highlightTimelines, setHighlightTimelines] = React.useState<
+    HttpTimelineInfo[] | undefined
+  >();
+
+  React.useEffect(() => {
+    if (highlightTimelineState === "loading") {
+      let subscribe = true;
+      void getHttpHighlightClient()
+        .list()
+        .then(
+          (data) => {
+            if (subscribe) {
+              setHighlightTimelineState("done");
+              setHighlightTimelines(data);
+            }
+          },
+          () => {
+            if (subscribe) {
+              setHighlightTimelineState("error");
+              setHighlightTimelines(undefined);
+            }
+          }
+        );
+      return () => {
+        subscribe = false;
+      };
+    }
+  }, [highlightTimelineState]);
+
   return (
     <>
       <Container fluid className="px-0">
         <Row className="mx-0 my-3 px-2 justify-content-end">
-          <Col xs="auto">
+          <Col xs="12" sm="auto">
             <SearchInput
               value={navText}
               onChange={setNavText}
@@ -46,7 +86,10 @@ const HomeV2: React.FC = () => {
             />
           </Col>
         </Row>
-        <TimelineListView headerText="home.loadingHighlightTimelines" />
+        <TimelineListView
+          headerText={highlightTimelineMessageMap[highlightTimelineState]}
+          timelines={highlightTimelines}
+        />
       </Container>
       {dialog === "create" && (
         <TimelineCreateDialog open close={() => setDialog(null)} />