diff --git a/src/screens/Search/components/AutocompleteResults.tsx b/src/screens/Search/components/AutocompleteResults.tsx index 58a0dec779..b3bccd1d4b 100644 --- a/src/screens/Search/components/AutocompleteResults.tsx +++ b/src/screens/Search/components/AutocompleteResults.tsx @@ -1,12 +1,13 @@ import {memo} from 'react' import {ActivityIndicator, View} from 'react-native' -import {type AppBskyActorDefs, moderateProfile} from '@atproto/api' +import {type AppBskyActorDefs} from '@atproto/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {isNative} from '#/platform/detection' import {useModerationOpts} from '#/state/preferences/moderation-opts' -import {SearchLinkCard, SearchProfileCard} from '#/view/shell/desktop/Search' +import {SearchLinkCard} from '#/view/shell/desktop/Search' +import {SearchProfileCard} from '#/screens/Search/components/SearchProfileCard' import {atoms as a, native} from '#/alf' import * as Layout from '#/components/Layout' @@ -25,8 +26,8 @@ let AutocompleteResults = ({ onResultPress: () => void onProfileClick: (profile: AppBskyActorDefs.ProfileViewBasic) => void }): React.ReactNode => { - const moderationOpts = useModerationOpts() const {_} = useLingui() + const moderationOpts = useModerationOpts() return ( <> {(isAutocompleteFetching && !autocompleteData?.length) || @@ -54,7 +55,7 @@ let AutocompleteResults = ({ { onProfileClick(item) onResultPress() diff --git a/src/screens/Search/components/SearchProfileCard.tsx b/src/screens/Search/components/SearchProfileCard.tsx new file mode 100644 index 0000000000..69a12cc0ae --- /dev/null +++ b/src/screens/Search/components/SearchProfileCard.tsx @@ -0,0 +1,62 @@ +import {useCallback} from 'react' +import {View} from 'react-native' +import {type AppBskyActorDefs, type ModerationOpts} from '@atproto/api' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useQueryClient} from '@tanstack/react-query' + +import {makeProfileLink} from '#/lib/routes/links' +import {unstableCacheProfileView} from '#/state/queries/unstable-profile-cache' +import {atoms as a, useTheme} from '#/alf' +import {Link} from '#/components/Link' +import * as ProfileCard from '#/components/ProfileCard' + +export function SearchProfileCard({ + profile, + moderationOpts, + onPress: onPressInner, +}: { + profile: AppBskyActorDefs.ProfileViewBasic + moderationOpts: ModerationOpts + onPress?: () => void +}) { + const t = useTheme() + const {_} = useLingui() + const qc = useQueryClient() + + const onPress = useCallback(() => { + unstableCacheProfileView(qc, profile) + onPressInner?.() + }, [qc, profile, onPressInner]) + + return ( + + {({hovered, pressed}) => ( + + + + + + + + + )} + + ) +} diff --git a/src/view/shell/desktop/Search.tsx b/src/view/shell/desktop/Search.tsx index de3ccad39b..38da4e2467 100644 --- a/src/view/shell/desktop/Search.tsx +++ b/src/view/shell/desktop/Search.tsx @@ -4,30 +4,19 @@ import { StyleSheet, TouchableOpacity, View, - ViewStyle, + type ViewStyle, } from 'react-native' -import { - AppBskyActorDefs, - moderateProfile, - ModerationDecision, -} from '@atproto/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {StackActions, useNavigation} from '@react-navigation/native' -import {useQueryClient} from '@tanstack/react-query' import {usePalette} from '#/lib/hooks/usePalette' -import {makeProfileLink} from '#/lib/routes/links' -import {NavigationProp} from '#/lib/routes/types' -import {sanitizeDisplayName} from '#/lib/strings/display-names' -import {sanitizeHandle} from '#/lib/strings/handles' -import {s} from '#/lib/styles' +import {type NavigationProp} from '#/lib/routes/types' import {useModerationOpts} from '#/state/preferences/moderation-opts' import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete' -import {precacheProfile} from '#/state/queries/profile' import {Link} from '#/view/com/util/Link' import {Text} from '#/view/com/util/text/Text' -import {UserAvatar} from '#/view/com/util/UserAvatar' +import {SearchProfileCard} from '#/screens/Search/components/SearchProfileCard' import {atoms as a} from '#/alf' import {SearchInput} from '#/components/forms/SearchInput' @@ -82,71 +71,6 @@ let SearchLinkCard = ({ SearchLinkCard = React.memo(SearchLinkCard) export {SearchLinkCard} -let SearchProfileCard = ({ - profile, - moderation, - onPress: onPressInner, -}: { - profile: AppBskyActorDefs.ProfileViewBasic - moderation: ModerationDecision - onPress: () => void -}): React.ReactNode => { - const pal = usePalette('default') - const queryClient = useQueryClient() - - const onPress = React.useCallback(() => { - precacheProfile(queryClient, profile) - onPressInner() - }, [queryClient, profile, onPressInner]) - - return ( - - - - - - {sanitizeDisplayName( - profile.displayName || sanitizeHandle(profile.handle), - moderation.ui('displayName'), - )} - - - {sanitizeHandle(profile.handle, '@')} - - - - - ) -} -SearchProfileCard = React.memo(SearchProfileCard) -export {SearchProfileCard} - export function DesktopSearch() { const {_} = useLingui() const pal = usePalette('default') @@ -190,7 +114,13 @@ export function DesktopSearch() { onSubmitEditing={onSubmit} /> {query !== '' && isActive && moderationOpts && ( - + {isFetching && !autocompleteData?.length ? ( @@ -210,7 +140,7 @@ export function DesktopSearch() { ))}