2023-02-08 21:10:26 +00:00
|
|
|
import { useIntl, FormattedMessage } from "react-intl";
|
2023-01-24 12:33:18 +00:00
|
|
|
import { useParams } from "react-router-dom";
|
2023-02-14 22:40:10 +00:00
|
|
|
import ProfilePreview from "Element/ProfilePreview";
|
2023-01-24 12:33:18 +00:00
|
|
|
import Timeline from "Element/Timeline";
|
2023-01-28 15:40:19 +00:00
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { debounce } from "Util";
|
|
|
|
import { router } from "index";
|
|
|
|
import { SearchRelays } from "Const";
|
2023-02-11 20:05:46 +00:00
|
|
|
import { System } from "@snort/nostr";
|
2023-02-14 22:40:10 +00:00
|
|
|
import { useQuery } from "State/Users/Hooks";
|
2023-01-24 12:33:18 +00:00
|
|
|
|
2023-02-08 21:10:26 +00:00
|
|
|
import messages from "./messages";
|
|
|
|
|
2023-01-24 12:33:18 +00:00
|
|
|
const SearchPage = () => {
|
2023-02-07 19:47:57 +00:00
|
|
|
const params = useParams();
|
2023-02-08 21:10:26 +00:00
|
|
|
const { formatMessage } = useIntl();
|
2023-02-07 20:04:50 +00:00
|
|
|
const [search, setSearch] = useState<string>();
|
|
|
|
const [keyword, setKeyword] = useState<string | undefined>(params.keyword);
|
2023-02-14 22:40:10 +00:00
|
|
|
const allUsers = useQuery(keyword || "");
|
2023-01-28 15:40:19 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
useEffect(() => {
|
|
|
|
if (keyword) {
|
|
|
|
// "navigate" changing only url
|
|
|
|
router.navigate(`/search/${encodeURIComponent(keyword)}`);
|
|
|
|
}
|
|
|
|
}, [keyword]);
|
2023-01-28 15:40:19 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
useEffect(() => {
|
|
|
|
return debounce(500, () => setKeyword(search));
|
|
|
|
}, [search]);
|
2023-01-28 15:40:19 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
useEffect(() => {
|
2023-02-07 19:47:57 +00:00
|
|
|
const addedRelays: string[] = [];
|
|
|
|
for (const [k, v] of SearchRelays) {
|
2023-02-07 20:04:50 +00:00
|
|
|
if (!System.Sockets.has(k)) {
|
|
|
|
System.ConnectToRelay(k, v);
|
|
|
|
addedRelays.push(k);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return () => {
|
2023-02-07 19:47:57 +00:00
|
|
|
for (const r of addedRelays) {
|
2023-02-07 20:04:50 +00:00
|
|
|
System.DisconnectRelay(r);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}, []);
|
2023-01-24 12:33:18 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
return (
|
|
|
|
<div className="main-content">
|
2023-02-08 21:10:26 +00:00
|
|
|
<h2>
|
|
|
|
<FormattedMessage {...messages.Search} />
|
|
|
|
</h2>
|
2023-02-07 20:04:50 +00:00
|
|
|
<div className="flex mb10">
|
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
className="f-grow mr10"
|
2023-02-08 21:10:26 +00:00
|
|
|
placeholder={formatMessage(messages.SearchPlaceholder)}
|
2023-02-07 20:04:50 +00:00
|
|
|
value={search}
|
2023-02-09 12:26:54 +00:00
|
|
|
onChange={e => setSearch(e.target.value)}
|
2023-02-07 20:04:50 +00:00
|
|
|
/>
|
|
|
|
</div>
|
2023-02-14 22:40:10 +00:00
|
|
|
{keyword && allUsers?.slice(3).map(u => <ProfilePreview actions={<></>} pubkey={u.pubkey} />)}
|
2023-02-07 20:04:50 +00:00
|
|
|
{keyword && (
|
|
|
|
<Timeline
|
|
|
|
key={keyword}
|
|
|
|
subject={{
|
|
|
|
type: "keyword",
|
|
|
|
items: [keyword],
|
|
|
|
discriminator: keyword,
|
|
|
|
}}
|
|
|
|
postsOnly={false}
|
|
|
|
method={"TIME_RANGE"}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
2023-01-24 12:33:18 +00:00
|
|
|
|
2023-02-06 21:42:47 +00:00
|
|
|
export default SearchPage;
|