fix types and update imports

src/App.native.tsx

@@ -12,7 +12,7 @@ import * as view from './view/index'
 import {RootStoreModel, setupState, RootStoreProvider} from './state'
 import {Shell} from './view/shell'
 import * as notifee from 'lib/notifee'
-import * as analytics from 'lib/analytics'
+import * as analytics from 'lib/analytics/analytics'
 import * as Toast from './view/com/util/Toast'
 import {handleLink} from './Navigation'
 

src/App.web.tsx

@@ -2,7 +2,7 @@ import React, {useState, useEffect} from 'react'
 import {SafeAreaProvider} from 'react-native-safe-area-context'
 import {RootSiblingParent} from 'react-native-root-siblings'
 import * as view from './view/index'
-import * as analytics from 'lib/analytics'
+import * as analytics from 'lib/analytics/analytics'
 import {RootStoreModel, setupState, RootStoreProvider} from './state'
 import {Shell} from './view/shell/index'
 import {ToastContainer} from './view/com/util/Toast.web'

src/lib/analytics/analytics.tsx

@@ -5,11 +5,11 @@ import {
   AnalyticsProvider,
   useAnalytics as useAnalyticsOrig,
   ClientMethods,
-  JsonMap,
 } from '@segment/analytics-react-native'
 import {RootStoreModel, AppInfo} from 'state/models/root-store'
 import {useStores} from 'state/models/root-store'
 import {sha256} from 'js-sha256'
