Improve search analytics

packages/mobile/src/components/collection-list/CollectionCard.tsx

@@ -30,26 +30,30 @@ const formatPlaylistCardSecondaryText = (saves: number, tracks: number) => {
 type FullCollectionCardProps = {
   collection: Collection
   style?: StyleProp<ViewStyle>
+  onPress?: (id: ID) => void
   /** Override for what number to show as the # of tracks. Optional. */
   numTracks?: number
 }
 
 type CollectionCardWithIdProps = {
   collectionId: ID
   style?: StyleProp<ViewStyle>
+  onPress?: (id: ID) => void
 }
 
 type CollectionCardProps = FullCollectionCardProps | CollectionCardWithIdProps
 
 const FullCollectionCard = ({
   collection,
   numTracks,
-  style
+  style,
+  onPress
 }: FullCollectionCardProps) => {
   const navigation = useNavigation()
   const handlePress = useCallback(() => {
     navigation.push('Collection', { id: collection.playlist_id })
-  }, [navigation, collection])
+    onPress?.(collection.playlist_id)
+  }, [navigation, collection.playlist_id, onPress])
 
   const renderImage = useCallback(
     (props: ImageProps) => (
@@ -103,7 +107,8 @@ const useTrackCountWithOfflineOverride = (collection: Collection | null) => {
 
 const CollectionCardWithId = ({
   collectionId,
-  style
+  style,
+  onPress
 }: CollectionCardWithIdProps) => {
   const collection = useSelector((state: CommonState) =>
     getCollection(state, { id: collectionId })
@@ -115,6 +120,7 @@ const CollectionCardWithId = ({
       collection={collection}
       numTracks={numTracks}
       style={style}
+      onPress={onPress}
     />
   ) : null
 }

packages/mobile/src/components/collection-list/CollectionList.tsx

@@ -31,6 +31,7 @@ type FullCollectionListProps = {
   /** Optional mapping of collection ids to the number that should be shown as the # of tracks in the collection's info card. Added this because im offline mode, the number of tracks downloaded may not yet match the actual number of tracks in the collection. */
   collectionIdsToNumTracks?: Record<number, number>
   renderItem?: ListRenderItem<Collection | CreateCard> | null
+  onCollectionPress?: (id: ID) => void
 } & FullListProps &
   CreateCollectionTileProps
 
@@ -50,6 +51,7 @@ const FullCollectionList = (props: FullCollectionListProps) => {
     createPlaylistTrackId,
     createPlaylistCallback,
     renderItem,
+    onCollectionPress,
     ...other
   } = props
 
@@ -67,13 +69,15 @@ const FullCollectionList = (props: FullCollectionListProps) => {
         <CollectionCard
           collection={item}
           numTracks={collectionIdsToNumTracks?.[item.playlist_id] ?? undefined}
+          onPress={onCollectionPress}
         />
       ),
     [
       collectionIdsToNumTracks,
       createPlaylistCallback,
       createPlaylistSource,
-      createPlaylistTrackId
+      createPlaylistTrackId,
+      onCollectionPress
     ]
   )
 

packages/mobile/src/components/lineup-tile/TrackTile.tsx

@@ -77,6 +77,7 @@ type TrackTileProps = LineupItemProps & {
 }
 
 export const TrackTileComponent = ({
+  onPress,
   togglePlay,
   track,
   user,
@@ -144,11 +145,13 @@ export const TrackTileComponent = ({
       id: track_id,
       source: PlaybackSource.TRACK_TILE
     })
-  }, [togglePlay, lineupTileProps.uid, track_id])
+    onPress?.(track_id)
+  }, [togglePlay, lineupTileProps.uid, track_id, onPress])
 
   const handlePressTitle = useCallback(() => {
     navigation.push('Track', { id: track_id })
-  }, [navigation, track_id])
+    onPress?.(track_id)
+  }, [navigation, onPress, track_id])
 
   const playbackPositionInfo = useSelector((state) =>
     getTrackPosition(state, { trackId: track_id, userId: currentUserId })

packages/mobile/src/components/lineup-tile/types.ts

@@ -42,6 +42,9 @@ export type LineupItemProps = {
   /** Function that will toggle play of a track */
   togglePlay: (args: { uid: UID; id: ID; source: PlaybackSource }) => void
 
+  /** Function called when tile title or playback is pressed */
+  onPress?: (id: ID) => void
+
   /** Uid of the item */
   uid: UID
 

packages/mobile/src/components/lineup/Lineup.tsx

@@ -139,20 +139,21 @@ const LineupTileView = memo(function LineupTileView({
   showLeadingElementArtistPick,
   leadingElementId,
   rankIconCount,
-  togglePlay
+  togglePlay,
+  onPress
 }: LineupTileViewProps) {
-  const LineupTile = getLineupTileComponent(item)
-
-  if (LineupTile) {
+  const TrackOrCollectionTile = getLineupTileComponent(item)
+  if (TrackOrCollectionTile) {
     return (
       <View style={styles.item}>
-        <LineupTile
+        <TrackOrCollectionTile
           {...item}
           index={index}
           isTrending={isTrending}
           showArtistPick={showLeadingElementArtistPick && !!leadingElementId}
           showRankIcon={index < rankIconCount}
           togglePlay={togglePlay}
+          onPress={onPress}
           uid={item.uid}
         />
       </View>
@@ -171,7 +172,8 @@ const LineupItemTile = memo(function LineupItemTile({
   showLeadingElementArtistPick,
   leadingElementId,
   rankIconCount,
-  togglePlay
+  togglePlay,
+  onPress
 }: LineupItemTileProps) {
   if (!item) return null
   if ('_loading' in item) {
@@ -188,6 +190,7 @@ const LineupItemTile = memo(function LineupItemTile({
         leadingElementId={leadingElementId}
         rankIconCount={rankIconCount}
         togglePlay={togglePlay}
+        onPress={onPress}
       />
     )
   }
@@ -227,6 +230,7 @@ export const Lineup = ({
   extraFetchOptions,
   ListFooterComponent,
   EndOfLineupComponent,
+  onPressItem,
   ...listProps
 }: LineupProps) => {
   const dispatch = useDispatch()
@@ -387,6 +391,7 @@ export const Lineup = ({
           rankIconCount={rankIconCount}
           showLeadingElementArtistPick={showLeadingElementArtistPick}
           togglePlay={togglePlay}
+          onPress={onPressItem}
         />
       )
     },
@@ -395,7 +400,8 @@ export const Lineup = ({
       leadingElementId,
       rankIconCount,
       showLeadingElementArtistPick,
-      togglePlay
+      togglePlay,
+      onPressItem
     ]
   )
 

packages/mobile/src/components/lineup/types.ts

@@ -161,6 +161,12 @@ export type LineupProps = {
    * When `true`, add pull-to-refresh capability
    */
   pullToRefresh?: boolean
+
+  /**
+   * Track search result selection for analytics
+   */
+  onPressItem?: (id: ID) => void
+
   EndOfLineupComponent?: ComponentType<any> | ReactElement
 } & Pick<
   SectionListProps<unknown>,
@@ -181,6 +187,7 @@ export type LineupItemTileProps = Pick<
   item: LineupItem | LoadingLineupItem
   index: number
   togglePlay: ({ uid, id, source }: TogglePlayConfig) => void
+  onPress?: (id: ID) => void
 }
 
 export type LineupTileViewProps = Omit<LineupItemTileProps, 'item'> & {

packages/mobile/src/components/profile-list/ProfileCard.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import type { User } from '@audius/common/models'
+import type { ID, User } from '@audius/common/models'
 import { SquareSizes } from '@audius/common/models'
 
 import type { ImageProps } from '@audius/harmony-native'
@@ -17,16 +17,21 @@ const formatProfileCardSecondaryText = (followers: number) => {
 
 type ProfileCardProps = Partial<BaseProfileCardProps> & {
   profile: User
+  preventNavigation?: boolean
+  onCardPress?: (id: ID) => void
 }
 
 export const ProfileCard = (props: ProfileCardProps) => {
-  const { profile, onPress, ...other } = props
+  const { profile, preventNavigation, onCardPress, ...other } = props
   const { user_id, handle } = profile
   const navigation = useNavigation()
 
   const handlePress = useCallback(() => {
-    navigation.push('Profile', { handle })
-  }, [navigation, handle])
+    if (!preventNavigation) {
+      navigation.push('Profile', { handle })
+    }
+    onCardPress?.(user_id)
+  }, [navigation, handle, onCardPress, user_id, preventNavigation])
 
   const renderImage = useCallback(
     (props: ImageProps) => (
@@ -44,7 +49,7 @@ export const ProfileCard = (props: ProfileCardProps) => {
       renderImage={renderImage}
       primaryText={profile.name}
       secondaryText={formatProfileCardSecondaryText(profile.follower_count)}
-      onPress={onPress ?? handlePress}
+      onPress={handlePress}
       type='user'
       user={profile}
       {...other}

packages/mobile/src/components/profile-list/ProfileList.tsx

@@ -1,4 +1,4 @@
-import type { User } from '@audius/common/models'
+import type { ID, User } from '@audius/common/models'
 
 import type { CardListProps } from 'app/components/core'
 import { CardList } from 'app/components/core'
@@ -10,14 +10,17 @@ type ListProps = Omit<CardListProps<User>, 'data'>
 
 export type ProfileListProps = {
   profiles: User[] | undefined
+  onCardPress?: (user_id: ID) => void
 } & Partial<ListProps>
 
 export const ProfileList = (props: ProfileListProps) => {
-  const { profiles, ...other } = props
+  const { profiles, onCardPress, ...other } = props
   return (
     <CardList
       data={profiles}
-      renderItem={({ item }) => <ProfileCard profile={item} />}
+      renderItem={({ item }) => (
+        <ProfileCard profile={item} onCardPress={onCardPress} />
+      )}
       LoadingCardComponent={ProfileCardSkeleton}
       {...other}
     />

packages/mobile/src/components/suggested-follows/SuggestedArtistsList.tsx

@@ -79,6 +79,7 @@ export const SuggestedArtistsList = (props: SuggestedArtistsListProps) => {
         return (
           <ProfileCard
             profile={artist}
+            preventNavigation
             onPress={() => handleSelectArtist(user_id)}
             TileProps={{ as: LinearGradient, colors: gradientColors }}
             styles={textStyles}

packages/mobile/src/screens/search-results-screen/tabs/AlbumsTab.tsx

@@ -9,6 +9,7 @@ import { spacing } from 'app/styles/spacing'
 import { EmptyResults } from '../EmptyResults'
 
 import { useFetchTabResultsEffect } from './useFetchTabResultsEffect'
+import { useTrackSearchResultSelect } from './useTrackSearchResultSelect'
 
 const { getSearchStatus } = searchResultsPageSelectors
 
@@ -27,6 +28,7 @@ const selectSearchAlbums = (state: CommonState) => {
 }
 
 export const AlbumsTab = () => {
+  const trackSearchResultSelect = useTrackSearchResultSelect('album')
   const albums = useProxySelector(selectSearchAlbums, [])
   useFetchTabResultsEffect(SearchKind.ALBUMS)
 
@@ -36,6 +38,7 @@ export const AlbumsTab = () => {
       isLoading={!albums}
       collection={albums}
       ListEmptyComponent={<EmptyResults />}
+      onCollectionPress={trackSearchResultSelect}
     />
   )
 }

packages/mobile/src/screens/search-results-screen/tabs/PlaylistsTab.tsx

@@ -9,6 +9,7 @@ import { spacing } from 'app/styles/spacing'
 import { EmptyResults } from '../EmptyResults'
 
 import { useFetchTabResultsEffect } from './useFetchTabResultsEffect'
+import { useTrackSearchResultSelect } from './useTrackSearchResultSelect'
 
 const { getSearchStatus } = searchResultsPageSelectors
 
@@ -27,6 +28,7 @@ const selectSearchPlaylists = (state: CommonState) => {
 }
 
 export const PlaylistsTab = () => {
+  const trackSearchResultSelect = useTrackSearchResultSelect('playlist')
   const playlists = useProxySelector(selectSearchPlaylists, [])
   useFetchTabResultsEffect(SearchKind.PLAYLISTS)
 
@@ -36,6 +38,7 @@ export const PlaylistsTab = () => {
       isLoading={!playlists}
       collection={playlists}
       ListEmptyComponent={<EmptyResults />}
+      onCollectionPress={trackSearchResultSelect}
     />
   )
 }

packages/mobile/src/screens/search-results-screen/tabs/ProfilesTab.tsx

@@ -9,6 +9,7 @@ import { spacing } from 'app/styles/spacing'
 import { EmptyResults } from '../EmptyResults'
 
 import { useFetchTabResultsEffect } from './useFetchTabResultsEffect'
+import { useTrackSearchResultSelect } from './useTrackSearchResultSelect'
 
 const { getSearchStatus } = searchResultsPageSelectors
 
@@ -22,13 +23,15 @@ const selectSearchUsers = (state: CommonState) => {
 }
 
 export const ProfilesTab = () => {
+  const onCardPress = useTrackSearchResultSelect('profile')
   const users = useProxySelector(selectSearchUsers, [])
 
   useFetchTabResultsEffect(SearchKind.USERS)
 
   return (
     <ProfileList
       style={{ paddingTop: spacing(3) }}
+      onCardPress={onCardPress}
       isLoading={!users}
       profiles={users}
       ListEmptyComponent={<EmptyResults />}

packages/mobile/src/screens/search-results-screen/tabs/TracksTab.tsx

@@ -14,13 +14,17 @@ import { SearchQueryContext } from '../SearchQueryContext'
 
 import { SearchResultsTab } from './SearchResultsTab'
 import { useFetchTabResultsEffect } from './useFetchTabResultsEffect'
+import { useTrackSearchResultSelect } from './useTrackSearchResultSelect'
+
 const { getSearchTracksLineup } = searchResultsPageSelectors
 const { makeGetLineupMetadatas } = lineupSelectors
 const getSearchTracksLineupMetadatas = makeGetLineupMetadatas(
   getSearchTracksLineup
 )
 
-export const TracksTab = () => {
+export const TracksTab = ({ route }) => {
+  const trackSearchResultSelect = useTrackSearchResultSelect('track')
+
   const lineup = useSelector(getSearchTracksLineupMetadatas)
   const dispatch = useDispatch()
   const { query, isTagSearch } = useContext(SearchQueryContext)
@@ -43,7 +47,12 @@ export const TracksTab = () => {
       noResults={lineup?.entries.length === 0}
       status={lineup?.status}
     >
-      <Lineup actions={tracksActions} lineup={lineup} loadMore={loadMore} />
+      <Lineup
+        actions={tracksActions}
+        lineup={lineup}
+        loadMore={loadMore}
+        onPressItem={trackSearchResultSelect}
+      />
     </SearchResultsTab>
   )
 }

packages/mobile/src/screens/search-results-screen/tabs/useFetchTabResultsEffect.tsx

@@ -77,7 +77,7 @@ export const useFetchTabResultsEffect = (searchKind: SearchKind) => {
           make({
             eventName: EventNames.SEARCH_SEARCH,
             term: query,
-            source: 'search results page'
+            source: 'more results page'
           })
         )
       }