Add nav:click event to all main nav items (#10540)

Co-authored-by: Eric Bailey <git@esb.lol>

src/view/shell/bottom-bar/BottomBar.tsx

@@ -17,6 +17,7 @@ import {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransfo
 import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
 import {clamp} from '#/lib/numbers'
 import {getTabState, TabState} from '#/lib/routes/helpers'
+import {type SharedNavTab, TAB_TO_NAV_ITEM} from '#/lib/routes/tab-to-nav-item'
 import {emitSoftReset} from '#/state/events'
 import {useUnreadMessageCount} from '#/state/queries/messages/list-conversations'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
@@ -50,16 +51,16 @@ import {
 } from '#/components/icons/Message'
 import {Text} from '#/components/Typography'
 import {useAgeAssurance} from '#/ageAssurance'
+import {useAnalytics} from '#/analytics'
 import {useActorStatus} from '#/features/liveNow'
 import {useDemoMode} from '#/storage/hooks/demo-mode'
 import {styles} from './BottomBarStyles'
 
-type TabOptions = 'Home' | 'Search' | 'Messages' | 'Notifications' | 'MyProfile'
-
 export function BottomBar({navigation}: BottomTabBarProps) {
   const {hasSession, currentAccount} = useSession()
   const t = useTheme()
   const {_} = useLingui()
+  const ax = useAnalytics()
   const safeAreaInsets = useSafeAreaInsets()
   const {footerHeight} = useShellLayout()
   const {isAtHome, isAtSearch, isAtNotifications, isAtMyProfile, isAtMessages} =
@@ -89,7 +90,11 @@ export function BottomBar({navigation}: BottomTabBarProps) {
   }, [requestSwitchToAccount, closeAllActiveElements])
 
   const onPressTab = useCallback(
-    (tab: TabOptions) => {
+    (tab: SharedNavTab) => {
+      ax.metric('nav:click', {
+        item: TAB_TO_NAV_ITEM[tab],
+        surface: 'bottomBar',
+      })
       const state = navigation.getState()
       const tabState = getTabState(state, tab)
       if (tabState === TabState.InsideAtRoot) {
@@ -117,7 +122,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
         dedupe(() => navigation.navigate(`${tab}Tab`))
       }
     },
-    [navigation, dedupe],
+    [navigation, dedupe, ax],
   )
   const onPressHome = useCallback(() => onPressTab('Home'), [onPressTab])
   const onPressSearch = useCallback(() => onPressTab('Search'), [onPressTab])

src/view/shell/bottom-bar/BottomBarWeb.tsx

@@ -44,8 +44,11 @@ import {
 } from '#/components/icons/Message'
 import {Text} from '#/components/Typography'
 import {useAgeAssurance} from '#/ageAssurance'
+import {useAnalytics} from '#/analytics'
 import {styles} from './BottomBarStyles'
 
+type NavItemValue = 'home' | 'search' | 'chat' | 'notifications' | 'profile'
+
 export function BottomBarWeb() {
   const {_} = useLingui()
   const {hasSession, currentAccount} = useSession()
@@ -96,7 +99,7 @@ export function BottomBarWeb() {
         onLayout={event => footerHeight.set(event.nativeEvent.layout.height)}>
         {hasSession ? (
           <>
-            <NavItem routeName="Home" href="/">
+            <NavItem routeName="Home" href="/" navItem="home">
               {({isActive}) => {
                 const Icon = isActive ? HomeFilled : Home
                 return (
@@ -108,7 +111,7 @@ export function BottomBarWeb() {
                 )
               }}
             </NavItem>
-            <NavItem routeName="Search" href="/search">
+            <NavItem routeName="Search" href="/search" navItem="search">
               {({isActive}) => {
                 const Icon = isActive ? MagnifyingGlassFilled : MagnifyingGlass
                 return (
@@ -126,6 +129,7 @@ export function BottomBarWeb() {
                 <NavItem
                   routeName="Messages"
                   href="/messages"
+                  navItem="chat"
                   notificationCount={
                     aa.flags.chatDisabled
                       ? undefined
@@ -152,6 +156,7 @@ export function BottomBarWeb() {
                 <NavItem
                   routeName="Notifications"
                   href="/notifications"
+                  navItem="notifications"
                   notificationCount={notificationCountStr}>
                   {({isActive}) => {
                     const Icon = isActive ? BellFilled : Bell
@@ -174,6 +179,7 @@ export function BottomBarWeb() {
                         })
                       : '/'
                   }
+                  navItem="profile"
                   onLongPress={onLongPressProfile}>
                   {({isActive}) => (
                     <View style={styles.ctrlIconSizingWrapper}>
@@ -257,12 +263,22 @@ const NavItem: React.FC<{
   children: (props: {isActive: boolean}) => React.ReactNode
   href: string
   routeName: string
+  navItem: NavItemValue
   hasNew?: boolean
   notificationCount?: string
   onLongPress?: () => void
-}> = ({children, href, routeName, hasNew, notificationCount, onLongPress}) => {
+}> = ({
+  children,
+  href,
+  routeName,
+  navItem,
+  hasNew,
+  notificationCount,
+  onLongPress,
+}) => {
   const t = useTheme()
   const {_} = useLingui()
+  const ax = useAnalytics()
   const {currentAccount} = useSession()
   const currentRoute = useNavigationState(state => {
     if (!state) {
@@ -271,6 +287,10 @@ const NavItem: React.FC<{
     return getCurrentRoute(state)
   })
 
+  const onBeforePress = useCallback(() => {
+    ax.metric('nav:click', {item: navItem, surface: 'bottomBar'})
+  }, [ax, navItem])
+
   // Checks whether we're on someone else's profile
   const isOnDifferentProfile =
     currentRoute.name === 'Profile' &&
@@ -295,6 +315,7 @@ const NavItem: React.FC<{
       aria-role="link"
       aria-label={routeName}
       accessible={true}
+      onBeforePress={onBeforePress}
       onLongPress={onLongPress}>
       {children({isActive})}
       {notificationCount ? (