+import {ScreenEvent, TrackEvent} from './types'
 
 const segmentClient = createClient({
   writeKey: '8I6DsgfiSLuoONyaunGoiQM7A6y2ybdI',
@@ -21,17 +21,25 @@ export function useAnalytics() {
   const methods: ClientMethods = useAnalyticsOrig()
   return React.useMemo(() => {
     if (store.session.hasSession) {
-      return methods
+      return {
+        screen: methods.screen as ScreenEvent,
+        track: methods.track as TrackEvent,
+        identify: methods.identify,
+        flush: methods.flush,
+        group: methods.group,
+        alias: methods.alias,
+        reset: methods.reset,
+      }
     }
     // dont send analytics pings for anonymous users
     return {
-      screen: (name: string, properties?: JsonMap) => Promise<void>,
+      screen: () => Promise<void>,
-      track: (event: string, properties?: JsonMap) => Promise<void>,
+      track: () => Promise<void>,
-      identify: (userId?: string, userTraits?: UserTraits) => Promise<void>,
+      identify: () => Promise<void>,
       flush: () => Promise<void>,
-      group: (groupId: string, groupTraits?: GroupTraits) => Promise<void>,
+      group: () => Promise<void>,
-      alias: (newUserId: string) => Promise<void>,
+      alias: () => Promise<void>,
-      reset: (resetAnonymousId?: boolean) => Promise<void>,
+      reset: () => Promise<void>,
     }
   }, [store, methods])
 }

src/lib/analytics/types.ts

@@ -1,31 +1,18 @@
-import {
+export type TrackEvent = (
-  ClientMethods,
+  event: keyof TrackPropertiesMap,
-  GroupTraits,
+  properties?: TrackPropertiesMap[keyof TrackPropertiesMap],
-  JsonMap,
+) => Promise<void>
-  UserTraits,
-} from '@segment/analytics-react-native'
 
-export type IAnalyticsEvent = {
+export type ScreenEvent = (
-  name: keyof TrackPropertiesMap
+  name: keyof ScreenPropertiesMap,
-  properties: TrackPropertiesMap[keyof TrackPropertiesMap]
+  properties?: ScreenPropertiesMap[keyof ScreenPropertiesMap],
-}
+) => Promise<void>
-
+interface TrackPropertiesMap {
-export interface IAnalyticsProvider extends ClientMethods {
-  screen: (name: string, properties?: JsonMap) => Promise<void>
-  track: (event: string, properties?: JsonMap) => Promise<void>
-  identify: (userId?: string, userTraits?: UserTraits) => Promise<void>
-  flush: () => Promise<void>
-  group: (groupId: string, groupTraits?: GroupTraits) => Promise<void>
-  alias: (newUserId: string) => Promise<void>
-  reset: (resetAnonymousId?: boolean) => Promise<void>
-}
-
-export interface TrackPropertiesMap {
   // LOGIN / SIGN UP events
-  'Sing In': {resumedSession: boolean}
+  'Sign In': {resumedSession: boolean}
   'Create Account': {}
-  'SignIn:ForgotPassowrd': {}
+  'Signin:PressedForgotPassword': {}
-  'SignIn:PressedSelectService': {}
+  'Signin:PressedSelectService': {}
   // COMPOSER / CREATE POST events
   'Create Post': {imageCount: string}
   'Composer:PastedPhotos': {}
@@ -49,7 +36,7 @@ export interface TrackPropertiesMap {
   'FeedItem:PostLike': {}
   'FeedItem:PostDelete': {}
   // PROFILE HEADER events
-  'ProfileHeaeder:EditProfileButtonClicked': {}
+  'ProfileHeader:EditProfileButtonClicked': {}
   'ProfileHeader:FollowersButtonClicked': {}
   'ProfileHeader:FollowsButtonClicked': {}
   'ProfileHeader:ShareButtonClicked': {}
@@ -58,7 +45,7 @@ export interface TrackPropertiesMap {
   'ProfileHeader:ReportAccountButtonClicked': {}
   'ViewHeader:MenuButtonClicked': {}
   // SETTINGS events
-  'Settings:SwitchAccountButtonCLicked': {}
+  'Settings:SwitchAccountButtonClicked': {}
   'Settings:AddAccountButtonClicked': {}
   'Settings:ChangeHandleButtonClicked': {}
   'Settings:InvitecodesButtonClicked': {}
@@ -68,13 +55,13 @@ export interface TrackPropertiesMap {
   'Menu:ItemClicked': {url: string}
   'Menu:FeedbackClicked': {}
   // MOBILE SHELL events
-  'MobileShell:ProfileButtonPressed': {}
+  'MobileShell:MyProfileButtonPressed': {}
-  'MobileShell:FeedButtonPressed': {}
+  'MobileShell:HomeButtonPressed': {}
   'MobileShell:SearchButtonPressed': {}
   'MobileShell:NotificationsButtonPressed': {}
 }
 
-export interface ScreenPropertiesMap {
+interface ScreenPropertiesMap {
   Login: {}
   CreateAccount: {}
   'Choose Account': {}

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, colors} 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

@@ -14,7 +14,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 {s} from 'lib/styles'
 import {isDesktopWeb} from 'platform/detection'

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 {s} from 'lib/styles'
 import {isDesktopWeb} from 'platform/detection'
 import {usePhotoLibraryPermission} from 'lib/hooks/usePermissions'

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/EditProfile.tsx

@@ -21,7 +21,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 = ['80%']

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'
 
 const LOADING_ITEM = {_reactKey: '__loading__'}

src/view/com/posts/FeedItem.tsx

@@ -22,7 +22,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/profile/ProfileHeader.tsx

@@ -29,7 +29,7 @@ import {UserAvatar} from '../util/UserAvatar'
 import {UserBanner} from '../util/UserBanner'
 import {ProfileHeaderLabels} from '../util/moderation/ProfileHeaderLabels'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {NavigationProp} from 'lib/routes/types'
 import {isAndroid, isDesktopWeb, isIOS} from 'platform/detection'
 import {FollowState} from 'state/models/cache/my-follows'

src/view/com/search/HeaderWithInput.tsx

@@ -10,7 +10,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'
 

src/view/screens/Home.tsx

@@ -15,7 +15,7 @@ import {FAB} from '../com/util/fab/FAB'
 import {useStores} from 'state/index'
 import {s} from 'lib/styles'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {ComposeIcon2} from 'lib/icons'
 import {isDesktopWeb} from 'platform/detection'
 

src/view/screens/Notifications.tsx

@@ -14,7 +14,7 @@ import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn'
 import {useStores} from 'state/index'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {s} from 'lib/styles'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 
 type Props = NativeStackScreenProps<
   NotificationsTabNavigatorParams,

src/view/screens/Profile.tsx

@@ -19,7 +19,7 @@ import {Text} from '../com/util/text/Text'
 import {FAB} from '../com/util/fab/FAB'
 import {s, colors} from 'lib/styles'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {ComposeIcon2} from 'lib/icons'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'>

src/view/screens/Settings.tsx

@@ -32,7 +32,7 @@ import {DropdownButton} from 'view/com/util/forms/DropdownButton'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useCustomPalette} from 'lib/hooks/useCustomPalette'
 import {AccountData} from 'state/models/session'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {NavigationProp} from 'lib/routes/types'
 import {pluralize} from 'lib/strings/helpers'
 

src/view/shell/Drawer.tsx

@@ -33,7 +33,7 @@ import {UserAvatar} from 'view/com/util/UserAvatar'
 import {Text} from 'view/com/util/text/Text'
 import {useTheme} from 'lib/ThemeContext'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {pluralize} from 'lib/strings/helpers'
 import {getTabState, TabState} from 'lib/routes/helpers'
 import {NavigationProp} from 'lib/routes/types'

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

@@ -11,7 +11,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {observer} from 'mobx-react-lite'
 import {Text} from 'view/com/util/text/Text'
 import {useStores} from 'state/index'
-import {useAnalytics} from 'lib/analytics'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {clamp} from 'lib/numbers'
 import {
   HomeIcon,
@@ -29,6 +29,8 @@ import {styles} from './BottomBarStyles'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
 
+type TabOptions = 'Home' | 'Search' | 'Notifications' | 'MyProfile'
+
 export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
   const store = useStores()
   const pal = usePalette('default')
@@ -40,7 +42,7 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
   const {footerMinimalShellTransform} = useMinimalShellMode()
 
   const onPressTab = React.useCallback(
-    (tab: string) => {
+    (tab: TabOptions) => {
       track(`MobileShell:${tab}ButtonPressed`)
       const state = navigation.getState()
       const tabState = getTabState(state, tab)