[APP-511] metrics overhaul: frontend work (#506)

* WIP

* fix types and update imports

* wip

* tagged events that should be server side

* remove server-side analytics

* remove useless import

* add additional profile header events

* remove useless import

* track follow/unfollow clicks

* add missing types

src/view/com/auth/LoggedOut.tsx

@@ -7,7 +7,7 @@ import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
 import {s} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {SplashScreen} from './SplashScreen'
 import {CenteredView} from '../util/Views'
 

src/view/com/auth/create/CreateAccount.tsx

@@ -8,7 +8,7 @@ import {
   View,
 } from 'react-native'
 import {observer} from 'mobx-react-lite'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {Text} from '../../util/text/Text'
 import {s} from 'lib/styles'
 import {useStores} from 'state/index'

src/view/com/auth/login/Login.tsx

@@ -14,7 +14,7 @@ import {
 } from '@fortawesome/react-native-fontawesome'
 import * as EmailValidator from 'email-validator'
 import {BskyAgent} from '@atproto/api'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {Text} from '../../util/text/Text'
 import {UserAvatar} from '../../util/UserAvatar'
 import {s, colors} from 'lib/styles'

src/view/com/composer/Composer.tsx

@@ -13,7 +13,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import LinearGradient from 'react-native-linear-gradient'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {RichText} from '@atproto/api'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {UserAutocompleteModel} from 'state/models/discovery/user-autocomplete'
 import {ExternalEmbed} from './ExternalEmbed'
 import {Text} from '../util/text/Text'

src/view/com/composer/photos/OpenCameraBtn.tsx

@@ -5,7 +5,7 @@ import {
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {useStores} from 'state/index'
 import {isDesktopWeb} from 'platform/detection'
 import {openCamera} from 'lib/media/picker'

src/view/com/composer/photos/SelectPhotoBtn.tsx

@@ -5,7 +5,7 @@ import {
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {isDesktopWeb} from 'platform/detection'
 import {usePhotoLibraryPermission} from 'lib/hooks/usePermissions'
 import {GalleryModel} from 'state/models/media/gallery'

src/view/com/lists/ListItems.tsx

@@ -20,7 +20,7 @@ import {RichText as RichTextCom} from '../util/text/RichText'
 import {UserAvatar} from '../util/UserAvatar'
 import {TextLink} from '../util/Link'
 import {ListModel} from 'state/models/content/list'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
 import {s} from 'lib/styles'

src/view/com/lists/ListsList.tsx

@@ -21,7 +21,7 @@ import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
 import {Button} from '../util/forms/Button'
 import {Text} from '../util/text/Text'
 import {ListsListModel} from 'state/models/lists/lists-list'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
 

src/view/com/modals/ChangeHandle.tsx

@@ -18,7 +18,7 @@ import {s} from 'lib/styles'
 import {makeValidHandle, createFullHandle} from 'lib/strings/handles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useTheme} from 'lib/ThemeContext'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {cleanError} from 'lib/strings/errors'
 
 export const snapPoints = ['100%']

src/view/com/modals/CreateOrEditMuteList.tsx

@@ -21,7 +21,7 @@ import {compressIfNeeded} from 'lib/media/manip'
 import {UserAvatar} from '../util/UserAvatar'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useTheme} from 'lib/ThemeContext'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {cleanError, isNetworkError} from 'lib/strings/errors'
 import {isDesktopWeb} from 'platform/detection'
 

src/view/com/modals/EditProfile.tsx

@@ -23,7 +23,7 @@ import {UserBanner} from '../util/UserBanner'
 import {UserAvatar} from '../util/UserAvatar'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useTheme} from 'lib/ThemeContext'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {cleanError, isNetworkError} from 'lib/strings/errors'
 
 export const snapPoints = ['fullscreen']

src/view/com/posts/Feed.tsx

@@ -16,7 +16,7 @@ import {FeedSlice} from './FeedSlice'
 import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
 import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
 import {s} from 'lib/styles'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useTheme} from 'lib/ThemeContext'
 

src/view/com/posts/FeedItem.tsx

@@ -25,7 +25,7 @@ import {UserAvatar} from '../util/UserAvatar'
 import {s} from 'lib/styles'
 import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 
 export const FeedItem = observer(function ({

src/view/com/posts/MultiFeed.tsx

@@ -19,7 +19,7 @@ import {Link} from '../util/Link'
 import {UserAvatar} from '../util/UserAvatar'
 import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
 import {s} from 'lib/styles'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useTheme} from 'lib/ThemeContext'
 import {isDesktopWeb} from 'platform/detection'

src/view/com/profile/ProfileHeader.tsx

@@ -29,7 +29,7 @@ import {UserAvatar} from '../util/UserAvatar'
 import {UserBanner} from '../util/UserBanner'
 import {ProfileHeaderWarnings} from '../util/moderation/ProfileHeaderWarnings'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {NavigationProp} from 'lib/routes/types'
 import {listUriToHref} from 'lib/strings/url-helpers'
 import {isDesktopWeb, isNative} from 'platform/detection'
@@ -117,6 +117,11 @@ const ProfileHeaderLoaded = observer(
     }, [store, view])
 
     const onPressToggleFollow = React.useCallback(() => {
+      track(
+        view.viewer.following
+          ? 'ProfileHeader:FollowButtonClicked'
+          : 'ProfileHeader:UnfollowButtonClicked',
+      )
       view?.toggleFollowing().then(
         () => {
           Toast.show(
@@ -127,7 +132,7 @@ const ProfileHeaderLoaded = observer(
         },
         err => store.log.error('Failed to toggle follow', err),
       )
-    }, [view, store])
+    }, [track, view, store.log])
 
     const onPressEditProfile = React.useCallback(() => {
       track('ProfileHeader:EditProfileButtonClicked')

src/view/com/search/HeaderWithInput.tsx

@@ -9,7 +9,7 @@ import {MagnifyingGlassIcon} from 'lib/icons'
 import {useTheme} from 'lib/ThemeContext'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 
 const MENU_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10}
 

src/view/com/util/ViewHeader.tsx

@@ -8,7 +8,7 @@ import {Text} from './text/Text'
 import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {NavigationProp} from 'lib/routes/types'
 import {isDesktopWeb} from 'platform/detection'