diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index 5d7088fb19..b72ab2f63d 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -28,7 +28,7 @@ import {s} from '#/lib/styles' import {logger} from '#/logger' import {isNative, isWeb} from '#/platform/detection' import {listenSoftReset} from '#/state/events' -import {useActorAutocompleteFn} from '#/state/queries/actor-autocomplete' +import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete' import {useActorSearch} from '#/state/queries/actor-search' import {useModerationOpts} from '#/state/queries/preferences' import {useSearchPostsQuery} from '#/state/queries/search-posts' @@ -59,6 +59,7 @@ import { } from '#/view/shell/desktop/Search' import {ProfileCardFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder' import {atoms as a} from '#/alf' +import {useThrottledValue} from '#/components/hooks/useThrottledValue' function Loader() { const pal = usePalette('default') @@ -537,7 +538,6 @@ export function SearchScreen( const {track} = useAnalytics() const setDrawerOpen = useSetDrawerOpen() const moderationOpts = useModerationOpts() - const search = useActorAutocompleteFn() const setMinimalShellMode = useSetMinimalShellMode() const {isTabletOrDesktop, isTabletOrMobile} = useWebMediaQueries() @@ -545,36 +545,20 @@ export function SearchScreen( undefined, ) const [isFetching, setIsFetching] = React.useState(false) - const [query, setQuery] = React.useState(props.route?.params?.q || '') - const [searchResults, setSearchResults] = React.useState< - AppBskyActorDefs.ProfileViewBasic[] - >([]) + + // Query terms + const q = props.route?.params?.q ?? '' + const [query, setQuery] = React.useState(q) + const [searchInput, setSearchInput] = React.useState(q) + const throttledInput = useThrottledValue(searchInput, 300) + + const autocompleteResults = useActorAutocompleteQuery(throttledInput) + const [inputIsFocused, setInputIsFocused] = React.useState(false) const [showAutocompleteResults, setShowAutocompleteResults] = React.useState(false) const [searchHistory, setSearchHistory] = React.useState([]) - /** - * The Search screen's `q` param - */ - const queryParam = props.route?.params?.q - - /** - * If `true`, this means we received new instructions from the router. This - * is handled in a effect, and used to update the value of `query` locally - * within this screen. - */ - const routeParamsMismatch = queryParam && queryParam !== query - - React.useEffect(() => { - if (queryParam && routeParamsMismatch) { - // reset immediately and let local state take over - navigation.setParams({q: ''}) - // update query for next search - setQuery(queryParam) - } - }, [queryParam, routeParamsMismatch, navigation]) - React.useEffect(() => { const loadSearchHistory = async () => { try { @@ -610,39 +594,14 @@ export function SearchScreen( setShowAutocompleteResults(false) }, [setQuery]) - const onChangeText = React.useCallback( - async (text: string) => { - scrollToTopWeb() + const onChangeText = React.useCallback(async (text: string) => { + scrollToTopWeb() + setSearchInput(text) - setQuery(text) - - if (text.length > 0) { - setIsFetching(true) - setShowAutocompleteResults(true) - - if (searchDebounceTimeout.current) { - clearTimeout(searchDebounceTimeout.current) - } - - searchDebounceTimeout.current = setTimeout(async () => { - const results = await search({query: text, limit: 30}) - - if (results) { - setSearchResults(results) - setIsFetching(false) - } - }, 300) - } else { - if (searchDebounceTimeout.current) { - clearTimeout(searchDebounceTimeout.current) - } - setSearchResults([]) - setIsFetching(false) - setShowAutocompleteResults(false) - } - }, - [setQuery, search, setSearchResults], - ) + const showAutoComplete = text.length > 0 + setIsFetching(showAutoComplete) + setShowAutocompleteResults(showAutoComplete) + }, []) const updateSearchHistory = React.useCallback( async (newQuery: string) => { @@ -672,7 +631,8 @@ export function SearchScreen( scrollToTopWeb() setShowAutocompleteResults(false) updateSearchHistory(query) - }, [query, setShowAutocompleteResults, updateSearchHistory]) + navigation.push('Search', {q: query}) + }, [navigation, query, updateSearchHistory]) const onSoftReset = React.useCallback(() => { scrollToTopWeb() @@ -684,6 +644,7 @@ export function SearchScreen( return match && match[1] }, [query]) + // TODO ??? useFocusEffect( React.useCallback(() => { setMinimalShellMode(false) @@ -829,7 +790,7 @@ export function SearchScreen( /> ) : null} - {searchResults.map(item => ( + {autocompleteResults.data?.map(item => ( - ) : routeParamsMismatch ? ( - ) : ( )}