import './search.css'; import { useEffect, useRef, useState } from 'preact/hooks'; import { useSearchParams } from 'react-router-dom'; import AccountBlock from '../components/account-block'; import Avatar from '../components/avatar'; import Icon from '../components/icon'; import Link from '../components/link'; import Loader from '../components/loader'; import Menu from '../components/menu'; import NameText from '../components/name-text'; import Status from '../components/status'; import { api } from '../utils/api'; import useTitle from '../utils/useTitle'; function Search() { const { masto, instance, authenticated } = api(); const [uiState, setUiState] = useState('default'); const [searchParams, setSearchParams] = useSearchParams(); const searchFieldRef = useRef(); const q = searchParams.get('q'); useTitle(q ? `Search: ${q}` : 'Search', `/search`); const [statusResults, setStatusResults] = useState([]); const [accountResults, setAccountResults] = useState([]); const [hashtagResults, setHashtagResults] = useState([]); useEffect(() => { if (q) { searchFieldRef.current.value = q; setUiState('loading'); (async () => { const results = await masto.v2.search({ q, limit: 20, resolve: authenticated, }); console.log(results); setStatusResults(results.statuses); setAccountResults(results.accounts); setHashtagResults(results.hashtags); setUiState('default'); })(); } }, [q]); return (
{ e.preventDefault(); const { q } = e.target; if (q.value) { setSearchParams({ q: q.value }); } else { setSearchParams({}); } }} > { if (!e.target.value) { setSearchParams({}); } }} />
{!!q && uiState !== 'loading' ? ( <>

Accounts

{accountResults.length > 0 ? (
    {accountResults.map((account) => (
  • ))}
) : (

No accounts found.

)}

Hashtags

{hashtagResults.length > 0 ? ( ) : (

No hashtags found.

)}

Posts

{statusResults.length > 0 ? (
    {statusResults.map((status) => (
  • ))}
) : (

No posts found.

)} ) : uiState === 'loading' ? (

) : (

Enter your search term or paste a URL above to get started.

)}
); } export default Search;