Amplitude tracking for chat report abuse (#3639)

packages/common/src/models/Analytics.ts

@@ -338,7 +338,8 @@ export enum Name {
   SEND_MESSAGE_REACTION_FAILURE = 'Send Message Reaction: Failure',
   MESSAGE_UNFURL_TRACK = 'Message Unfurl: Track',
   MESSAGE_UNFURL_PLAYLIST = 'Message Unfurl: Playlist',
-  TIP_UNLOCKED_CHAT = 'Unlocked Chat: Tip'
+  TIP_UNLOCKED_CHAT = 'Unlocked Chat: Tip',
+  CHAT_REPORT_USER = 'Report User: Chat'
 }
 
 type PageView = {
@@ -1598,6 +1599,11 @@ type TipUnlockedChat = {
   recipientUserId: ID
 }
 
+type ChatReportUser = {
+  eventName: Name.CHAT_REPORT_USER
+  reportedUserId: ID
+}
+
 export type BaseAnalyticsEvent = { type: typeof ANALYTICS_TRACK_EVENT }
 
 export type AllTrackingEvents =
@@ -1816,3 +1822,4 @@ export type AllTrackingEvents =
   | MessageUnfurlTrack
   | MessageUnfurlPlaylist
   | TipUnlockedChat
+  | ChatReportUser

packages/common/src/store/pages/chat/sagas.ts

@@ -59,7 +59,6 @@ const {
   fetchBlockersSucceeded,
   unblockUser,
   blockUser,
-  reportUser,
   fetchPermissions,
   fetchPermissionsSucceeded,
   fetchLinkUnfurl,
@@ -518,19 +517,6 @@ function* doUnblockUser(action: ReturnType<typeof unblockUser>) {
   }
 }
 
-function* doReportUser(action: ReturnType<typeof reportUser>) {
-  try {
-    console.log('reportUser', action.payload)
-  } catch (e) {
-    console.error('reportUserFailed', e)
-    const reportToSentry = yield* getContext('reportToSentry')
-    reportToSentry({
-      level: ErrorLevel.Error,
-      error: e as Error
-    })
-  }
-}
-
 function* doFetchPermissions(action: ReturnType<typeof fetchPermissions>) {
   try {
     const currentUserId = yield* select(getUserId)
@@ -681,10 +667,6 @@ function* watchUnblockUser() {
   yield takeEvery(unblockUser, doUnblockUser)
 }
 
-function* watchReportUser() {
-  yield takeEvery(reportUser, doReportUser)
-}
-
 function* watchFetchPermissions() {
   yield takeEvery(fetchPermissions, doFetchPermissions)
 }
@@ -712,7 +694,6 @@ export const sagas = () => {
     watchFetchBlockers,
     watchBlockUser,
     watchUnblockUser,
-    watchReportUser,
     watchFetchPermissions,
     watchFetchLinkUnfurlMetadata,
     watchDeleteChat

packages/common/src/store/pages/chat/slice.ts

@@ -503,9 +503,6 @@ const slice = createSlice({
     unblockUser: (_state, _action: PayloadAction<{ userId: ID }>) => {
       // triggers saga
     },
-    reportUser: (_state, _action: PayloadAction<{ userId: ID }>) => {
-      // triggers saga
-    },
     fetchPermissions: (_state, _action: PayloadAction<{ userIds: ID[] }>) => {
       // triggers saga
     },

packages/mobile/src/components/block-messages-drawer/BlockMessagesDrawer.tsx

@@ -9,14 +9,16 @@ import IconInfo from 'app/assets/images/iconInfo.svg'
 import { Text, Button } from 'app/components/core'
 import { NativeDrawer } from 'app/components/drawer'
 import { useDrawer } from 'app/hooks/useDrawer'
+import { track, make } from 'app/services/analytics'
 import { setVisibility } from 'app/store/drawers/slice'
 import { makeStyles, flexRowCentered } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
+import { EventNames } from 'app/types/analytics'
 import { useColor } from 'app/utils/theme'
 
 const { getUser } = cacheUsersSelectors
 const { getDoesBlockUser, getCanCreateChat } = chatSelectors
-const { blockUser, unblockUser, createChat, reportUser } = chatActions
+const { blockUser, unblockUser, createChat } = chatActions
 
 const BLOCK_MESSAGES_MODAL_NAME = 'BlockMessages'
 
@@ -127,7 +129,12 @@ export const BlockMessagesDrawer = () => {
     } else {
       dispatch(blockUser({ userId }))
       if (isReportAbuse) {
-        dispatch(reportUser({ userId }))
+        track(
+          make({
+            eventName: EventNames.CHAT_REPORT_USER,
+            reportedUserId: userId
+          })
+        )
       }
     }
     dispatch(

packages/web/src/pages/chat-page/components/BlockUserConfirmationModal.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import { User, chatActions } from '@audius/common'
+import { User, chatActions, Name } from '@audius/common'
 import {
   Button,
   ButtonType,
@@ -16,10 +16,11 @@ import { useDispatch } from 'react-redux'
 
 import { HelpCallout } from 'components/help-callout/HelpCallout'
 import { UserNameAndBadges } from 'components/user-name-and-badges/UserNameAndBadges'
+import { track, make } from 'services/analytics'
 
 import styles from './BlockUserConfirmationModal.module.css'
 
-const { blockUser, reportUser } = chatActions
+const { blockUser } = chatActions
 
 const messages = {
   title: 'Are you sure?',
@@ -56,7 +57,12 @@ export const BlockUserConfirmationModal = ({
   const handleConfirmClicked = useCallback(() => {
     dispatch(blockUser({ userId: user.user_id }))
     if (isReportAbuse) {
-      dispatch(reportUser({ userId: user.user_id }))
+      track(
+        make({
+          eventName: Name.CHAT_REPORT_USER,
+          reportedUserId: user.user_id
+        })
+      )
     }
     onClose()
   }, [dispatch, isReportAbuse, onClose, user.user_id])