Display toast after reacting emoji reaction limit (#10799)

eslint-suppressions.json

@@ -707,11 +707,6 @@
       "count": 1
     }
   },
-  "src/components/dms/MessageItem.tsx": {
-    "@typescript-eslint/no-misused-promises": {
-      "count": 1
-    }
-  },
   "src/components/forms/DateField/index.web.tsx": {
     "@typescript-eslint/no-explicit-any": {
       "count": 1

src/components/dms/ActionsWrapper.web.tsx

@@ -1,8 +1,10 @@
 import {useCallback, useRef, useState} from 'react'
 import {Pressable, View} from 'react-native'
 import {type ChatBskyConvoDefs, type ModerationOpts} from '@atproto/api'
+import {plural} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react/macro'
 
+import {EMOJI_REACTION_LIMIT} from '#/lib/constants'
 import {useMaybeProfileShadow} from '#/state/cache/profile-shadow'
 import {useConvoActive} from '#/state/messages/convo'
 import {useSession} from '#/state/session'
@@ -72,7 +74,18 @@ export function ActionsWrapper({
           .removeReaction(message.id, emoji)
           .catch(() => Toast.show(l`Failed to remove emoji reaction`))
       } else {
-        if (hasReachedReactionLimit(message, currentAccount?.did)) return
+        if (hasReachedReactionLimit(message, currentAccount?.did)) {
+          Toast.show(
+            l`You cannot add more than ${plural(EMOJI_REACTION_LIMIT, {
+              one: '# emoji reaction',
+              other: '# emoji reactions',
+            })}`,
+            {
+              type: 'info',
+            },
+          )
+          return
+        }
         convo.addReaction(message.id, emoji).catch(() =>
           Toast.show(l`Failed to add emoji reaction`, {
             type: 'error',

src/components/dms/MessageContextMenu.tsx

@@ -6,8 +6,10 @@ import {
   type ModerationOpts,
   RichText,
 } from '@atproto/api'
+import {plural} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react/macro'
 
+import {EMOJI_REACTION_LIMIT} from '#/lib/constants'
 import {useGoogleTranslate} from '#/lib/hooks/useGoogleTranslate'
 import {richTextToString} from '#/lib/strings/rich-text-helpers'
 import {useMaybeProfileShadow} from '#/state/cache/profile-shadow'
@@ -98,7 +100,18 @@ export let MessageContextMenu = ({
           .removeReaction(message.id, emoji)
           .catch(() => Toast.show(l`Failed to remove emoji reaction`))
       } else {
-        if (hasReachedReactionLimit(message, currentAccount?.did)) return
+        if (hasReachedReactionLimit(message, currentAccount?.did)) {
+          Toast.show(
+            l`You cannot add more than ${plural(EMOJI_REACTION_LIMIT, {
+              one: '# emoji reaction',
+              other: '# emoji reactions',
+            })}`,
+            {
+              type: 'info',
+            },
+          )
+          return
+        }
         convo.addReaction(message.id, emoji).catch(() =>
           Toast.show(l`Failed to add emoji reaction`, {
             type: 'error',

src/components/dms/MessageItem.tsx

@@ -641,7 +641,7 @@ function BlockedPlaceholder({
             <Prompt.Action onPress={() => {}} cta={l`Okay`} color="primary" />
             {profile.viewer?.blocking && !profile.viewer.blockingByList && (
               <Prompt.Action
-                onPress={() => queueUnblock()}
+                onPress={() => void queueUnblock()}
                 cta={l`Unblock`}
                 color="secondary"
               />