Pass correct log context to suggested user metrics (#10074)

(cherry picked from commit d44060a34e)

src/analytics/metrics/types.ts

@@ -480,10 +480,12 @@ export type Events = {
   'suggestedUser:follow': {
     logContext:
       | 'Explore'
-      | 'InterstitialDiscover'
+      | 'DiscoverInterstitial'
-      | 'InterstitialProfile'
+      | 'ProfileInterstitial'
-      | 'Profile'
+      | 'ProfileHeader'
       | 'Onboarding'
+      | 'SeeMoreSuggestedUsers'
+      | 'ProgressGuide'
     location: 'Card' | 'Profile' | 'FollowAll'
     recId?: number | string
     position: number
@@ -493,9 +495,11 @@ export type Events = {
   'suggestedUser:press': {
     logContext:
       | 'Explore'
-      | 'InterstitialDiscover'
+      | 'DiscoverInterstitial'
-      | 'InterstitialProfile'
+      | 'ProfileInterstitial'
+      | 'ProfileHeader'
       | 'Onboarding'
+      | 'SeeMoreSuggestedUsers'
     recId?: number | string
     position: number
     suggestedDid: string
@@ -504,10 +508,11 @@ export type Events = {
   'suggestedUser:seen': {
     logContext:
       | 'Explore'
-      | 'InterstitialDiscover'
+      | 'DiscoverInterstitial'
-      | 'InterstitialProfile'
+      | 'ProfileInterstitial'
-      | 'Profile'
+      | 'ProfileHeader'
       | 'Onboarding'
+      | 'SeeMoreSuggestedUsers'
       | 'ProgressGuide'
     recId?: number | string
     position: number
@@ -517,14 +522,14 @@ export type Events = {
   'suggestedUser:seeMore': {
     logContext:
       | 'Explore'
-      | 'InterstitialDiscover'
+      | 'DiscoverInterstitial'
-      | 'InterstitialProfile'
+      | 'ProfileInterstitial'
-      | 'Profile'
+      | 'ProfileHeader'
       | 'Onboarding'
     recId?: number | string
   }
   'suggestedUser:dismiss': {
-    logContext: 'InterstitialDiscover' | 'InterstitialProfile'
+    logContext: 'DiscoverInterstitial' | 'ProfileInterstitial' | 'ProfileHeader'
     recId?: number | string
     position: number
     suggestedDid: string

src/components/FeedInterstitials.tsx

@@ -8,9 +8,7 @@ import Animated, {
   LinearTransition,
 } from 'react-native-reanimated'
 import {type AppBskyFeedDefs, AtUri} from '@atproto/api'
-import {msg} from '@lingui/core/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
 import {useNavigation} from '@react-navigation/native'
 
 import {type NavigationProp} from '#/lib/routes/types'
@@ -295,7 +293,7 @@ export function ProfileGrid({
 }) {
   const t = useTheme()
   const ax = useAnalytics()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const moderationOpts = useModerationOpts()
   const {gtMobile} = useBreakpoints()
   const followDialogControl = useDialogControl()
@@ -312,10 +310,10 @@ export function ProfileGrid({
   const containerRef = useRef<View>(null)
   const hasTrackedRef = useRef(false)
   const logContext: Metrics['suggestedUser:seen']['logContext'] = isFeedContext
-    ? 'InterstitialDiscover'
+    ? 'DiscoverInterstitial'
     : isProfileHeaderContext
-      ? 'Profile'
+      ? 'ProfileHeader'
-      : 'InterstitialProfile'
+      : 'ProfileInterstitial'
 
   // Callback to fire seen events
   const fireSeen = useCallback(() => {
@@ -336,7 +334,7 @@ export function ProfileGrid({
         })
       }
     })
-  }, [ax, isLoading, error, profiles, maxLength, logContext])
+  }, [isLoading, error, profiles, maxLength, ax, logContext])
 
   // For profile header, fire when isVisible becomes true
   useEffect(() => {
@@ -424,9 +422,7 @@ export function ProfileGrid({
               profile={profile.actor}
               onPress={() => {
                 ax.metric('suggestedUser:press', {
-                  logContext: isFeedContext
+                  logContext,
-                    ? 'InterstitialDiscover'
-                    : 'InterstitialProfile',
                   recId: profile.recId,
                   position: index,
                   suggestedDid: profile.actor.did,
@@ -442,14 +438,12 @@ export function ProfileGrid({
                   <ProfileCard.Outer>
                     {onDismiss && (
                       <Button
-                        label={_(msg`Dismiss this suggestion`)}
+                        label={l`Dismiss this suggestion`}
                         onPress={e => {
                           e.preventDefault()
                           onDismiss(profile.actor.did)
                           ax.metric('suggestedUser:dismiss', {
-                            logContext: isFeedContext
+                            logContext,
-                              ? 'InterstitialDiscover'
-                              : 'InterstitialProfile',
                             position: index,
                             suggestedDid: profile.actor.did,
                             recId: profile.recId,
@@ -515,10 +509,8 @@ export function ProfileGrid({
                       style={[a.rounded_sm]}
                       onFollow={() => {
                         ax.metric('suggestedUser:follow', {
-                          logContext: isFeedContext
+                          logContext,
-                            ? 'InterstitialDiscover'
+                          location: 'Profile',
-                            : 'InterstitialProfile',
-                          location: 'Card',
                           recId: profile.recId,
                           position: index,
                           suggestedDid: profile.actor.did,
@@ -570,11 +562,11 @@ export function ProfileGrid({
         </Text>
         {!isProfileHeaderContext && (
           <Button
-            label={_(msg`See more suggested profiles`)}
+            label={l`See more suggested profiles`}
             onPress={() => {
               followDialogControl.open()
               ax.metric('suggestedUser:seeMore', {
-                logContext: isFeedContext ? 'Explore' : 'Profile',
+                logContext,
                 recId,
               })
             }}>
@@ -595,9 +587,7 @@ export function ProfileGrid({
           </Button>
         )}
       </View>
-
       <FollowDialogWithoutGuide control={followDialogControl} />
-
       <LayoutAnimationConfig skipExiting skipEntering>
         {gtMobile ? (
           <View style={[a.p_lg, a.pt_md]}>
@@ -620,7 +610,7 @@ export function ProfileGrid({
                   onPress={() => {
                     followDialogControl.open()
                     ax.metric('suggestedUser:seeMore', {
-                      logContext: 'Explore',
+                      logContext,
                     })
                   }}
                 />
@@ -634,11 +624,11 @@ export function ProfileGrid({
 }
 
 function SeeMoreSuggestedProfilesCard({onPress}: {onPress: () => void}) {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
 
   return (
     <Button
-      label={_(msg`Browse more accounts`)}
+      label={l`Browse more accounts`}
       onPress={onPress}
       style={[
         a.flex_col,
@@ -662,7 +652,7 @@ const numFeedsToDisplay = 3
 export function SuggestedFeeds() {
   const t = useTheme()
   const ax = useAnalytics()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const {data, isLoading, error} = useGetPopularFeedsQuery({
     limit: numFeedsToDisplay,
   })
@@ -749,7 +739,7 @@ export function SuggestedFeeds() {
               a.gap_md,
             ]}>
             <InlineLinkText
-              label={_(msg`Browse more suggestions`)}
+              label={l`Browse more suggestions`}
               to="/search"
               style={[t.atoms.text_contrast_medium]}>
               <Trans>Browse more suggestions</Trans>
@@ -768,7 +758,7 @@ export function SuggestedFeeds() {
               {content}
 
               <Button
-                label={_(msg`Browse more feeds on the Explore page`)}
+                label={l`Browse more feeds on the Explore page`}
                 onPress={() => {
                   navigation.navigate('SearchTab')
                 }}

src/components/ProgressGuide/FollowDialog.tsx

@@ -1,9 +1,7 @@
 import {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {TextInput, View, type ViewToken} from 'react-native'
 import {type ModerationOpts} from '@atproto/api'
-import {msg} from '@lingui/core/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {popularInterests, useInterestsDisplayNames} from '#/lib/interests'
@@ -64,14 +62,14 @@ export function FollowDialog({
   showArrow?: boolean
 }) {
   const ax = useAnalytics()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const control = Dialog.useDialogControl()
   const {gtPhone} = useBreakpoints()
 
   return (
     <>
       <Button
-        label={_(msg`Find people to follow`)}
+        label={l`Find people to follow`}
         onPress={() => {
           control.open()
           ax.metric('progressGuide:followDialog:open', {})
@@ -112,7 +110,7 @@ let lastSelectedInterest = ''
 let lastSearchText = ''
 
 function DialogInner({guide}: {guide?: Follow10ProgressGuide}) {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const ax = useAnalytics()
   const interestsDisplayNames = useInterestsDisplayNames()
   const {data: preferences} = usePreferencesQuery()
@@ -182,7 +180,7 @@ function DialogInner({guide}: {guide?: Follow10ProgressGuide}) {
       _items.push({
         type: 'empty',
         key: 'empty',
-        message: _(msg`We're having network issues, try again`),
+        message: l`We're having network issues, try again`,
       })
     } else {
       const seen = new Set<string>()
@@ -208,12 +206,12 @@ function DialogInner({guide}: {guide?: Follow10ProgressGuide}) {
       !_items.length &&
       !isSearchResultsError
     ) {
-      _items.push({type: 'empty', key: 'empty', message: _(msg`No results`)})
+      _items.push({type: 'empty', key: 'empty', message: l`No results`})
     }
 
     return _items
   }, [
-    _,
+    l,
     suggestions,
     suggestionsError,
     isFetchingSuggestions,
@@ -226,6 +224,9 @@ function DialogInner({guide}: {guide?: Follow10ProgressGuide}) {
     isSearchResultsError,
   ])
 
+  const isGuide = Boolean(guide)
+  const recIdForLogging = hasSearchText ? undefined : suggestions?.recId
+
   const renderItems = useCallback(
     ({item, index}: {item: Item; index: number}) => {
       switch (item.type) {
@@ -235,6 +236,9 @@ function DialogInner({guide}: {guide?: Follow10ProgressGuide}) {
               profile={item.profile}
               moderationOpts={moderationOpts!}
               noBorder={index === 0}
+              position={index}
+              recId={recIdForLogging}
+              isGuide={isGuide}
             />
           )
         }
@@ -248,7 +252,7 @@ function DialogInner({guide}: {guide?: Follow10ProgressGuide}) {
           return null
       }
     },
-    [moderationOpts],
+    [moderationOpts, recIdForLogging, isGuide],
   )
 
   // Track seen profiles
@@ -269,8 +273,8 @@ function DialogInner({guide}: {guide?: Follow10ProgressGuide}) {
               i => i.type === 'profile' && i.profile.did === item.profile.did,
             )
             ax.metric('suggestedUser:seen', {
-              logContext: 'ProgressGuide',
+              logContext: isGuide ? 'ProgressGuide' : 'SeeMoreSuggestedUsers',
-              recId: hasSearchText ? undefined : suggestions?.recId,
+              recId: recIdForLogging,
               position: position !== -1 ? position : 0,
               suggestedDid: item.profile.did,
               category: selectedInterestRef.current,
@@ -404,7 +408,7 @@ let Header = ({
 Header = memo(Header)
 
 function HeaderTop({guide}: {guide?: Follow10ProgressGuide}) {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const t = useTheme()
   const control = Dialog.useDialogContext()
   return (
@@ -438,7 +442,7 @@ function HeaderTop({guide}: {guide?: Follow10ProgressGuide}) {
       )}
       {IS_WEB ? (
         <Button
-          label={_(msg`Close`)}
+          label={l`Close`}
           size="small"
           shape="round"
           variant={IS_WEB ? 'ghost' : 'solid'}
@@ -474,22 +478,18 @@ let Tab = ({
   onLayout: (index: number, x: number, width: number) => void
 }): React.ReactNode => {
   const t = useTheme()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const label = active
-    ? _(
+    ? l({
-        msg({
+        message: `Search for "${interestsDisplayName}" (active)`,
-          message: `Search for "${interestsDisplayName}" (active)`,
+        comment:
-          comment:
+          'Accessibility label for a tab that searches for accounts in a category (e.g. Art, Video Games, Sports, etc.) that are suggested for the user to follow. The tab is currently selected.',
-            'Accessibility label for a tab that searches for accounts in a category (e.g. Art, Video Games, Sports, etc.) that are suggested for the user to follow. The tab is currently selected.',
+      })
-        }),
+    : l({
-      )
+        message: `Search for "${interestsDisplayName}"`,
-    : _(
+        comment:
-        msg({
+          'Accessibility label for a tab that searches for accounts in a category (e.g. Art, Video Games, Sports, etc.) that are suggested for the user to follow. The tab is not currently active and can be selected.',
-          message: `Search for "${interestsDisplayName}"`,
+      })
-          comment:
-            'Accessibility label for a tab that searches for accounts in a category (e.g. Art, Video Games, Sports, etc.) that are suggested for the user to follow. The tab is not currently active and can be selected.',
-        }),
-      )
   return (
     <View
       key={interest}
@@ -532,16 +532,25 @@ let FollowProfileCard = ({
   profile,
   moderationOpts,
   noBorder,
+  position,
+  recId,
+  isGuide,
 }: {
   profile: bsky.profile.AnyProfileView
   moderationOpts: ModerationOpts
   noBorder?: boolean
+  position: number
+  recId?: string
+  isGuide: boolean
 }): React.ReactNode => {
   return (
     <FollowProfileCardInner
       profile={profile}
       moderationOpts={moderationOpts}
       noBorder={noBorder}
+      position={position}
+      recId={recId}
+      isGuide={isGuide}
     />
   )
 }
@@ -552,14 +561,21 @@ function FollowProfileCardInner({
   moderationOpts,
   onFollow,
   noBorder,
+  position,
+  recId,
+  isGuide,
 }: {
   profile: bsky.profile.AnyProfileView
   moderationOpts: ModerationOpts
   onFollow?: () => void
   noBorder?: boolean
+  position: number
+  recId?: string
+  isGuide: boolean
 }) {
   const control = Dialog.useDialogContext()
   const t = useTheme()
+  const ax = useAnalytics()
   return (
     <ProfileCard.Link
       profile={profile}
@@ -588,7 +604,19 @@ function FollowProfileCardInner({
                 moderationOpts={moderationOpts}
                 logContext="PostOnboardingFindFollows"
                 shape="round"
-                onPress={onFollow}
+                onPress={() => {
+                  ax.metric('suggestedUser:follow', {
+                    logContext: isGuide
+                      ? 'ProgressGuide'
+                      : 'SeeMoreSuggestedUsers',
+                    location: 'Card',
+                    recId,
+                    position,
+                    suggestedDid: profile.did,
+                    category: null,
+                  })
+                  onFollow?.()
+                }}
                 colorInverted
               />
             </ProfileCard.Header>
@@ -632,7 +660,7 @@ function SearchInput({
   defaultValue: string
 }) {
   const t = useTheme()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const {
     state: hovered,
     onIn: onMouseEnter,
@@ -652,10 +680,9 @@ function SearchInput({
         size="md"
         fill={interacted ? t.palette.primary_500 : t.palette.contrast_300}
       />
-
       <TextInput
         ref={inputRef}
-        placeholder={_(msg`Search by name or interest`)}
+        placeholder={l`Search by name or interest`}
         defaultValue={defaultValue}
         onChangeText={onChangeText}
         onFocus={onFocus}
@@ -674,8 +701,8 @@ function SearchInput({
         autoCorrect={false}
         autoComplete="off"
         autoCapitalize="none"
-        accessibilityLabel={_(msg`Search profiles`)}
+        accessibilityLabel={l`Search profiles`}
-        accessibilityHint={_(msg`Searches for profiles`)}
+        accessibilityHint={l`Searches for profiles`}
       />
     </View>
   )