acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Add search event analytics (#9949)

Browse Source 
Co-authored-by: Eric Bailey <git@esb.lol>
This commit is contained in:
DS Boyce
2026-03-03 12:49:38 -08:00
committed by GitHub
parent 37a82761f5
commit 7dc3b4fa8e
10 changed files with 291 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/analytics/metrics/types.ts
+26
View File
@@ -649,6 +649,32 @@ export type Events = {
tab: string
}
'search:query': {
source: 'typed' | 'history' | 'autocomplete'
}
'search:results:loaded': {
tab: 'top' | 'latest' | 'people' | 'feeds'
initialCount: number
}
'search:result:press': {
tab?: 'top' | 'latest' | 'people' | 'feeds'
resultType: 'post' | 'profile' | 'feed'
position: number
uri: string
}
'search:recent:press': {
profileDid: string
position: number
}
'search:autocomplete:press': {
profileDid: string
position: number
}
'progressGuide:hide': {}
'progressGuide:followDialog:open': {}
src/components/FeedCard.tsx
+23 -25
View File
@@ -1,4 +1,4 @@
import React, {useMemo} from 'react'
import {useCallback, useEffect, useMemo} from 'react'
import {type GestureResponderEvent, View} from 'react-native'
import {
type AppBskyFeedDefs,
@@ -6,9 +6,7 @@ import {
AtUri,
RichText as RichTextApi,
} from '@atproto/api'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {Plural, Trans} from '@lingui/react/macro'
import {Plural, Trans, useLingui} from '@lingui/react/macro'
import {useQueryClient} from '@tanstack/react-query'
import {sanitizeHandle} from '#/lib/strings/handles'
@@ -73,11 +71,11 @@ export function Link({
}: Props & Omit<LinkProps, 'to' | 'label'>) {
const queryClient = useQueryClient()
const href = React.useMemo(() => {
const href = useMemo(() => {
return createProfileFeedHref({feed: view})
}, [view])
React.useEffect(() => {
useEffect(() => {
precacheFeedFromGeneratorView(queryClient, view)
}, [view, queryClient])
@@ -212,7 +210,7 @@ export function Description({
description,
...rest
}: {description?: string} & Partial<RichTextProps>) {
const rt = React.useMemo(() => {
const rt = useMemo(() => {
if (!description) return
const rt = new RichTextApi({text: description || ''})
rt.detectFacetsWithoutResolution()
@@ -279,7 +277,7 @@ function SaveButtonInner({
pin?: boolean
text?: boolean
} & Partial<ButtonProps>) {
const {_} = useLingui()
const {t: l} = useLingui()
const {data: preferences} = usePreferencesQuery()
const {isPending: isAddSavedFeedPending, mutateAsync: saveFeeds} =
useAddSavedFeedsMutation()
@@ -289,13 +287,13 @@ function SaveButtonInner({
const uri = view.uri
const type = view.uri.includes('app.bsky.feed.generator') ? 'feed' : 'list'
const savedFeedConfig = React.useMemo(() => {
const savedFeedConfig = useMemo(() => {
return preferences?.savedFeeds?.find(feed => feed.value === uri)
}, [preferences?.savedFeeds, uri])
const removePromptControl = Prompt.usePromptControl()
const isPending = isAddSavedFeedPending || isRemovePending
const toggleSave = React.useCallback(
const toggleSave = useCallback(
async (e: GestureResponderEvent) => {
e.preventDefault()
e.stopPropagation()
@@ -312,17 +310,17 @@ function SaveButtonInner({
},
])
}
Toast.show(_(msg({message: 'Feeds updated!', context: 'toast'})))
Toast.show(l({message: 'Feeds updated!', context: 'toast'}))
} catch (err: any) {
logger.error(err, {message: `FeedCard: failed to update feeds`, pin})
Toast.show(_(msg`Failed to update feeds`), 'xmark')
Toast.show(l`Failed to update feeds`, 'xmark')
}
},
[_, pin, saveFeeds, removeFeed, uri, savedFeedConfig, type],
[l, pin, saveFeeds, removeFeed, uri, savedFeedConfig, type],
)
const onPrompRemoveFeed = React.useCallback(
async (e: GestureResponderEvent) => {
const onPromptRemoveFeed = useCallback(
(e: GestureResponderEvent) => {
e.preventDefault()
e.stopPropagation()
@@ -335,11 +333,13 @@ function SaveButtonInner({
<>
<Button
disabled={isPending}
label={_(msg`Add this feed to your feeds`)}
label={l`Add this feed to your feeds`}
size="small"
variant="solid"
color={savedFeedConfig ? 'secondary' : 'primary'}
onPress={savedFeedConfig ? onPrompRemoveFeed : toggleSave}
onPress={(e: GestureResponderEvent) =>
savedFeedConfig ? onPromptRemoveFeed(e) : void toggleSave(e)
}
{...buttonProps}>
{savedFeedConfig ? (
<>
@@ -350,7 +350,7 @@ function SaveButtonInner({
)}
{text && (
<ButtonText>
<Trans>Unpin Feed</Trans>
<Trans>Unpin feed</Trans>
</ButtonText>
)}
</>
@@ -359,7 +359,7 @@ function SaveButtonInner({
<ButtonIcon size="md" icon={isPending ? Loader : PinIcon} />
{text && (
<ButtonText>
<Trans>Pin Feed</Trans>
<Trans>Pin feed</Trans>
</ButtonText>
)}
</>
@@ -368,12 +368,10 @@ function SaveButtonInner({
<Prompt.Basic
control={removePromptControl}
title={_(msg`Remove from your feeds?`)}
description={_(
msg`Are you sure you want to remove this from your feeds?`,
)}
onConfirm={toggleSave}
confirmButtonCta={_(msg`Remove`)}
title={l`Remove from your feeds?`}
description={l`Are you sure you want to remove this from your feeds?`}
onConfirm={(e: GestureResponderEvent) => void toggleSave(e)}
confirmButtonCta={l`Remove`}
confirmButtonColor="negative"
/>
</>
src/components/ProfileCard.tsx
+42 -46
View File
@@ -11,8 +11,7 @@ import {
type ModerationOpts,
RichText as RichTextApi,
} from '@atproto/api'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {useLingui} from '@lingui/react/macro'
import {getModerationCauseKey} from '#/lib/moderation'
import {forceLTR} from '#/lib/strings/bidi'
@@ -56,6 +55,7 @@ export function Default({
testID,
position,
contextProfileDid,
onPress,
}: {
profile: bsky.profile.AnyProfileView
moderationOpts: ModerationOpts
@@ -63,9 +63,10 @@ export function Default({
testID?: string
position?: number
contextProfileDid?: string
onPress?: (e: GestureResponderEvent) => void
}) {
return (
<Link testID={testID} profile={profile}>
<Link testID={testID} profile={profile} onPress={onPress}>
<Card
profile={profile}
moderationOpts={moderationOpts}
@@ -135,14 +136,13 @@ export function Link({
}: {
profile: bsky.profile.AnyProfileView
} & Omit<LinkProps, 'to' | 'label'>) {
const {_} = useLingui()
const {t: l} = useLingui()
return (
<InternalLink
label={_(
msg`View ${
profile.displayName || sanitizeHandle(profile.handle)
}'s profile`,
)}
label={l`View ${
profile.displayName || sanitizeHandle(profile.handle)
}’s profile`}
to={{
screen: 'Profile',
params: {name: profile.did},
@@ -488,7 +488,7 @@ export function FollowButtonInner({
contextProfileDid,
...rest
}: FollowButtonProps) {
const {_} = useLingui()
const {t: l} = useLingui()
const profile = useProfileShadow(profileUnshadowed)
const moderation = moderateProfile(profile, moderationOpts)
const [queueFollow, queueUnfollow] = useProfileFollowMutationQueue(
@@ -505,18 +505,17 @@ export function FollowButtonInner({
try {
await queueFollow()
Toast.show(
_(
msg`Following ${sanitizeDisplayName(
profile.displayName || profile.handle,
moderation.ui('displayName'),
)}`,
),
l`Following ${sanitizeDisplayName(
profile.displayName || profile.handle,
moderation.ui('displayName'),
)}`,
)
onPressProp?.(e)
onFollow?.()
} catch (err: any) {
} catch (e) {
const err = e as Error
if (err?.name !== 'AbortError') {
Toast.show(_(msg`An issue occurred, please try again.`), 'xmark')
Toast.show(l`An issue occurred, please try again.`, 'xmark')
}
}
}
@@ -527,40 +526,33 @@ export function FollowButtonInner({
try {
await queueUnfollow()
Toast.show(
_(
msg`No longer following ${sanitizeDisplayName(
profile.displayName || profile.handle,
moderation.ui('displayName'),
)}`,
),
l`No longer following ${sanitizeDisplayName(
profile.displayName || profile.handle,
moderation.ui('displayName'),
)}`,
)
onPressProp?.(e)
} catch (err: any) {
} catch (e) {
const err = e as Error
if (err?.name !== 'AbortError') {
Toast.show(_(msg`An issue occurred, please try again.`), 'xmark')
Toast.show(l`An issue occurred, please try again.`, 'xmark')
}
}
}
const unfollowLabel = _(
msg({
message: 'Following',
comment: 'User is following this account, click to unfollow',
}),
)
const unfollowLabel = l({
message: 'Following',
comment: 'User is following this account, click to unfollow',
})
const followLabel = profile.viewer?.followedBy
? _(
msg({
message: 'Follow back',
comment: 'User is not following this account, click to follow back',
}),
)
: _(
msg({
message: 'Follow',
comment: 'User is not following this account, click to follow',
}),
)
? l({
message: 'Follow back',
comment: 'User is not following this account, click to follow back',
})
: l({
message: 'Follow',
comment: 'User is not following this account, click to follow',
})
if (!profile.viewer) return null
if (
@@ -579,7 +571,9 @@ export function FollowButtonInner({
variant="solid"
color="secondary"
{...rest}
onPress={onPressUnfollow}>
onPress={(e: GestureResponderEvent) => {
void onPressUnfollow(e)
}}>
{withIcon && (
<ButtonIcon icon={Check} position={isRound ? undefined : 'left'} />
)}
@@ -592,7 +586,9 @@ export function FollowButtonInner({
variant="solid"
color={colorInverted ? 'secondary_inverted' : 'primary'}
{...rest}
onPress={onPressFollow}>
onPress={(e: GestureResponderEvent) => {
void onPressFollow(e)
}}>
{withIcon && (
<ButtonIcon icon={Plus} position={isRound ? undefined : 'left'} />
)}
src/components/forms/SearchInput.tsx
+7 -8
View File
@@ -1,7 +1,6 @@
import React from 'react'
import {forwardRef} from 'react'
import {type TextInput, View} from 'react-native'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {useLingui} from '@lingui/react/macro'
import {HITSLOP_10} from '#/lib/constants'
import {atoms as a, useTheme} from '#/alf'
@@ -19,10 +18,10 @@ type SearchInputProps = Omit<TextField.InputProps, 'label'> & {
onClearText?: () => void
}
export const SearchInput = React.forwardRef<TextInput, SearchInputProps>(
export const SearchInput = forwardRef<TextInput, SearchInputProps>(
function SearchInput({value, label, onClearText, ...rest}, ref) {
const t = useTheme()
const {_} = useLingui()
const {t: l} = useLingui()
const showClear = value && value.length > 0
return (
@@ -31,9 +30,9 @@ export const SearchInput = React.forwardRef<TextInput, SearchInputProps>(
<TextField.Icon icon={MagnifyingGlassIcon} />
<TextField.Input
inputRef={ref}
label={label || _(msg`Search`)}
label={label || l`Search`}
value={value}
placeholder={_(msg`Search`)}
placeholder={l`Search`}
returnKeyType="search"
keyboardAppearance={t.scheme}
selectTextOnFocus={IS_NATIVE}
@@ -67,7 +66,7 @@ export const SearchInput = React.forwardRef<TextInput, SearchInputProps>(
<Button
testID="searchTextInputClearBtn"
onPress={onClearText}
label={_(msg`Clear search query`)}
label={l`Clear search query`}
hitSlop={HITSLOP_10}
size="tiny"
shape="round"
src/screens/Search/SearchResults.tsx
+136 -11
View File
@@ -5,6 +5,7 @@ import {Trans, useLingui} from '@lingui/react/macro'
import {urls} from '#/lib/constants'
import {usePostViewTracking} from '#/lib/hooks/usePostViewTracking'
import {useCallOnce} from '#/lib/once'
import {cleanError} from '#/lib/strings/errors'
import {augmentSearchQuery} from '#/lib/strings/helpers'
import {useActorSearch} from '#/state/queries/actor-search'
@@ -25,6 +26,7 @@ import {InlineLinkText} from '#/components/Link'
import {ListFooter} from '#/components/Lists'
import {SearchError} from '#/components/SearchError'
import {Text} from '#/components/Typography'
import {type Metrics, useAnalytics} from '#/analytics'
import type * as bsky from '#/types/bsky'
let SearchResults = ({
@@ -161,7 +163,12 @@ function EmptyState({
)
}
function NoResultsText({query}: {query: string}) {
function NoResultsText({
query,
}: {
sort?: 'top' | 'latest' | 'people' | 'feeds'
query: string
}) {
const t = useTheme()
const {t: l} = useLingui()
@@ -185,7 +192,7 @@ function NoResultsText({query}: {query: string}) {
})}
to={urls.website.blog.searchTipsAndTricks}
style={[a.text_md, a.leading_snug]}>
read about how to use search filters
read about how to use search filters.
</InlineLinkText>
.
</Trans>
@@ -214,6 +221,7 @@ let SearchScreenPostResults = ({
sort?: 'top' | 'latest'
active: boolean
}): React.ReactNode => {
const ax = useAnalytics()
const {t: l} = useLingui()
const {currentAccount, hasSession} = useSession()
const [isPTR, setIsPTR] = useState(false)
@@ -277,6 +285,19 @@ let SearchScreenPostResults = ({
const closeAllActiveElements = useCloseAllActiveElements()
const {requestSwitchToAccount} = useLoggedOutViewControls()
const fireTracking = useCallOnce(() => {
if (sort) {
// ts only
ax.metric('search:results:loaded', {
tab: sort,
initialCount: items.length,
})
}
})
if (isFetched && sort) {
fireTracking()
}
const showSignIn = () => {
closeAllActiveElements()
requestSwitchToAccount({requestedAccount: 'none'})
@@ -292,7 +313,7 @@ let SearchScreenPostResults = ({
<SearchError title={l`Search is currently unavailable when logged out`}>
<Text style={[a.text_md, a.text_center, a.leading_snug]}>
<Trans>
<InlineLinkText label={l`Sign in`} to={'#'} onPress={showSignIn}>
<InlineLinkText label={l`Sign in`} to="#" onPress={showSignIn}>
Sign in
</InlineLinkText>
<Text style={t.atoms.text_contrast_medium}> or </Text>
@@ -315,7 +336,7 @@ let SearchScreenPostResults = ({
return error ? (
<EmptyState
messageText={l`We're sorry, but your search could not be completed. Please try again in a few minutes.`}
messageText={l`We’re sorry, but your search could not be completed. Please try again in a few minutes.`}
error={cleanError(error)}
/>
) : (
@@ -325,9 +346,17 @@ let SearchScreenPostResults = ({
{posts.length ? (
<List
data={items}
renderItem={({item}: {item: SearchResultSlice}) => {
renderItem={({
item,
index,
}: {
item: SearchResultSlice
index: number
}) => {
if (item.type === 'post') {
return <Post post={item.post} />
return (
<SearchPost from={sort} position={index} post={item.post} />
)
} else {
return null
}
@@ -363,6 +392,29 @@ let SearchScreenPostResults = ({
}
SearchScreenPostResults = memo(SearchScreenPostResults)
function SearchPost({
from,
position,
post,
}: {
from: Metrics['search:result:press']['tab']
position: Metrics['search:result:press']['position']
post: AppBskyFeedDefs.PostView
}) {
const ax = useAnalytics()
const onBeforePress = useCallback(() => {
ax.metric('search:result:press', {
tab: from,
resultType: 'post',
position,
uri: post.uri,
})
}, [ax, from, position, post])
return <Post post={post} onBeforePress={onBeforePress} />
}
let SearchScreenUserResults = ({
query,
active,
@@ -370,6 +422,7 @@ let SearchScreenUserResults = ({
query: string
active: boolean
}): React.ReactNode => {
const ax = useAnalytics()
const {t: l} = useLingui()
const {hasSession} = useSession()
const [isPTR, setIsPTR] = useState(false)
@@ -403,6 +456,16 @@ let SearchScreenUserResults = ({
return results?.pages.flatMap(page => page.actors) || []
}, [results])
const fireTracking = useCallOnce(() => {
ax.metric('search:results:loaded', {
tab: 'people',
initialCount: profiles.length,
})
})
if (isFetched) {
fireTracking()
}
if (error) {
return (
<EmptyState
@@ -417,9 +480,13 @@ let SearchScreenUserResults = ({
{profiles.length ? (
<List
data={profiles}
renderItem={({item}: {item: bsky.profile.AnyProfileView}) => (
<ProfileCardWithFollowBtn profile={item} />
)}
renderItem={({
item,
index,
}: {
item: bsky.profile.AnyProfileView
index: number
}) => <SearchScreenProfileButton position={index} profile={item} />}
keyExtractor={(item: bsky.profile.AnyProfileView) => item.did}
refreshing={isPTR}
onRefresh={() => void onPullToRefresh()}
@@ -442,6 +509,26 @@ let SearchScreenUserResults = ({
}
SearchScreenUserResults = memo(SearchScreenUserResults)
function SearchScreenProfileButton({
position,
profile,
}: {
position: number
profile: bsky.profile.AnyProfileView
}) {
const ax = useAnalytics()
const handlePress = () => {
ax.metric('search:result:press', {
tab: 'people',
resultType: 'profile',
position,
uri: profile.did,
})
}
return <ProfileCardWithFollowBtn profile={profile} onPress={handlePress} />
}
let SearchScreenFeedsResults = ({
query,
active,
@@ -449,6 +536,7 @@ let SearchScreenFeedsResults = ({
query: string
active: boolean
}): React.ReactNode => {
const ax = useAnalytics()
const t = useTheme()
const {data: results, isFetched} = usePopularFeedsSearch({
@@ -456,12 +544,28 @@ let SearchScreenFeedsResults = ({
enabled: active,
})
const fireTracking = useCallOnce(() => {
ax.metric('search:results:loaded', {
tab: 'feeds',
initialCount: results?.length ?? 0,
})
})
if (isFetched) {
fireTracking()
}
return isFetched && results ? (
<>
{results.length ? (
<List
data={results}
renderItem={({item}: {item: AppBskyFeedDefs.GeneratorView}) => (
renderItem={({
item,
index,
}: {
item: AppBskyFeedDefs.GeneratorView
index: number
}) => (
<View
style={[
a.border_t,
@@ -469,7 +573,7 @@ let SearchScreenFeedsResults = ({
a.px_lg,
a.py_lg,
]}>
<FeedCard.Default view={item} />
<SearchFeedCard position={index} view={item} />
</View>
)}
keyExtractor={(item: AppBskyFeedDefs.GeneratorView) => item.uri}
@@ -485,3 +589,24 @@ let SearchScreenFeedsResults = ({
)
}
SearchScreenFeedsResults = memo(SearchScreenFeedsResults)
function SearchFeedCard({
position,
view,
}: {
position: number
view: AppBskyFeedDefs.GeneratorView
}) {
const ax = useAnalytics()
const handleOnPress = () => {
ax.metric('search:result:press', {
tab: 'feeds',
resultType: 'feed',
position,
uri: view.uri,
})
}
return <FeedCard.Default view={view} onPress={handleOnPress} />
}
src/screens/Search/Shell.tsx
+13 -5
View File
@@ -38,6 +38,7 @@ import {Button, ButtonText} from '#/components/Button'
import {SearchInput} from '#/components/forms/SearchInput'
import * as Layout from '#/components/Layout'
import {Text} from '#/components/Typography'
import {useAnalytics} from '#/analytics'
import {IS_WEB} from '#/env'
import {account, useStorage} from '#/storage'
import type * as bsky from '#/types/bsky'
@@ -79,6 +80,7 @@ export function SearchScreenShell({
inputPlaceholder?: string
isExplore?: boolean
}) {
const ax = useAnalytics()
const t = useTheme()
const {gtMobile} = useBreakpoints()
const navigation = useNavigation<NavigationProp>()
@@ -225,9 +227,15 @@ export function SearchScreenShell({
}
}, [setShowAutocomplete, setSearchText, navigation, route.params, route.name])
const onSubmit = useCallback(() => {
navigateToItem(searchText)
}, [navigateToItem, searchText])
const onSubmit = useCallback(
(source: 'typed' | 'autocomplete') => () => {
ax.metric('search:query', {
source,
})
navigateToItem(searchText)
},
[ax, navigateToItem, searchText],
)
const onAutocompleteResultPress = useCallback(() => {
if (IS_WEB) {
@@ -367,7 +375,7 @@ export function SearchScreenShell({
onFocus={onSearchInputFocus}
onChangeText={onChangeText}
onClearText={onPressClearQuery}
onSubmitEditing={onSubmit}
onSubmitEditing={onSubmit('typed')}
placeholder={
inputPlaceholder ?? l`Search for posts, users, or feeds`
}
@@ -420,7 +428,7 @@ export function SearchScreenShell({
isAutocompleteFetching={isAutocompleteFetching}
autocompleteData={autocompleteData}
searchText={searchText}
onSubmit={onSubmit}
onSubmit={onSubmit('autocomplete')}
onResultPress={onAutocompleteResultPress}
onProfileClick={handleProfileClick}
/>
src/screens/Search/components/AutocompleteResults.tsx
+7 -1
View File
@@ -9,6 +9,7 @@ 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'
import {useAnalytics} from '#/analytics'
import {IS_NATIVE} from '#/env'
let AutocompleteResults = ({
@@ -26,6 +27,7 @@ let AutocompleteResults = ({
onResultPress: () => void
onProfileClick: (profile: AppBskyActorDefs.ProfileViewBasic) => void
}): React.ReactNode => {
const ax = useAnalytics()
const {_} = useLingui()
const moderationOpts = useModerationOpts()
return (
@@ -51,12 +53,16 @@ let AutocompleteResults = ({
}
style={a.border_b}
/>
{autocompleteData?.map(item => (
{autocompleteData?.map((item, index) => (
<SearchProfileCard
key={item.did}
profile={item}
moderationOpts={moderationOpts}
onPress={() => {
ax.metric('search:autocomplete:press', {
profileDid: item.did,
position: index,
})
onProfileClick(item)
onResultPress()
}}
src/screens/Search/components/SearchHistory.tsx
+22 -11
View File
@@ -1,8 +1,6 @@
import {Pressable, ScrollView, View} from 'react-native'
import {moderateProfile, type ModerationOpts} from '@atproto/api'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro'
import {Trans, useLingui} from '@lingui/react/macro'
import {createHitslop, HITSLOP_10} from '#/lib/constants'
import {makeProfileLink} from '#/lib/routes/links'
@@ -19,6 +17,7 @@ import {Link} from '#/components/Link'
import {Text} from '#/components/Typography'
import {useSimpleVerificationState} from '#/components/verification'
import {VerificationCheck} from '#/components/verification/VerificationCheck'
import {useAnalytics} from '#/analytics'
import type * as bsky from '#/types/bsky'
export function SearchHistory({
@@ -36,7 +35,8 @@ export function SearchHistory({
onRemoveItemClick: (item: string) => void
onRemoveProfileClick: (profile: bsky.profile.AnyProfileView) => void
}) {
const {_} = useLingui()
const ax = useAnalytics()
const {t: l} = useLingui()
const moderationOpts = useModerationOpts()
return (
@@ -47,7 +47,7 @@ export function SearchHistory({
{(searchHistory.length > 0 || selectedProfiles.length > 0) && (
<View style={[a.px_lg, a.pt_sm]}>
<Text style={[a.text_md, a.font_semi_bold]}>
<Trans>Recent Searches</Trans>
<Trans>Recent searches</Trans>
</Text>
</View>
)}
@@ -66,12 +66,18 @@ export function SearchHistory({
a.gap_xl,
]}>
{moderationOpts &&
selectedProfiles.map(profile => (
selectedProfiles.map((profile, index) => (
<RecentProfileItem
key={profile.did}
profile={profile}
moderationOpts={moderationOpts}
onPress={() => onProfileClick(profile)}
onPress={() => {
ax.metric('search:recent:press', {
profileDid: profile.did,
position: index,
})
onProfileClick(profile)
}}
onRemove={() => onRemoveProfileClick(profile)}
/>
))}
@@ -86,13 +92,18 @@ export function SearchHistory({
<View key={index} style={[a.flex_row, a.align_center]}>
<Pressable
accessibilityRole="button"
onPress={() => onItemClick(historyItem)}
onPress={() => {
ax.metric('search:query', {
source: 'history',
})
onItemClick(historyItem)
}}
hitSlop={HITSLOP_10}
style={[a.flex_1, a.py_sm]}>
<Text style={[a.text_md]}>{historyItem}</Text>
</Pressable>
<Button
label={_(msg`Remove ${historyItem}`)}
label={l`Remove ${historyItem}`}
onPress={() => onRemoveItemClick(historyItem)}
size="small"
variant="ghost"
@@ -120,7 +131,7 @@ function RecentProfileItem({
onPress: () => void
onRemove: () => void
}) {
const {_} = useLingui()
const {t: l} = useLingui()
const width = 80
const moderation = moderateProfile(profile, moderationOpts)
@@ -165,7 +176,7 @@ function RecentProfileItem({
</View>
</Link>
<Button
label={_(msg`Remove profile`)}
label={l`Remove profile`}
hitSlop={createHitslop(6)}
size="tiny"
variant="outline"
src/view/com/profile/ProfileCard.tsx
+4 -1
View File
@@ -1,4 +1,4 @@
import {View} from 'react-native'
import {type GestureResponderEvent, View} from 'react-native'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {atoms as a, useTheme} from '#/alf'
@@ -11,12 +11,14 @@ export function ProfileCardWithFollowBtn({
logContext = 'ProfileCard',
position,
contextProfileDid,
onPress,
}: {
profile: bsky.profile.AnyProfileView
noBorder?: boolean
logContext?: 'ProfileCard' | 'StarterPackProfilesList'
position?: number
contextProfileDid?: string
onPress?: (e: GestureResponderEvent) => void
}) {
const t = useTheme()
const moderationOpts = useModerationOpts()
@@ -36,6 +38,7 @@ export function ProfileCardWithFollowBtn({
logContext={logContext}
position={position}
contextProfileDid={contextProfileDid}
onPress={onPress}
/>
</View>
)
src/view/shell/desktop/Search.tsx
+11 -12
View File
@@ -1,4 +1,4 @@
import React from 'react'
import {memo, useCallback, useState} from 'react'
import {
ActivityIndicator,
StyleSheet,
@@ -6,8 +6,7 @@ import {
View,
type ViewStyle,
} from 'react-native'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {useLingui} from '@lingui/react/macro'
import {StackActions, useNavigation} from '@react-navigation/native'
import {usePalette} from '#/lib/hooks/usePalette'
@@ -68,15 +67,15 @@ let SearchLinkCard = ({
</Link>
)
}
SearchLinkCard = React.memo(SearchLinkCard)
SearchLinkCard = memo(SearchLinkCard)
export {SearchLinkCard}
export function DesktopSearch() {
const {_} = useLingui()
const {t: l} = useLingui()
const pal = usePalette('default')
const navigation = useNavigation<NavigationProp>()
const [isActive, setIsActive] = React.useState<boolean>(false)
const [query, setQuery] = React.useState<string>('')
const [isActive, setIsActive] = useState<boolean>(false)
const [query, setQuery] = useState<string>('')
const {data: autocompleteData, isFetching} = useActorAutocompleteQuery(
query,
true,
@@ -84,23 +83,23 @@ export function DesktopSearch() {
const moderationOpts = useModerationOpts()
const onChangeText = React.useCallback((text: string) => {
const onChangeText = useCallback((text: string) => {
setQuery(text)
setIsActive(text.length > 0)
}, [])
const onPressCancelSearch = React.useCallback(() => {
const onPressCancelSearch = useCallback(() => {
setQuery('')
setIsActive(false)
}, [setQuery])
const onSubmit = React.useCallback(() => {
const onSubmit = useCallback(() => {
setIsActive(false)
if (!query.length) return
navigation.dispatch(StackActions.push('Search', {q: query}))
}, [query, navigation])
const onSearchProfileCardPress = React.useCallback(() => {
const onSearchProfileCardPress = useCallback(() => {
setQuery('')
setIsActive(false)
}, [])
@@ -128,7 +127,7 @@ export function DesktopSearch() {
) : (
<>
<SearchLinkCard
label={_(msg`Search for "${query}"`)}
label={l`Search for "${query}"`}
to={`/search?q=${encodeURIComponent(query)}`}
style={
(autocompleteData?.length ?? 0) > 0