1 files changed, 68 insertions, 12 deletions
diff --git a/FrontEnd/src/views/timeline/index.tsx b/FrontEnd/src/views/timeline/index.tsx
index 02d773dc..4faf8af8 100644
--- a/FrontEnd/src/views/timeline/index.tsx
+++ b/FrontEnd/src/views/timeline/index.tsx
@@ -1,28 +1,84 @@
 import React from "react";
+import { HubConnectionState } from "@microsoft/signalr";
 import { useParams } from "react-router-dom";
 
 import { UiLogicError } from "@/common";
+import { HttpTimelineInfo } from "@/http/timeline";
+import useReverseScrollPositionRemember from "@/utilities/useReverseScrollPositionRemember";
+import { generatePalette, setPalette } from "@/palette";
 
-import TimelinePageTemplate from "../timeline-common/TimelinePageTemplate";
+import Timeline from "./Timeline";
 import TimelineCard from "./TimelineCard";
 
 const TimelinePage: React.FC = () => {
-  const { name } = useParams();
+  const { owner: ownerUsername, timeline: timelineNameParam } = useParams();
 
-  if (name == null) {
-    throw new UiLogicError("No route param 'name'.");
-  }
+  if (ownerUsername == null || ownerUsername == "")
+    throw new UiLogicError("Route param owner is not set.");
+
+  const timelineName =
+    timelineNameParam == null || timelineNameParam === ""
+      ? "self"
+      : timelineNameParam;
+
+  const [timeline, setTimeline] = React.useState<HttpTimelineInfo | null>(null);
 
   const [reloadKey, setReloadKey] = React.useState<number>(0);
+  const reload = (): void => setReloadKey(reloadKey + 1);
+
+  const [connectionStatus, setConnectionStatus] =
+    React.useState<HubConnectionState>(HubConnectionState.Connecting);
+
+  useReverseScrollPositionRemember();
+
+  React.useEffect(() => {
+    if (timeline != null && timeline.color != null) {
+      return setPalette(generatePalette({ primary: timeline.color }));
+    }
+  }, [timeline]);
+
+  const cardCollapseLocalStorageKey = `timeline.${ownerUsername}.${timelineName}.cardCollapse`;
+
+  const [cardCollapse, setCardCollapse] = React.useState<boolean>(true);
+
+  React.useEffect(() => {
+    const savedCollapse = window.localStorage.getItem(
+      cardCollapseLocalStorageKey
+    );
+    setCardCollapse(savedCollapse == null ? true : savedCollapse === "true");
+  }, [cardCollapseLocalStorageKey]);
+
+  const toggleCardCollapse = (): void => {
+    const newState = !cardCollapse;
+    setCardCollapse(newState);
+    window.localStorage.setItem(
+      cardCollapseLocalStorageKey,
+      newState.toString()
+    );
+  };
 
   return (
-    <TimelinePageTemplate
-      timelineName={name}
-      notFoundI18nKey="timeline.timelineNotExist"
-      reloadKey={reloadKey}
-      CardComponent={TimelineCard}
-      onReload={() => setReloadKey(reloadKey + 1)}
-    />
+    <>
+      {timeline != null ? (
+        <TimelineCard
+          className="timeline-template-card"
+          timeline={timeline}
+          collapse={cardCollapse}
+          toggleCollapse={toggleCardCollapse}
+          onReload={reload}
+          connectionStatus={connectionStatus}
+        />
+      ) : null}
+      <div className="container">
+        <Timeline
+          timelineName={timelineName}
+          reloadKey={reloadKey}
+          onReload={reload}
+          onTimelineLoaded={(t) => setTimeline(t)}
+          onConnectionStateChanged={setConnectionStatus}
+        />
+      </div>
+    </>
   );
 };