Add new analytics events for group chats (#10830)

src/screens/Messages/ConversationSettings/AddMembersLink.tsx

@@ -15,6 +15,7 @@ import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/
 import {Loader} from '#/components/Loader'
 import * as Toast from '#/components/Toast'
 import {Text} from '#/components/Typography'
+import {useAnalytics} from '#/analytics'
 
 export function AddMembersLink({
   convo,
@@ -25,6 +26,7 @@ export function AddMembersLink({
 }) {
   const t = useTheme()
   const {t: l} = useLingui()
+  const ax = useAnalytics()
 
   const addMembersControl = Dialog.useDialogControl()
 
@@ -33,6 +35,7 @@ export function AddMembersLink({
     convoId,
     {
       onSuccess: data => {
+        ax.metric('groupchat:owner:inviteMember', {convoId})
         addMembersControl.close(() => {
           const members = data.addedMembers ?? []
 

src/screens/Messages/ConversationSettings/MemberMenu.tsx

@@ -68,6 +68,9 @@ export function MemberMenu({
   })
   const convoId = convo.view.id
   const {mutate: removeMembers} = useRemoveFromGroupChat(convoId, {
+    onSuccess: () => {
+      ax.metric('groupchat:owner:kickMember', {convoId})
+    },
     onError: e => {
       logger.error('Failed to remove group chat member', {message: e})
       Toast.show(l`Failed to remove group chat member`, {type: 'error'})

src/screens/Messages/ConversationSettings/index.tsx

@@ -1,4 +1,4 @@
-import {useState} from 'react'
+import {useEffect, useState} from 'react'
 import {Pressable, View} from 'react-native'
 import {
   ChatBskyActorDefs,
@@ -13,6 +13,7 @@ import {HITSLOP_10} from '#/lib/constants'
 import {useBottomBarOffset} from '#/lib/hooks/useBottomBarOffset'
 import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
 import {isBlockedOrBlocking} from '#/lib/moderation/blocked-and-muted'
+import {useCallOnce} from '#/lib/once'
 import {
   type CommonNavigatorParams,
   type NativeStackScreenProps,
@@ -56,6 +57,7 @@ import {Loader} from '#/components/Loader'
 import * as Prompt from '#/components/Prompt'
 import * as Toast from '#/components/Toast'
 import {Text} from '#/components/Typography'
+import {useAnalytics} from '#/analytics'
 import {IS_WEB} from '#/env'
 import * as bsky from '#/types/bsky'
 import {InviteLinkDialog} from '../components/InviteLinkDialog'
@@ -337,9 +339,12 @@ function SettingsHeader({
 }) {
   const t = useTheme()
   const {i18n, t: l} = useLingui()
+  const ax = useAnalytics()
 
   const navigation = useNavigation<NavigationProp>()
 
+  const convoId = convo.view.id
+
   const groupName = convo.details.name
   const [newGroupName, setNewGroupName] = useState(groupName)
 
@@ -350,9 +355,17 @@ function SettingsHeader({
 
   const reportSubjectDid = convo.primaryMember?.did
 
+  const logViewOnce = useCallOnce()
+  useEffect(() => {
+    logViewOnce(() => {
+      ax.metric('groupchat:settings:view', {convoId, isOwner})
+    })
+  }, [ax, convoId, isOwner, logViewOnce])
+
   const {mutate: editGroupName, isPending: isEditingName} =
-    useEditGroupChatName(convo.view.id, {
+    useEditGroupChatName(convoId, {
       onSuccess: () => {
+        ax.metric('groupchat:owner:editName', {convoId})
         Toast.show(l({message: 'Group chat name updated', context: 'toast'}))
       },
       onError: e => {
@@ -362,11 +375,13 @@ function SettingsHeader({
       },
     })
 
-  const {mutate: muteConvo, isPending: isMuting} = useMuteConvo(convo.view.id, {
+  const {mutate: muteConvo, isPending: isMuting} = useMuteConvo(convoId, {
     onSuccess: data => {
       if (data.convo.muted) {
+        ax.metric('groupchat:mute', {convoId})
         Toast.show(l({message: 'Group chat muted', context: 'toast'}))
       } else {
+        ax.metric('groupchat:unmute', {convoId})
         Toast.show(l({message: 'Group chat unmuted', context: 'toast'}))
       }
     },
@@ -376,33 +391,32 @@ function SettingsHeader({
     },
   })
 
-  const {mutate: leaveConvo, isPending: isLeaving} = useLeaveConvo(
-    convo.view.id,
-    {
-      onSuccess: () => {
-        navigation.replace('Messages', {animation: 'pop'})
-      },
-      onError: e => {
-        logger.error('Failed to leave group chat', {message: e})
-        Toast.show(
-          l({message: 'Failed to leave group chat', context: 'toast'}),
-          {type: 'error'},
-        )
-      },
+  const {mutate: leaveConvo, isPending: isLeaving} = useLeaveConvo(convoId, {
+    onSuccess: () => {
+      ax.metric('groupchat:leave', {convoId, isOwner})
+      navigation.replace('Messages', {animation: 'pop'})
     },
-  )
+    onError: e => {
+      logger.error('Failed to leave group chat', {message: e})
+      Toast.show(l({message: 'Failed to leave group chat', context: 'toast'}), {
+        type: 'error',
+      })
+    },
+  })
 
   const {
     mutate: lockConvo,
     mutateAsync: lockConvoAsync,
     isPending: isLocking,
-  } = useLockConvo(convo.view.id, {
+  } = useLockConvo(convoId, {
     onSuccess: (data, {silent}) => {
       if (!ChatBskyConvoDefs.isGroupConvo(data.convo.kind)) return
       if (silent) return
       if (data.convo.kind.lockStatus === 'locked') {
+        ax.metric('groupchat:owner:lock', {convoId})
         Toast.show(l({message: 'Group chat locked', context: 'toast'}))
       } else {
+        ax.metric('groupchat:owner:unlock', {convoId})
         Toast.show(l({message: 'Group chat unlocked', context: 'toast'}))
       }
     },