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
|
import React from "react";
import clsx from "clsx";
import { HttpNetworkError } from "@/http/common";
import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
import { useUser } from "@/services/user";
import Skeleton from "../common/Skeleton";
import LoadFailReload from "../common/LoadFailReload";
const TextView: React.FC<TimelinePostContentViewProps> = (props) => {
const { post, className, style } = props;
const [text, setText] = React.useState<string | null>(null);
const [error, setError] = React.useState<"offline" | "error" | null>(null);
const [reloadKey, setReloadKey] = React.useState<number>(0);
React.useEffect(() => {
let subscribe = true;
setText(null);
setError(null);
void getHttpTimelineClient()
.getPostDataAsString(post.timelineName, post.id)
.then(
(data) => {
if (subscribe) setText(data);
},
(error) => {
if (subscribe) {
if (error instanceof HttpNetworkError) {
setError("offline");
} else {
setError("error");
}
}
}
);
return () => {
subscribe = false;
};
}, [post.timelineName, post.id, reloadKey]);
if (error != null) {
return (
<LoadFailReload
className={className}
style={style}
onReload={() => setReloadKey(reloadKey + 1)}
/>
);
} else if (text == null) {
return <Skeleton />;
} else {
return (
<div className={className} style={style}>
{text}
</div>
);
}
};
const ImageView: React.FC<TimelinePostContentViewProps> = (props) => {
const { post, className, style } = props;
useUser();
return (
<img
src={getHttpTimelineClient().generatePostDataUrl(
post.timelineName,
post.id
)}
className={clsx(className, "timeline-content-image")}
style={style}
/>
);
};
const MarkdownView: React.FC<TimelinePostContentViewProps> = (_props) => {
// TODO: Implement this.
return <div>Unsupported now!</div>;
};
export interface TimelinePostContentViewProps {
post: HttpTimelinePostInfo;
className?: string;
style?: React.CSSProperties;
}
const viewMap: Record<string, React.FC<TimelinePostContentViewProps>> = {
"text/plain": TextView,
"text/markdown": MarkdownView,
"image/png": ImageView,
"image/jpeg": ImageView,
"image/gif": ImageView,
"image/webp": ImageView,
};
const TimelinePostContentView: React.FC<TimelinePostContentViewProps> = (
props
) => {
const { post, className, style } = props;
const type = post.dataList[0].kind;
if (type in viewMap) {
const View = viewMap[type];
return <View post={post} className={className} style={style} />;
} else {
// TODO: i18n
console.error("Unknown post type", post);
return <div>Error, unknown post type!</div>;
}
};
export default TimelinePostContentView;
|
