aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/app/views/timeline-common/Timeline.tsx
blob: d970af843c8af05fbf30a5c4c2299fa4fdeb8294 (plain)
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
87
88
89
90
91
92
93
94
import React from "react";

import {
  HttpForbiddenError,
  HttpNetworkError,
  HttpNotFoundError,
} from "@/http/common";
import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";

import TimelinePostListView from "./TimelinePostListView";

export interface TimelineProps {
  className?: string;
  style?: React.CSSProperties;
  timelineName: string;
}

const Timeline: React.FC<TimelineProps> = (props) => {
  const { timelineName, className, style } = props;

  const [posts, setPosts] = React.useState<
    | HttpTimelinePostInfo[]
    | "loading"
    | "offline"
    | "notexist"
    | "forbid"
    | "error"
  >("loading");

  React.useEffect(() => {
    let subscribe = true;

    void getHttpTimelineClient()
      .listPost(timelineName)
      .then(
        (data) => {
          if (subscribe) setPosts(data);
        },
        (error) => {
          if (error instanceof HttpNetworkError) {
            setPosts("offline");
          } else if (error instanceof HttpForbiddenError) {
            setPosts("forbid");
          } else if (error instanceof HttpNotFoundError) {
            setPosts("notexist");
          } else {
            console.error(error);
            setPosts("error");
          }
        }
      );

    return () => {
      subscribe = false;
    };
  }, [timelineName]);

  switch (posts) {
    case "loading":
      return (
        <div className={className} style={style}>
          Loading.
        </div>
      );
    case "offline":
      return (
        <div className={className} style={style}>
          Offline.
        </div>
      );
    case "notexist":
      return (
        <div className={className} style={style}>
          Not exist.
        </div>
      );
    case "forbid":
      return (
        <div className={className} style={style}>
          Forbid.
        </div>
      );
    case "error":
      return (
        <div className={className} style={style}>
          Error.
        </div>
      );
    default:
      return <TimelinePostListView posts={posts} />;
  }
};

export default Timeline;