zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Improve usability of search on web (#3663) 

* dont select the text on web

* TODO REVERT THESE CHANGES

* use `usethrottledvalue` for autocomplete

* use `isFetching` from query

* rm setTimeout

* getting there

* improve functionality of cancel button

* rm todo

* add comment back

* encode `searchText` rather than `queryTerm`

* use "back" on web in some cases

* don't flash results in autocomplete

* remove unnecesary usestate

* rename everything to `query` temporarily

* revert accidental lint

* rm todo

* rm comment

* use `useFocusEffect` to update the query term on back navigation

* `searchText` is always defined here

* Fix race

* remove back functionality

* use `keepPreviousData` for query

* rename `q` to `queryParam`

* remove hack

* remove `q=` on cancel

* blur on submit

* use `setParams` instead of `replace`

* use `replace` on web still

* clear the search input when we clear `q` on native

* onPress dismiss attempt

* Adjustments

* Fix search history

* Always hide autocomplete

* Clear right pane search on select

* `blur` on autosuggestion press

* Rename to reduce diff

* Fixes

* Unify codepaths

* Fixes

* precache the autosuggestion

* do the cache in the link card

* Revert "precache the autosuggestion"

This reverts commit 79c433e984621ba4231a2a4c4b3f4690b0516b4d.

* use `throttledValue` and `keepPreviousData` in sidebar search

* show spinner when fetching pt 1

* show spinner when fetching pt 2

* show spinner properly for autocomplete

* Fix extra border

* Position fixed

* TS

* Revert "TS"

This reverts commit df187ea2d7a96d0f1832bc2392215f4d969a87c9.

* Revert "Position fixed"

This reverts commit 9c721c952b0fa4e5e4a23de38cab916ab13397e6.

* Maybe fix iPad

* Revert "TODO REVERT THESE CHANGES"

This reverts commit 279f717f3091c9df8c73ba35f9a038e12f5a1122.

* Rename var

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
zio/stable
Hailey 2024-04-26 20:34:53 -07:00 committed by GitHub
parent d81a373d21
commit 5f9136479b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 155 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/state/queries/actor-autocomplete.ts
View File

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api' import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api'
import {useQuery, useQueryClient} from '@tanstack/react-query' import {keepPreviousData, useQuery, useQueryClient} from '@tanstack/react-query'
import {isJustAMute} from '#/lib/moderation' import {isJustAMute} from '#/lib/moderation'
import {logger} from '#/logger' import {logger} from '#/logger'
@ -16,7 +16,10 @@ const DEFAULT_MOD_OPTS = {
const RQKEY_ROOT = 'actor-autocomplete' const RQKEY_ROOT = 'actor-autocomplete'
export const RQKEY = (prefix: string) => [RQKEY_ROOT, prefix] export const RQKEY = (prefix: string) => [RQKEY_ROOT, prefix]
export function useActorAutocompleteQuery(prefix: string) { export function useActorAutocompleteQuery(
prefix: string,
maintainData?: boolean,
) {
const moderationOpts = useModerationOpts() const moderationOpts = useModerationOpts()
const {getAgent} = useAgent() const {getAgent} = useAgent()
@ -40,6 +43,7 @@ export function useActorAutocompleteQuery(prefix: string) {
}, },
[moderationOpts], [moderationOpts],
), ),
placeholderData: maintainData ? keepPreviousData : undefined,
}) })
} }

210
src/view/screens/Search/Search.tsx
View File

