snort/src/Pages/SearchPage.tsx

import { useParams } from "react-router-dom";
import Timeline from "Element/Timeline";
import { useEffect, useState } from "react";
import { debounce } from "Util";
import { router } from "index";
import { SearchRelays } from "Const";
import { System } from "Nostr/System";

const SearchPage = () => {
    const params: any = useParams();
    const [search, setSearch] = useState<string>();
    const [keyword, setKeyword] = useState<string | undefined>(params.keyword);

    useEffect(() => {
        if (keyword) {
            // "navigate" changing only url
            router.navigate(`/search/${encodeURIComponent(keyword)}`)
        }
    }, [keyword]);

    useEffect(() => {
        return debounce(500, () => setKeyword(search));
    }, [search]);

    useEffect(() => {
        let addedRelays: string[] = [];
        for (let [k, v] of SearchRelays) {
            if (!System.Sockets.has(k)) {
                System.ConnectToRelay(k, v);
                addedRelays.push(k);
            }
        }
        return () => {
            for (let r of addedRelays) {
                System.DisconnectRelay(r);
            }
        }
    }, []);

    return (
        <div className="main-content">
            <h2>Search</h2>
            <div className="flex mb10">
                <input type="text" className="f-grow mr10" placeholder="Search.." value={search} onChange={e => setSearch(e.target.value)} />
            </div>
            {keyword && <Timeline
                key={keyword}
                subject={{ type: "keyword", items: [keyword], discriminator: keyword }}
                postsOnly={false}
                method={"TIME_RANGE"} />}
        </div>
    )
}

export default SearchPage;