Add search event analytics (#9949)

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
+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"
/>
</>
+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'} />
)}
+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"