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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
import React from "react";
import { UiLogicError } from "@/common";
import { HttpNetworkError, HttpNotFoundError } from "@/http/common";
import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline";
import { TimelineMemberDialog } from "./TimelineMember";
import TimelinePropertyChangeDialog from "./TimelinePropertyChangeDialog";
import { TimelinePageTemplateUIProps } from "./TimelinePageTemplateUI";
export interface TimelinePageTemplateProps<TManageItem> {
name: string;
onManage: (item: TManageItem) => void;
UiComponent: React.ComponentType<
Omit<TimelinePageTemplateUIProps<TManageItem>, "CardComponent">
>;
notFoundI18nKey: string;
reloadKey: number;
onReload: () => void;
}
export default function TimelinePageTemplate<TManageItem>(
props: TimelinePageTemplateProps<TManageItem>
): React.ReactElement | null {
const { name, reloadKey, onReload } = props;
const [dialog, setDialog] = React.useState<null | "property" | "member">(
null
);
const [timeline, setTimeline] = React.useState<
HttpTimelineInfo | "loading" | "offline" | "notexist" | "error"
>("loading");
React.useEffect(() => {
setTimeline("loading");
let subscribe = true;
void getHttpTimelineClient()
.getTimeline(name)
.then(
(data) => {
if (subscribe) {
setTimeline(data);
}
},
(error) => {
if (subscribe) {
if (error instanceof HttpNetworkError) {
setTimeline("offline");
} else if (error instanceof HttpNotFoundError) {
setTimeline("notexist");
} else {
console.error(error);
setTimeline("error");
}
}
}
);
return () => {
subscribe = false;
};
}, [name, reloadKey]);
let dialogElement: React.ReactElement | undefined;
const closeDialog = (): void => setDialog(null);
if (dialog === "property") {
if (typeof timeline !== "object") {
throw new UiLogicError(
"Timeline is null but attempt to open change property dialog."
);
}
dialogElement = (
<TimelinePropertyChangeDialog
open
close={closeDialog}
timeline={timeline}
onChange={onReload}
/>
);
} else if (dialog === "member") {
if (typeof timeline !== "object") {
throw new UiLogicError(
"Timeline is null but attempt to open change property dialog."
);
}
dialogElement = (
<TimelineMemberDialog
open
onClose={closeDialog}
timeline={timeline}
onChange={onReload}
/>
);
}
const { UiComponent } = props;
return (
<>
<UiComponent
timeline={
typeof timeline === "object"
? {
...timeline,
operations: {
onManage: timeline.manageable
? (item) => {
if (item === "property") {
setDialog(item);
} else {
props.onManage(item);
}
}
: undefined,
onMember: () => setDialog("member"),
},
}
: timeline
}
notExistMessageI18nKey={props.notFoundI18nKey}
/>
{dialogElement}
</>
);
}
|
