[PAY-390] Improve tipping notification types

packages/mobile/src/screens/notifications-screen/NotificationList.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useContext, useEffect, useState } from 'react'
 
 import Status from 'audius-client/src/common/models/Status'
-import { FeatureFlags } from 'audius-client/src/common/services/remote-config'
 import {
   fetchNotifications,
   refreshNotifications
@@ -17,13 +16,10 @@ import { View, ViewToken } from 'react-native'
 import { FlatList } from 'app/components/core'
 import LoadingSpinner from 'app/components/loading-spinner'
 import { useDispatchWeb } from 'app/hooks/useDispatchWeb'
-import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { isEqual, useSelectorWeb } from 'app/hooks/useSelectorWeb'
 import { makeStyles } from 'app/styles'
 
 import { EmptyNotifications } from './EmptyNotifications'
-import { NotificationBlock } from './NotificationBlock'
-import { NotificationErrorBoundary } from './NotificationErrorBoundary'
 import { NotificationListItem } from './NotificationListItem'
 import { NotificationsDrawerNavigationContext } from './NotificationsDrawerNavigationContext'
 
@@ -109,9 +105,6 @@ export const NotificationList = () => {
   const status = useSelectorWeb(getNotificationStatus)
   const hasMore = useSelectorWeb(getNotificationHasMore)
   const [isRefreshing, setIsRefreshing] = useState(false)
-  const { isEnabled: isTippingEnabled } = useFeatureFlag(
-    FeatureFlags.TIPPING_ENABLED
-  )
 
   const { gesturesDisabled } = useContext(NotificationsDrawerNavigationContext)
 
@@ -146,20 +139,12 @@ export const NotificationList = () => {
       onRefresh={handleRefresh}
       data={notifications}
       keyExtractor={(item: Notification, index) => `${item.id} ${index}`}
-      renderItem={({ item, index }) =>
-        isTippingEnabled ? (
-          <NotificationListItem
-            notification={item}
-            isVisible={isVisible(index)}
-          />
-        ) : (
-          <NotificationErrorBoundary>
-            <View style={styles.itemContainer}>
-              <NotificationBlock notification={item} />
-            </View>
-          </NotificationErrorBoundary>
-        )
-      }
+      renderItem={({ item, index }) => (
+        <NotificationListItem
+          notification={item}
+          isVisible={isVisible(index)}
+        />
+      )}
       ListFooterComponent={
         status === Status.LOADING && !isRefreshing ? (
           <View style={styles.footer}>

packages/mobile/src/screens/notifications-screen/Notifications/FavoriteNotification.tsx

@@ -4,10 +4,9 @@ import {
 } from 'audius-client/src/common/store/notifications/selectors'
 import { Favorite } from 'common/store/notifications/types'
 import { formatCount } from 'common/utils/formatUtil'
-import { isEqual } from 'lodash'
 
 import IconHeart from 'app/assets/images/iconHeart.svg'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
+import { isEqual, useSelectorWeb } from 'app/hooks/useSelectorWeb'
 
 import {
   NotificationHeader,
@@ -38,7 +37,7 @@ export const FavoriteNotification = (props: FavoriteNotificationProps) => {
     (state) => getNotificationUsers(state, notification, USER_LENGTH_LIMIT),
     isEqual
   )
-  const [firstUser] = users
+  const firstUser = users?.[0]
   const otherUsersCount = userIds.length - 1
 
   const entity = useSelectorWeb(
@@ -48,6 +47,8 @@ export const FavoriteNotification = (props: FavoriteNotificationProps) => {
 
   const handlePress = useSocialActionHandler(notification, users)
 
+  if (!users || !firstUser || !entity) return null
+
   return (
     <NotificationTile notification={notification} onPress={handlePress}>
       <NotificationHeader icon={IconHeart}>

packages/mobile/src/screens/notifications-screen/Notifications/FollowNotification.tsx

@@ -1,10 +1,9 @@
 import { getNotificationUsers } from 'audius-client/src/common/store/notifications/selectors'
 import { Follow } from 'common/store/notifications/types'
 import { formatCount } from 'common/utils/formatUtil'
-import { isEqual } from 'lodash'
 
 import IconUser from 'app/assets/images/iconUser.svg'
-import { useSelectorWeb } from 'app/hooks/useSelectorWeb'
+import { isEqual, useSelectorWeb } from 'app/hooks/useSelectorWeb'
 
 import {
   NotificationHeader,
@@ -34,11 +33,13 @@ export const FollowNotification = (props: FollowNotificationProps) => {
     (state) => getNotificationUsers(state, notification, USER_LENGTH_LIMIT),
     isEqual
   )
-  const [firstUser] = users
+  const firstUser = users?.[0]
   const otherUsersCount = userIds.length - 1
 
   const handlePress = useSocialActionHandler(notification, users)
 
+  if (!users || !firstUser) return null
+
   return (
     <NotificationTile notification={notification} onPress={handlePress}>
       <NotificationHeader icon={IconUser}>

packages/mobile/src/screens/notifications-screen/Notifications/MilestoneNotification.tsx

@@ -132,7 +132,6 @@ export const MilestoneNotification = (props: MilestoneNotificationProps) => {
   const renderBody = () => {
     const { achievement, value } = notification
     if (achievement === Achievement.Followers) {
-      const { value } = notification
       return `${messages.follows} ${formatCount(value)} ${achievement}`
     } else if (entity) {
       const { entityType } = notification