FrontEnd/src/views/timeline/index.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

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 Timeline from "./Timeline";
import TimelineCard from "./TimelineCard";

const TimelinePage: React.FC = () => {
  const { owner: ownerUsername, timeline: timelineNameParam } = useParams();

  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 (
    <>
      {timeline != null ? (
        <TimelineCard
          className="timeline-template-card"
          timeline={timeline}
          collapse={cardCollapse}
          toggleCollapse={toggleCardCollapse}
          onReload={reload}
          connectionStatus={connectionStatus}
        />
      ) : null}
      <div className="container">
        <Timeline
          timelineOwner={ownerUsername}
          timelineName={timelineName}
          reloadKey={reloadKey}
          onReload={reload}
          onTimelineLoaded={(t) => setTimeline(t)}
          onConnectionStateChanged={setConnectionStatus}
        />
      </div>
    </>
  );
};

export default TimelinePage;