Add search event analytics (#9949)
Co-authored-by: Eric Bailey <git@esb.lol>
This commit is contained in:
+23
-25
@@ -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"
|
||||
/>
|
||||
</>
|
||||
|
||||
@@ -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'} />
|
||||
)}
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user