@ -27,7 +27,7 @@ import {s} from '#/lib/styles'
import {logger} from '#/logger' import {logger} from '#/logger'
import {isNative, isWeb} from '#/platform/detection' import {isNative, isWeb} from '#/platform/detection'
import {listenSoftReset} from '#/state/events' 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 {useActorSearch} from '#/state/queries/actor-search'
import {useModerationOpts} from '#/state/queries/preferences' import {useModerationOpts} from '#/state/queries/preferences'
import {useSearchPostsQuery} from '#/state/queries/search-posts' import {useSearchPostsQuery} from '#/state/queries/search-posts'
@ -35,6 +35,7 @@ import {useSuggestedFollowsQuery} from '#/state/queries/suggested-follows'
import {useSession} from '#/state/session' import {useSession} from '#/state/session'
import {useSetDrawerOpen} from '#/state/shell' import {useSetDrawerOpen} from '#/state/shell'
import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell' import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell'
import {useNonReactiveCallback} from 'lib/hooks/useNonReactiveCallback'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import { import {
NativeStackScreenProps, NativeStackScreenProps,
@ -308,7 +309,7 @@ function SearchScreenUserResults({
const {_} = useLingui() const {_} = useLingui()
const {data: results, isFetched} = useActorSearch({ const {data: results, isFetched} = useActorSearch({
query, query: query,
enabled: active, enabled: active,
}) })
@ -478,43 +479,25 @@ export function SearchScreen(
const {track} = useAnalytics() const {track} = useAnalytics()
const setDrawerOpen = useSetDrawerOpen() const setDrawerOpen = useSetDrawerOpen()
const moderationOpts = useModerationOpts() const moderationOpts = useModerationOpts()
const search = useActorAutocompleteFn()
const setMinimalShellMode = useSetMinimalShellMode() const setMinimalShellMode = useSetMinimalShellMode()
const {isTabletOrDesktop, isTabletOrMobile} = useWebMediaQueries() const {isTabletOrDesktop, isTabletOrMobile} = useWebMediaQueries()
const searchDebounceTimeout = React.useRef<NodeJS.Timeout | undefined>( // Query terms
undefined, const queryParam = props.route?.params?.q ?? ''
) const [searchText, setSearchText] = React.useState<string>(queryParam)
const [isFetching, setIsFetching] = React.useState<boolean>(false) const {data: autocompleteData, isFetching: isAutocompleteFetching} =
const [query, setQuery] = React.useState<string>(props.route?.params?.q || '') useActorAutocompleteQuery(searchText, true)
const [searchResults, setSearchResults] = React.useState<
AppBskyActorDefs.ProfileViewBasic[] const [showAutocomplete, setShowAutocomplete] = React.useState(false)
>([])
const [inputIsFocused, setInputIsFocused] = React.useState(false)
const [showAutocompleteResults, setShowAutocompleteResults] =
React.useState(false)
const [searchHistory, setSearchHistory] = React.useState<string[]>([]) const [searchHistory, setSearchHistory] = React.useState<string[]>([])
/** useFocusEffect(
* The Search screen's `q` param useNonReactiveCallback(() => {
*/ if (isWeb) {
const queryParam = props.route?.params?.q setSearchText(queryParam)
}
/** }),
* 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(() => { React.useEffect(() => {
const loadSearchHistory = async () => { const loadSearchHistory = async () => {
@ -536,60 +519,45 @@ export function SearchScreen(
setDrawerOpen(true) setDrawerOpen(true)
}, [track, setDrawerOpen]) }, [track, setDrawerOpen])
const onPressCancelSearch = React.useCallback(() => {
scrollToTopWeb()
textInput.current?.blur()
setQuery('')
setShowAutocompleteResults(false)
if (searchDebounceTimeout.current)
clearTimeout(searchDebounceTimeout.current)
}, [textInput])
const onPressClearQuery = React.useCallback(() => { const onPressClearQuery = React.useCallback(() => {
scrollToTopWeb() scrollToTopWeb()
setQuery('') setSearchText('')
setShowAutocompleteResults(false) textInput.current?.focus()
}, [setQuery]) }, [])
const onChangeText = React.useCallback( const onPressCancelSearch = React.useCallback(() => {
async (text: string) => { scrollToTopWeb()
scrollToTopWeb()
setQuery(text) if (showAutocomplete) {
textInput.current?.blur()
if (text.length > 0) { setShowAutocomplete(false)
setIsFetching(true) setSearchText(queryParam)
setShowAutocompleteResults(true) } else {
// If we just `setParams` and set `q` to an empty string, the URL still displays `q=`, which isn't pretty.
if (searchDebounceTimeout.current) { // However, `.replace()` on native has a "push" animation that we don't want. So we need to handle these
clearTimeout(searchDebounceTimeout.current) // differently.
} if (isWeb) {
navigation.replace('Search', {})
searchDebounceTimeout.current = setTimeout(async () => {
const results = await search({query: text, limit: 30})
if (results) {
setSearchResults(results)
setIsFetching(false)
}
}, 300)
} else { } else {
if (searchDebounceTimeout.current) { setSearchText('')
clearTimeout(searchDebounceTimeout.current) navigation.setParams({q: ''})
}
setSearchResults([])
setIsFetching(false)
setShowAutocompleteResults(false)
} }
}, }
[setQuery, search, setSearchResults], }, [showAutocomplete, navigation, queryParam])
)
const onChangeText = React.useCallback(async (text: string) => {
scrollToTopWeb()
setSearchText(text)
}, [])
const updateSearchHistory = React.useCallback( const updateSearchHistory = React.useCallback(
async (newQuery: string) => { async (newQuery: string) => {
newQuery = newQuery.trim() newQuery = newQuery.trim()
if (newQuery && !searchHistory.includes(newQuery)) { if (newQuery) {
let newHistory = [newQuery, ...searchHistory] let newHistory = [
newQuery,
...searchHistory.filter(q => q !== newQuery),
]
if (newHistory.length > 5) { if (newHistory.length > 5) {
newHistory = newHistory.slice(0, 5) newHistory = newHistory.slice(0, 5)
@ -609,11 +577,30 @@ export function SearchScreen(
[searchHistory, setSearchHistory], [searchHistory, setSearchHistory],
) )
const navigateToItem = React.useCallback(
(item: string) => {
scrollToTopWeb()
setShowAutocomplete(false)
updateSearchHistory(item)
if (isWeb) {
navigation.push('Search', {q: item})
} else {
textInput.current?.blur()
navigation.setParams({q: item})
}
},
[updateSearchHistory, navigation],
)
const onSubmit = React.useCallback(() => { const onSubmit = React.useCallback(() => {
scrollToTopWeb() navigateToItem(searchText)
setShowAutocompleteResults(false) }, [navigateToItem, searchText])
updateSearchHistory(query)
}, [query, setShowAutocompleteResults, updateSearchHistory]) const handleHistoryItemClick = (item: string) => {
setSearchText(item)
navigateToItem(item)
}
const onSoftReset = React.useCallback(() => { const onSoftReset = React.useCallback(() => {
scrollToTopWeb() scrollToTopWeb()
@ -621,9 +608,9 @@ export function SearchScreen(
}, [onPressCancelSearch]) }, [onPressCancelSearch])
const queryMaybeHandle = React.useMemo(() => { const queryMaybeHandle = React.useMemo(() => {
const match = MATCH_HANDLE.exec(query) const match = MATCH_HANDLE.exec(queryParam)
return match && match[1] return match && match[1]
}, [query]) }, [queryParam])
useFocusEffect( useFocusEffect(
React.useCallback(() => { React.useCallback(() => {
@ -632,11 +619,6 @@ export function SearchScreen(
}, [onSoftReset, setMinimalShellMode]), }, [onSoftReset, setMinimalShellMode]),
) )
const handleHistoryItemClick = (item: React.SetStateAction<string>) => {
setQuery(item)
onSubmit()
}
const handleRemoveHistoryItem = (itemToRemove: string) => { const handleRemoveHistoryItem = (itemToRemove: string) => {
const updatedHistory = searchHistory.filter(item => item !== itemToRemove) const updatedHistory = searchHistory.filter(item => item !== itemToRemove)
setSearchHistory(updatedHistory) setSearchHistory(updatedHistory)
@ -688,17 +670,21 @@ export function SearchScreen(
ref={textInput} ref={textInput}
placeholder={_(msg`Search`)} placeholder={_(msg`Search`)}
placeholderTextColor={pal.colors.textLight} placeholderTextColor={pal.colors.textLight}
selectTextOnFocus selectTextOnFocus={isNative}
returnKeyType="search" returnKeyType="search"
value={query} value={searchText}
style={[pal.text, styles.headerSearchInput]} style={[pal.text, styles.headerSearchInput]}
keyboardAppearance={theme.colorScheme} keyboardAppearance={theme.colorScheme}
onFocus={() => setInputIsFocused(true)} onFocus={() => {
onBlur={() => { if (isWeb) {
// HACK // Prevent a jump on iPad by ensuring that
// give 100ms to not stop click handlers in the search history // the initial focused render has no result list.
// -prf requestAnimationFrame(() => {
setTimeout(() => setInputIsFocused(false), 100) setShowAutocomplete(true)
})
} else {
setShowAutocomplete(true)
}
}} }}
onChangeText={onChangeText} onChangeText={onChangeText}
onSubmitEditing={onSubmit} onSubmitEditing={onSubmit}
@ -710,7 +696,7 @@ export function SearchScreen(
autoComplete="off" autoComplete="off"
autoCapitalize="none" autoCapitalize="none"
/> />
{query ? ( {showAutocomplete ? (
<Pressable <Pressable
testID="searchTextInputClearBtn" testID="searchTextInputClearBtn"
onPress={onPressClearQuery} onPress={onPressClearQuery}
@ -727,7 +713,7 @@ export function SearchScreen(
) : undefined} ) : undefined}
</View> </View>
{query || inputIsFocused ? ( {(queryParam || showAutocomplete) && (
<View style={styles.headerCancelBtn}> <View style={styles.headerCancelBtn}>
<Pressable <Pressable
onPress={onPressCancelSearch} onPress={onPressCancelSearch}
@ -738,12 +724,13 @@ export function SearchScreen(
</Text> </Text>
</Pressable> </Pressable>
</View> </View>
) : undefined} )}
</CenteredView> </CenteredView>
{showAutocompleteResults ? ( {showAutocomplete && searchText.length > 0 ? (
<> <>
{isFetching || !moderationOpts ? ( {(isAutocompleteFetching && !autocompleteData?.length) ||
!moderationOpts ? (
<Loader /> <Loader />
) : ( ) : (
<ScrollView <ScrollView
@ -753,12 +740,12 @@ export function SearchScreen(
keyboardShouldPersistTaps="handled" keyboardShouldPersistTaps="handled"
keyboardDismissMode="on-drag"> keyboardDismissMode="on-drag">
<SearchLinkCard <SearchLinkCard
label={_(msg`Search for "${query}"`)} label={_(msg`Search for "${searchText}"`)}
onPress={isNative ? onSubmit : undefined} onPress={isNative ? onSubmit : undefined}
to={ to={
isNative isNative
? undefined ? undefined
: `/search?q=${encodeURIComponent(query)}` : `/search?q=${encodeURIComponent(searchText)}`
} }
style={{borderBottomWidth: 1}} style={{borderBottomWidth: 1}}
/> />
@ -770,11 +757,18 @@ export function SearchScreen(
/> />
) : null} ) : null}
{searchResults.map(item => ( {autocompleteData?.map(item => (
<SearchProfileCard <SearchProfileCard
key={item.did} key={item.did}
profile={item} profile={item}
moderation={moderateProfile(item, moderationOpts)} moderation={moderateProfile(item, moderationOpts)}
onPress={() => {
if (isWeb) {
setShowAutocomplete(false)
} else {
textInput.current?.blur()
}
}}
/> />
))} ))}
@ -782,7 +776,7 @@ export function SearchScreen(
</ScrollView> </ScrollView>
)} )}
</> </>
) : !query && inputIsFocused ? ( ) : !queryParam && showAutocomplete ? (
<CenteredView <CenteredView
sideBorders={isTabletOrDesktop} sideBorders={isTabletOrDesktop}
// @ts-ignore web only -prf // @ts-ignore web only -prf
@ -826,10 +820,8 @@ export function SearchScreen(
)} )}
</View> </View>
</CenteredView> </CenteredView>
) : routeParamsMismatch ? (
<ActivityIndicator />
) : ( ) : (
<SearchScreenInner query={query} /> <SearchScreenInner query={queryParam} />
)} )}
</View> </View>
) )

108
src/view/shell/desktop/Search.tsx
View File

@ -1,33 +1,35 @@
import React from 'react' import React from 'react'
import { import {
ViewStyle,
TextInput,
View,
StyleSheet,
TouchableOpacity,
ActivityIndicator, ActivityIndicator,
StyleSheet,
TextInput,
TouchableOpacity,
View,
ViewStyle,
} from 'react-native' } from 'react-native'
import {useNavigation, StackActions} from '@react-navigation/native'
import { import {
AppBskyActorDefs, AppBskyActorDefs,
moderateProfile, moderateProfile,
ModerationDecision, ModerationDecision,
} from '@atproto/api' } from '@atproto/api'
import {Trans, msg} from '@lingui/macro' import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {StackActions, useNavigation} from '@react-navigation/native'
import {useQueryClient} from '@tanstack/react-query'
import {s} from '#/lib/styles' import {makeProfileLink} from '#/lib/routes/links'
import {sanitizeDisplayName} from '#/lib/strings/display-names' import {sanitizeDisplayName} from '#/lib/strings/display-names'
import {sanitizeHandle} from '#/lib/strings/handles' import {sanitizeHandle} from '#/lib/strings/handles'
import {makeProfileLink} from '#/lib/routes/links' import {s} from '#/lib/styles'
import {Link} from '#/view/com/util/Link' import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
import {useModerationOpts} from '#/state/queries/preferences'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {MagnifyingGlassIcon2} from 'lib/icons' import {MagnifyingGlassIcon2} from 'lib/icons'
import {NavigationProp} from 'lib/routes/types' import {NavigationProp} from 'lib/routes/types'
import {Text} from 'view/com/util/text/Text' import {precacheProfile} from 'state/queries/profile'
import {Link} from '#/view/com/util/Link'
import {UserAvatar} from '#/view/com/util/UserAvatar' import {UserAvatar} from '#/view/com/util/UserAvatar'
import {useActorAutocompleteFn} from '#/state/queries/actor-autocomplete' import {Text} from 'view/com/util/text/Text'
import {useModerationOpts} from '#/state/queries/preferences'
export const MATCH_HANDLE = export const MATCH_HANDLE =
/@?([a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*(?:\.[a-zA-Z]{2,}))/ /@?([a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*(?:\.[a-zA-Z]{2,}))/
@ -84,11 +86,19 @@ export function SearchLinkCard({
export function SearchProfileCard({ export function SearchProfileCard({
profile, profile,
moderation, moderation,
onPress: onPressInner,
}: { }: {
profile: AppBskyActorDefs.ProfileViewBasic profile: AppBskyActorDefs.ProfileViewBasic
moderation: ModerationDecision moderation: ModerationDecision
onPress: () => void
}) { }) {
const pal = usePalette('default') const pal = usePalette('default')
const queryClient = useQueryClient()
const onPress = React.useCallback(() => {
precacheProfile(queryClient, profile)
onPressInner()
}, [queryClient, profile, onPressInner])
return ( return (
<Link <Link
@ -96,7 +106,8 @@ export function SearchProfileCard({
href={makeProfileLink(profile)} href={makeProfileLink(profile)}
title={profile.handle} title={profile.handle}
asAnchor asAnchor
anchorNoUnderline> anchorNoUnderline
onBeforePress={onPress}>
<View <View
style={[ style={[
pal.border, pal.border,
@ -138,63 +149,35 @@ export function DesktopSearch() {
const {_} = useLingui() const {_} = useLingui()
const pal = usePalette('default') const pal = usePalette('default')
const navigation = useNavigation<NavigationProp>() const navigation = useNavigation<NavigationProp>()
const searchDebounceTimeout = React.useRef<NodeJS.Timeout | undefined>(
undefined,
)
const [isActive, setIsActive] = React.useState<boolean>(false) const [isActive, setIsActive] = React.useState<boolean>(false)
const [isFetching, setIsFetching] = React.useState<boolean>(false)
const [query, setQuery] = React.useState<string>('') const [query, setQuery] = React.useState<string>('')
const [searchResults, setSearchResults] = React.useState< const {data: autocompleteData, isFetching} = useActorAutocompleteQuery(
AppBskyActorDefs.ProfileViewBasic[] query,
>([]) true,
)
const moderationOpts = useModerationOpts() const moderationOpts = useModerationOpts()
const search = useActorAutocompleteFn()
const onChangeText = React.useCallback( const onChangeText = React.useCallback((text: string) => {
async (text: string) => { setQuery(text)
setQuery(text) setIsActive(text.length > 0)
}, [])
if (text.length > 0) {
setIsFetching(true)
setIsActive(true)
if (searchDebounceTimeout.current)
clearTimeout(searchDebounceTimeout.current)
searchDebounceTimeout.current = setTimeout(async () => {
const results = await search({query: text})
if (results) {
setSearchResults(results)
setIsFetching(false)
}
}, 300)
} else {
if (searchDebounceTimeout.current)
clearTimeout(searchDebounceTimeout.current)
setSearchResults([])
setIsFetching(false)
setIsActive(false)
}
},
[setQuery, search, setSearchResults],
)
const onPressCancelSearch = React.useCallback(() => { const onPressCancelSearch = React.useCallback(() => {
setQuery('') setQuery('')
setIsActive(false) setIsActive(false)
if (searchDebounceTimeout.current)
clearTimeout(searchDebounceTimeout.current)
}, [setQuery]) }, [setQuery])
const onSubmit = React.useCallback(() => { const onSubmit = React.useCallback(() => {
setIsActive(false) setIsActive(false)
if (!query.length) return if (!query.length) return
setSearchResults([])
if (searchDebounceTimeout.current)
clearTimeout(searchDebounceTimeout.current)
navigation.dispatch(StackActions.push('Search', {q: query})) navigation.dispatch(StackActions.push('Search', {q: query}))
}, [query, navigation, setSearchResults]) }, [query, navigation])
const onSearchProfileCardPress = React.useCallback(() => {
setQuery('')
setIsActive(false)
}, [])
const queryMaybeHandle = React.useMemo(() => { const queryMaybeHandle = React.useMemo(() => {
const match = MATCH_HANDLE.exec(query) const match = MATCH_HANDLE.exec(query)
@ -246,7 +229,7 @@ export function DesktopSearch() {
{query !== '' && isActive && moderationOpts && ( {query !== '' && isActive && moderationOpts && (
<View style={[pal.view, pal.borderDark, styles.resultsContainer]}> <View style={[pal.view, pal.borderDark, styles.resultsContainer]}>
{isFetching ? ( {isFetching && !autocompleteData?.length ? (
<View style={{padding: 8}}> <View style={{padding: 8}}>
<ActivityIndicator /> <ActivityIndicator />
</View> </View>
@ -255,7 +238,11 @@ export function DesktopSearch() {
<SearchLinkCard <SearchLinkCard
label={_(msg`Search for "${query}"`)} label={_(msg`Search for "${query}"`)}
to={`/search?q=${encodeURIComponent(query)}`} to={`/search?q=${encodeURIComponent(query)}`}
style={{borderBottomWidth: 1}} style={
queryMaybeHandle || (autocompleteData?.length ?? 0) > 0
? {borderBottomWidth: 1}
: undefined
}
/> />
{queryMaybeHandle ? ( {queryMaybeHandle ? (
@ -265,11 +252,12 @@ export function DesktopSearch() {
/> />
) : null} ) : null}
{searchResults.map(item => ( {autocompleteData?.map(item => (
<SearchProfileCard <SearchProfileCard
key={item.did} key={item.did}
profile={item} profile={item}
moderation={moderateProfile(item, moderationOpts)} moderation={moderateProfile(item, moderationOpts)}
onPress={onSearchProfileCardPress}
/> />
))} ))}
</> </>