blob: 7d11d8996478e26d30e1e752f3633910e2fa8d55 (
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
import React from "react";
import { Container, Row } from "react-bootstrap";
import { useHistory, useLocation } from "react-router";
import { Link } from "react-router-dom";
import { HttpNetworkError } from "@/http/common";
import { getHttpSearchClient } from "@/http/search";
import { TimelineInfo } from "@/services/timeline";
import { useAvatar } from "@/services/user";
import SearchInput from "../common/SearchInput";
import BlobImage from "../common/BlobImage";
const TimelineSearchResultItemView: React.FC<{ timeline: TimelineInfo }> = ({
timeline,
}) => {
const link = timeline.name.startsWith("@")
? `users/${timeline.owner.username}`
: `timelines/${timeline.name}`;
const avatar = useAvatar(timeline.owner.username);
return (
<div className="timeline-search-result-item my-2 p-3">
<h4>
<Link to={link} className="mb-2 text-primary">
{timeline.title}
<small className="ml-3 text-secondary">{timeline.name}</small>
</Link>
</h4>
<div>
<BlobImage
blob={avatar}
className="timeline-search-result-item-avatar mr-2"
/>
{timeline.owner.nickname}
<small className="ml-3 text-secondary">
@{timeline.owner.username}
</small>
</div>
</div>
);
};
const SearchPage: React.FC = () => {
const history = useHistory();
const location = useLocation();
const searchParams = new URLSearchParams(location.search);
const queryParam = searchParams.get("q");
const [searchText, setSearchText] = React.useState<string>("");
const [state, setState] = React.useState<
TimelineInfo[] | "init" | "loading" | "network-error" | "error"
>("init");
React.useEffect(() => {
if (queryParam != null && queryParam.length > 0) {
setSearchText(queryParam);
setState("loading");
void getHttpSearchClient()
.searchTimelines(queryParam)
.then(
(ts) => {
setState(ts);
},
(e) => {
if (e instanceof HttpNetworkError) {
setState("network-error");
} else {
setState("error");
}
}
);
}
}, [queryParam]);
return (
<Container className="my-3">
<Row className="justify-content-center">
<SearchInput
className="col-12 col-sm-9 col-md-6"
value={searchText}
onChange={setSearchText}
loading={state === "loading"}
onButtonClick={() => {
if (searchText.length > 0) {
history.push(`/search?q=${searchText}`);
}
}}
/>
</Row>
{(() => {
switch (state) {
case "init": {
return "Input something and search!";
}
case "loading": {
return "Loading!";
}
case "network-error": {
return "Network error!";
}
case "error": {
return "Unknown error!";
}
default: {
return state.map((t) => (
<TimelineSearchResultItemView key={t.name} timeline={t} />
));
}
}
})()}
</Container>
);
};
export default SearchPage;
|
