3 files changed, 12 insertions, 76 deletions

diff --git a/FrontEnd/src/app/views/home/OfflineBoard.tsx b/FrontEnd/src/app/views/home/OfflineBoard.tsx
deleted file mode 100644
index fc05bd74..00000000
--- a/FrontEnd/src/app/views/home/OfflineBoard.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-import { Trans } from "react-i18next";
-
-import { getAllCachedTimelineNames } from "@/services/timeline";
-import UserTimelineLogo from "../common/UserTimelineLogo";
-import TimelineLogo from "../common/TimelineLogo";
-
-export interface OfflineBoardProps {
-  onReload: () => void;
-}
-
-const OfflineBoard: React.FC<OfflineBoardProps> = ({ onReload }) => {
-  const [timelines, setTimelines] = React.useState<string[]>([]);
-
-  React.useEffect(() => {
-    let subscribe = true;
-    void getAllCachedTimelineNames().then((t) => {
-      if (subscribe) setTimelines(t);
-    });
-    return () => {
-      subscribe = false;
-    };
-  });
-
-  return (
-    <>
-      <Trans i18nKey="home.offlinePrompt">
-        0
-        <a
-          href="#"
-          onClick={(e) => {
-            onReload();
-            e.preventDefault();
-          }}
-        >
-          1
-        </a>
-        2
-      </Trans>
-      {timelines.map((timeline) => {
-        const isPersonal = timeline.startsWith("@");
-        const url = isPersonal
-          ? `/users/${timeline.slice(1)}`
-          : `/timelines/${timeline}`;
-        return (
-          <div key={timeline} className="timeline-board-item">
-            {isPersonal ? (
-              <UserTimelineLogo className="icon" />
-            ) : (
-              <TimelineLogo className="icon" />
-            )}
-            <Link to={url}>{timeline}</Link>
-          </div>
-        );
-      })}
-    </>
-  );
-};
-
-export default OfflineBoard;
diff --git a/FrontEnd/src/app/views/home/TimelineBoard.tsx b/FrontEnd/src/app/views/home/TimelineBoard.tsx
index c3f01aed..58988b17 100644
--- a/FrontEnd/src/app/views/home/TimelineBoard.tsx
+++ b/FrontEnd/src/app/views/home/TimelineBoard.tsx
@@ -4,10 +4,10 @@ import { Link } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 import { Spinner } from "react-bootstrap";
 
-import { TimelineInfo } from "@/services/timeline";
+import { HttpTimelineInfo } from "@/http/timeline";
+
 import TimelineLogo from "../common/TimelineLogo";
 import UserTimelineLogo from "../common/UserTimelineLogo";
-import { HttpTimelineInfo } from "@/http/timeline";
 
 interface TimelineBoardItemProps {
   timeline: HttpTimelineInfo;
@@ -98,7 +98,7 @@ const TimelineBoardItem: React.FC<TimelineBoardItemProps> = ({
 };
 
 interface TimelineBoardItemContainerProps {
-  timelines: TimelineInfo[];
+  timelines: HttpTimelineInfo[];
   editHandler?: {
     // offset may exceed index range plusing index.
     onMove: (timeline: string, index: number, offset: number) => void;
@@ -206,7 +206,7 @@ const TimelineBoardItemContainer: React.FC<TimelineBoardItemContainerProps> = ({
 
 interface TimelineBoardUIProps {
   title?: string;
-  timelines: TimelineInfo[] | "offline" | "loading";
+  timelines: HttpTimelineInfo[] | "offline" | "loading";
   onReload: () => void;
   className?: string;
   editHandler?: {
@@ -304,7 +304,7 @@ const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => {
 export interface TimelineBoardProps {
   title?: string;
   className?: string;
-  load: () => Promise<TimelineInfo[]>;
+  load: () => Promise<HttpTimelineInfo[]>;
   editHandler?: {
     onMove: (timeline: string, index: number, offset: number) => Promise<void>;
     onDelete: (timeline: string) => Promise<void>;
@@ -318,7 +318,7 @@ const TimelineBoard: React.FC<TimelineBoardProps> = ({
   editHandler,
 }) => {
   const [timelines, setTimelines] = React.useState<
-    TimelineInfo[] | "offline" | "loading"
+    HttpTimelineInfo[] | "offline" | "loading"
   >("loading");
 
   React.useEffect(() => {
diff --git a/FrontEnd/src/app/views/home/TimelineCreateDialog.tsx b/FrontEnd/src/app/views/home/TimelineCreateDialog.tsx
index 5dcba612..b4e25ba1 100644
--- a/FrontEnd/src/app/views/home/TimelineCreateDialog.tsx
+++ b/FrontEnd/src/app/views/home/TimelineCreateDialog.tsx
@@ -1,12 +1,9 @@
 import React from "react";
 import { useHistory } from "react-router";
 
-import {
-  validateTimelineName,
-  timelineService,
-  TimelineInfo,
-} from "@/services/timeline";
+import { validateTimelineName } from "@/services/timeline";
 import OperationDialog from "../common/OperationDialog";
+import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline";
 
 interface TimelineCreateDialogProps {
   open: boolean;
@@ -42,10 +39,10 @@ const TimelineCreateDialog: React.FC<TimelineCreateDialogProps> = (props) => {
           return null;
         }
       }}
-      onProcess={([name]): Promise<TimelineInfo> => {
-        return timelineService.createTimeline(name).toPromise();
-      }}
-      onSuccessAndClose={(timeline: TimelineInfo) => {
+      onProcess={([name]): Promise<HttpTimelineInfo> =>
+        getHttpTimelineClient().postTimeline({ name })
+      }
+      onSuccessAndClose={(timeline: HttpTimelineInfo) => {
         history.push(`timelines/${timeline.name}`);
       }}
       failurePrompt={(e) => `${e as string}`}