105 lines
2.9 KiB
React
105 lines
2.9 KiB
React
|
import './search.css';
|
||
|
|
|
||
|
|
import { useEffect, useRef, useState } from 'preact/hooks';
|
||
|
|
import { useSearchParams } from 'react-router-dom';
|
||
|
|
|
||
|
|
import Avatar from '../components/avatar';
|
||
|
|
import Link from '../components/link';
|
||
|
|
import Menu from '../components/menu';
|
||
|
|
import NameText from '../components/name-text';
|
||
|
|
import Status from '../components/status';
|
||
|
|
import { api } from '../utils/api';
|
||
|
|
|
||
|
|
function Search() {
|
||
|
|
const { masto, instance, authenticated } = api();
|
||
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
||
|
|
const searchFieldRef = useRef();
|
||
|
|
const q = searchParams.get('q');
|
||
|
|
const [statusResults, setStatusResults] = useState([]);
|
||
|
|
const [accountResults, setAccountResults] = useState([]);
|
||
|
|
useEffect(() => {
|
||
|
|
if (q) {
|
||
|
|
searchFieldRef.current.value = q;
|
||
|
|
|
||
|
|
(async () => {
|
||
|
|
const results = await masto.v2.search({
|
||
|
|
q,
|
||
|
|
limit: 20,
|
||
|
|
resolve: authenticated,
|
||
|
|
});
|
||
|
|
console.log(results);
|
||
|
|
setStatusResults(results.statuses);
|
||
|
|
setAccountResults(results.accounts);
|
||
|
|
})();
|
||
|
|
}
|
||
|
|
}, [q]);
|
||
|
|
|
||
|
|
console.log({ accountResults });
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div id="search-page" class="deck-container">
|
||
|
|
<div class="timeline-deck deck">
|
||
|
|
<header>
|
||
|
|
<div class="header-grid">
|
||
|
|
<div class="header-side">
|
||
|
|
<Menu />
|
||
|
|
</div>
|
||
|
|
<form
|
||
|
|
onSubmit={(e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
const { q } = e.target;
|
||
|
|
if (q.value) {
|
||
|
|
setSearchParams({ q: q.value });
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
ref={searchFieldRef}
|
||
|
|
name="q"
|
||
|
|
type="search"
|
||
|
|
autofocus
|
||
|
|
placeholder="Search or paste URL"
|
||
|
|
/>
|
||
|
|
</form>
|
||
|
|
<div class="header-side" />
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<main>
|
||
|
|
<h2 class="timeline-header">Accounts</h2>
|
||
|
|
{accountResults.length > 0 && (
|
||
|
|
<ul class="timeline flat accounts-list">
|
||
|
|
{accountResults.map((account) => (
|
||
|
|
<li>
|
||
|
|
<Avatar url={account.avatar} size="xl" />
|
||
|
|
<NameText account={account} instance={instance} showAcct />
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
)}
|
||
|
|
<h2 class="timeline-header">Posts</h2>
|
||
|
|
{statusResults.length > 0 && (
|
||
|
|
<ul class="timeline">
|
||
|
|
{statusResults.map((status) => (
|
||
|
|
<li>
|
||
|
|
<Link
|
||
|
|
class="status-link"
|
||
|
|
to={
|
||
|
|
instance
|
||
|
|
? `/${instance}/s/${status.id}`
|
||
|
|
: `/s/${status.id}`
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<Status status={status} />
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
)}
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Search;
|