Update muted words dialog with expiresAt and actorTarget (#4801)

* WIP not working dropdown

* Update MutedWords dialog

* Add i18n formatDistance

* Comments

* Handle text wrapping

* Update label copy

Co-authored-by: Hailey <me@haileyok.com>

* Fix alignment

* Improve translation output

* Revert toggle changes

* Better types for useFormatDistance

* Tweaks

* Integrate new sdk version into TagMenu

* Use ampersand

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Bump SDK

---------

Co-authored-by: Hailey <me@haileyok.com>
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

src/components/TagMenu/index.tsx

@@ -1,27 +1,27 @@
 import React from 'react'
 import {View} from 'react-native'
-import {useNavigation} from '@react-navigation/native'
-import {useLingui} from '@lingui/react'
 import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
 
-import {atoms as a, native, useTheme} from '#/alf'
-import * as Dialog from '#/components/Dialog'
-import {Text} from '#/components/Typography'
-import {Button, ButtonText} from '#/components/Button'
-import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
-import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person'
-import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute'
-import {Divider} from '#/components/Divider'
-import {Link} from '#/components/Link'
 import {makeSearchLink} from '#/lib/routes/links'
 import {NavigationProp} from '#/lib/routes/types'
+import {isInvalidHandle} from '#/lib/strings/handles'
 import {
   usePreferencesQuery,
+  useRemoveMutedWordsMutation,
   useUpsertMutedWordsMutation,
-  useRemoveMutedWordMutation,
 } from '#/state/queries/preferences'
+import {atoms as a, native, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {Divider} from '#/components/Divider'
+import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
+import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute'
+import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person'
+import {Link} from '#/components/Link'
 import {Loader} from '#/components/Loader'
-import {isInvalidHandle} from '#/lib/strings/handles'
+import {Text} from '#/components/Typography'
 
 export function useTagMenuControl() {
   return Dialog.useDialogControl()
@@ -52,10 +52,10 @@ export function TagMenu({
     reset: resetUpsert,
   } = useUpsertMutedWordsMutation()
   const {
-    mutateAsync: removeMutedWord,
+    mutateAsync: removeMutedWords,
     variables: optimisticRemove,
     reset: resetRemove,
-  } = useRemoveMutedWordMutation()
+  } = useRemoveMutedWordsMutation()
   const displayTag = '#' + tag
 
   const isMuted = Boolean(
@@ -65,9 +65,20 @@ export function TagMenu({
       optimisticUpsert?.find(
         m => m.value === tag && m.targets.includes('tag'),
       )) &&
-      !(optimisticRemove?.value === tag),
+      !optimisticRemove?.find(m => m?.value === tag),
   )
 
+  /*
+   * Mute word records that exactly match the tag in question.
+   */
+  const removeableMuteWords = React.useMemo(() => {
+    return (
+      preferences?.moderationPrefs.mutedWords?.filter(word => {
+        return word.value === tag
+      }) || []
+    )
+  }, [tag, preferences?.moderationPrefs?.mutedWords])
+
   return (
     <>
       {children}
@@ -212,13 +223,16 @@ export function TagMenu({
                         control.close(() => {
                           if (isMuted) {
                             resetUpsert()
-                            removeMutedWord({
-                              value: tag,
-                              targets: ['tag'],
-                            })
+                            removeMutedWords(removeableMuteWords)
                           } else {
                             resetRemove()
-                            upsertMutedWord([{value: tag, targets: ['tag']}])
+                            upsertMutedWord([
+                              {
+                                value: tag,
+                                targets: ['tag'],
+                                actorTarget: 'all',
+                              },
+                            ])
                           }
                         })
                       }}>

src/components/TagMenu/index.web.tsx

@@ -3,16 +3,16 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
-import {isInvalidHandle} from '#/lib/strings/handles'
-import {EventStopper} from '#/view/com/util/EventStopper'
-import {NativeDropdown} from '#/view/com/util/forms/NativeDropdown'
 import {NavigationProp} from '#/lib/routes/types'
+import {isInvalidHandle} from '#/lib/strings/handles'
+import {enforceLen} from '#/lib/strings/helpers'
 import {
   usePreferencesQuery,
+  useRemoveMutedWordsMutation,
   useUpsertMutedWordsMutation,
-  useRemoveMutedWordMutation,
 } from '#/state/queries/preferences'
-import {enforceLen} from '#/lib/strings/helpers'
+import {EventStopper} from '#/view/com/util/EventStopper'
+import {NativeDropdown} from '#/view/com/util/forms/NativeDropdown'
 import {web} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 
@@ -47,8 +47,8 @@ export function TagMenu({
   const {data: preferences} = usePreferencesQuery()
   const {mutateAsync: upsertMutedWord, variables: optimisticUpsert} =
     useUpsertMutedWordsMutation()
-  const {mutateAsync: removeMutedWord, variables: optimisticRemove} =
-    useRemoveMutedWordMutation()
+  const {mutateAsync: removeMutedWords, variables: optimisticRemove} =
+    useRemoveMutedWordsMutation()
   const isMuted = Boolean(
     (preferences?.moderationPrefs.mutedWords?.find(
       m => m.value === tag && m.targets.includes('tag'),
@@ -56,10 +56,21 @@ export function TagMenu({
       optimisticUpsert?.find(
         m => m.value === tag && m.targets.includes('tag'),
       )) &&
-      !(optimisticRemove?.value === tag),
+      !optimisticRemove?.find(m => m?.value === tag),
   )
   const truncatedTag = '#' + enforceLen(tag, 15, true, 'middle')
 
+  /*
+   * Mute word records that exactly match the tag in question.
+   */
+  const removeableMuteWords = React.useMemo(() => {
+    return (
+      preferences?.moderationPrefs.mutedWords?.filter(word => {
+        return word.value === tag
+      }) || []
+    )
+  }, [tag, preferences?.moderationPrefs?.mutedWords])
+
   const dropdownItems = React.useMemo(() => {
     return [
       {
@@ -105,9 +116,11 @@ export function TagMenu({
           : _(msg`Mute ${truncatedTag}`),
         onPress() {
           if (isMuted) {
-            removeMutedWord({value: tag, targets: ['tag']})
+            removeMutedWords(removeableMuteWords)
           } else {
-            upsertMutedWord([{value: tag, targets: ['tag']}])
+            upsertMutedWord([
+              {value: tag, targets: ['tag'], actorTarget: 'all'},
+            ])
           }
         },
         testID: 'tagMenuMute',
@@ -129,7 +142,8 @@ export function TagMenu({
     tag,
     truncatedTag,
     upsertMutedWord,
-    removeMutedWord,
+    removeMutedWords,
+    removeableMuteWords,
   ])
 
   return (