Something went wrong. Try again.
A lexicon-driven AppView for ATProto.
Something went wrong. Try again.
TypeScript
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950import { useEffect, useRef, useState } from "react"
export interface TypeaheadActor { did: string handle: string displayName?: string avatar?: string}
export function useHandleTypeahead(query: string, delay = 200) { const [actors, setActors] = useState<TypeaheadActor[]>([]) const abortRef = useRef<AbortController | null>(null)
useEffect(() => { if (query.length < 2) { setActors([]) return }
abortRef.current?.abort()
const timeout = setTimeout(() => { const controller = new AbortController() abortRef.current = controller
fetch( `https://typeahead.waow.tech/xrpc/app.bsky.actor.searchActorsTypeahead?q=${encodeURIComponent(query)}&limit=8`, { signal: controller.signal, headers: { "X-Client": "happyview" }, }, ) .then((res) => (res.ok ? res.json() : Promise.reject())) .then((data) => setActors(data.actors ?? [])) .catch((e) => { if (!(e instanceof DOMException && e.name === "AbortError")) { setActors([]) } }) }, delay)
return () => { clearTimeout(timeout) abortRef.current?.abort() } }, [query, delay])
return { actors }}