blob: 60eb6306d13ce6fc0eb5b4cb94b47f375f9c8f4a (
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
119
120
121
122
123
124
125
126
127
128
129
|
import React from "react";
import { useTranslation } from "react-i18next";
import { useNavigate, useLocation } from "react-router-dom";
import { Link } from "react-router-dom";
import { HttpNetworkError } from "@/http/common";
import { getHttpSearchClient } from "@/http/search";
import { HttpTimelineInfo } from "@/http/timeline";
import SearchInput from "../common/SearchInput";
import UserAvatar from "../common/user/UserAvatar";
import "./index.css";
const TimelineSearchResultItemView: React.FC<{
timeline: HttpTimelineInfo;
}> = ({ timeline }) => {
const link = timeline.name.startsWith("@")
? `users/${timeline.owner.username}`
: `timelines/${timeline.name}`;
return (
<div className="timeline-search-result-item my-2 p-3">
<h4>
<Link to={link} className="mb-2 text-primary">
{timeline.title}
<small className="ms-3 text-secondary">{timeline.name}</small>
</Link>
</h4>
<div>
<UserAvatar
username={timeline.owner.username}
className="timeline-search-result-item-avatar me-2"
/>
{timeline.owner.nickname}
<small className="ms-3 text-secondary">
@{timeline.owner.username}
</small>
</div>
</div>
);
};
const SearchPage: React.FC = () => {
const { t } = useTranslation();
const navigate = useNavigate();
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<
HttpTimelineInfo[] | "init" | "loading" | "network-error" | "error"
>("init");
const [forceResearchKey, setForceResearchKey] = React.useState<number>(0);
React.useEffect(() => {
setState("init");
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, forceResearchKey]);
return (
<div className="container my-3">
<div className="row justify-content-center">
<SearchInput
className="col-12 col-sm-9 col-md-6"
value={searchText}
onChange={setSearchText}
loading={state === "loading"}
onButtonClick={() => {
if (queryParam === searchText) {
setForceResearchKey((old) => old + 1);
} else {
navigate(`/search?q=${searchText}`);
}
}}
/>
</div>
{(() => {
switch (state) {
case "init": {
if (queryParam == null || queryParam.length === 0) {
return <div>{t("searchPage.input")}</div>;
}
break;
}
case "loading": {
return <div>{t("searchPage.loading")}</div>;
}
case "network-error": {
return <div className="text-danger">{t("error.network")}</div>;
}
case "error": {
return <div className="text-danger">{t("error.unknown")}</div>;
}
default: {
if (state.length === 0) {
return <div>{t("searchPage.noResult")}</div>;
}
return state.map((t) => (
<TimelineSearchResultItemView key={t.name} timeline={t} />
));
}
}
})()}
</div>
);
};
export default SearchPage;
|
