Fixed #338

Also Android cannot read from ID, using index instead

package.json

@@ -4,7 +4,7 @@
     "native": "220603",
     "major": 4,
     "minor": 1,
-    "patch": 1,
+    "patch": 2,
     "expo": "45.0.0"
   },
   "description": "tooot app for Mastodon",

src/components/ContextMenu/account.ts

@@ -1,5 +1,6 @@
 import analytics from '@components/analytics'
 import { displayMessage } from '@components/Message'
+import { useRelationshipQuery } from '@utils/queryHooks/relationship'
 import {
   MutationVarsTimelineUpdateAccountProperty,
   QueryKeyTimeline,
@@ -8,13 +9,13 @@ import {
 import { getInstanceAccount } from '@utils/slices/instancesSlice'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { useTranslation } from 'react-i18next'
-import { Platform } from 'react-native'
 import { ContextMenuAction } from 'react-native-context-menu-view'
 import { useQueryClient } from 'react-query'
 import { useSelector } from 'react-redux'
 
 export interface Props {
   actions: ContextMenuAction[]
+  type: 'status' | 'account' // Do not need to fetch relationship in timeline
   queryKey?: QueryKeyTimeline
   rootQueryKey?: QueryKeyTimeline
   id: Mastodon.Account['id']
@@ -22,6 +23,7 @@ export interface Props {
 
 const contextMenuAccount = ({
   actions,
+  type,
   queryKey,
   rootQueryKey,
   id: accountId
@@ -32,12 +34,17 @@ const contextMenuAccount = ({
   const queryClient = useQueryClient()
   const mutateion = useTimelineMutation({
     onSuccess: (_, params) => {
+      queryClient.refetchQueries(['Relationship', { id: accountId }])
       const theParams = params as MutationVarsTimelineUpdateAccountProperty
       displayMessage({
         theme,
         type: 'success',
         message: t('common:message.success.message', {
-          function: t(`account.${theParams.payload.property}.action`)
+          function: t(`account.${theParams.payload.property}.action`, {
+            ...(typeof theParams.payload.currentValue === 'boolean' && {
+              context: theParams.payload.currentValue.toString()
+            })
+          })
         })
       })
     },
@@ -47,7 +54,11 @@ const contextMenuAccount = ({
         theme,
         type: 'error',
         message: t('common:message.error.message', {
-          function: t(`account.${theParams.payload.property}.action`)
+          function: t(`account.${theParams.payload.property}.action`, {
+            ...(typeof theParams.payload.currentValue === 'boolean' && {
+              context: theParams.payload.currentValue.toString()
+            })
+          })
         }),
         ...(err.status &&
           typeof err.status === 'number' &&
@@ -70,44 +81,25 @@ const contextMenuAccount = ({
   )
   const ownAccount = instanceAccount?.id === accountId
 
-  if (!ownAccount) {
+  const { data: relationship } = useRelationshipQuery({
-    switch (Platform.OS) {
+    id: accountId,
-      case 'ios':
+    options: { enabled: type === 'account' }
-        actions.push({
-          id: 'account',
-          title: t('account.title'),
-          inlineChildren: true,
-          actions: [
-            {
-              id: 'account-mute',
-              title: t('account.mute.action'),
-              systemIcon: 'eye.slash'
-            },
-            {
-              id: 'account-block',
-              title: t('account.block.action'),
-              systemIcon: 'xmark.circle',
-              destructive: true
-            },
-            {
-              id: 'account-reports',
-              title: t('account.reports.action'),
-              systemIcon: 'flag',
-              destructive: true
-            }
-          ]
   })
-        break
+
-      default:
+  if (!ownAccount) {
     actions.push(
       {
         id: 'account-mute',
-            title: t('account.mute.action'),
+        title: t('account.mute.action', {
+          context: (relationship?.muting || false).toString()
+        }),
         systemIcon: 'eye.slash'
       },
       {
         id: 'account-block',
-            title: t('account.block.action'),
+        title: t('account.block.action', {
+          context: (relationship?.blocking || false).toString()
+        }),
         systemIcon: 'xmark.circle',
         destructive: true
       },
@@ -118,13 +110,10 @@ const contextMenuAccount = ({
         destructive: true
       }
     )
-        break
-    }
   }
 
-  return (id: string) => {
+  return (index: number) => {
-    switch (id) {
+    if (actions[index].id === 'account-mute') {
-      case 'account-mute':
       analytics('timeline_shared_headeractions_account_mute_press', {
         page: queryKey && queryKey[1].page
       })
@@ -132,10 +121,10 @@ const contextMenuAccount = ({
         type: 'updateAccountProperty',
         queryKey,
         id: accountId,
-          payload: { property: 'mute' }
+        payload: { property: 'mute', currentValue: relationship?.muting }
       })
-        break
+    }
-      case 'account-block':
+    if (actions[index].id === 'account-block') {
       analytics('timeline_shared_headeractions_account_block_press', {
         page: queryKey && queryKey[1].page
       })
@@ -143,10 +132,10 @@ const contextMenuAccount = ({
         type: 'updateAccountProperty',
         queryKey,
         id: accountId,
-          payload: { property: 'block' }
+        payload: { property: 'block', currentValue: relationship?.blocking }
       })
-        break
+    }
-      case 'account-report':
+    if (actions[index].id === 'account-report') {
       analytics('timeline_shared_headeractions_account_reports_press', {
         page: queryKey && queryKey[1].page
       })
@@ -156,7 +145,6 @@ const contextMenuAccount = ({
         id: accountId,
         payload: { property: 'reports' }
       })
-        break
     }
   }
 }

src/components/ContextMenu/instance.ts

@@ -71,9 +71,12 @@ const contextMenuInstance = ({
     }
   }
 
-  return (id: string) => {
+  return (index: number) => {
-    switch (id) {
+    if (
-      case 'instance-block':
+      actions[index].id === 'instance-block' ||
+      (actions[index].id === 'instance' &&
+        actions[index].actions?.[0].id === 'instance-block')
+    ) {
       analytics('timeline_shared_headeractions_domain_block_press', {
         page: queryKey[1].page
       })
@@ -85,10 +88,9 @@ const contextMenuInstance = ({
             text: t('instance.block.alert.buttons.confirm'),
             style: 'destructive',
             onPress: () => {
-                analytics(
+              analytics('timeline_shared_headeractions_domain_block_confirm', {
-                  'timeline_shared_headeractions_domain_block_confirm',
+                page: queryKey && queryKey[1].page
-                  { page: queryKey && queryKey[1].page }
+              })
-                )
               mutation.mutate({
                 type: 'domainBlock',
                 queryKey,

src/components/ContextMenu/share.ts

@@ -18,9 +18,8 @@ const contextMenuShare = ({ actions, type, url }: Props) => {
     systemIcon: 'square.and.arrow.up'
   })
 
-  return (id: string) => {
+  return (index: number) => {
-    switch (id) {
+    if (actions[index].id === 'share') {
-      case 'share':
       analytics('timeline_shared_headeractions_share_press')
       switch (Platform.OS) {
         case 'ios':
@@ -30,7 +29,6 @@ const contextMenuShare = ({ actions, type, url }: Props) => {
           Share.share({ message: url })
           break
       }
-        break
     }
   }
 }

src/components/ContextMenu/status.ts

@@ -15,7 +15,7 @@ import {
 } from '@utils/slices/instancesSlice'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { useTranslation } from 'react-i18next'
-import { Alert, Platform } from 'react-native'
+import { Alert } from 'react-native'
 import { ContextMenuAction } from 'react-native-context-menu-view'
 import { useQueryClient } from 'react-query'
 import { useSelector } from 'react-redux'
@@ -88,7 +88,7 @@ const contextMenuStatus = ({
       },
       {
         id: 'status-mute',
-        title: t('status.mute.action-muted', {
+        title: t('status.mute.action', {
           context: status.muted.toString()
         }),
         systemIcon: status.muted ? 'speaker' : 'speaker.slash'
@@ -107,31 +107,18 @@ const contextMenuStatus = ({
     if (status.visibility === 'public' || status.visibility === 'unlisted') {
       accountMenuItems.push({
         id: 'status-pin',
-        title: t('status.pin.action-pinned', {
+        title: t('status.pin.action', {
           context: status.pinned.toString()
         }),
         systemIcon: status.pinned ? 'pin.slash' : 'pin'
       })
     }
 
-    switch (Platform.OS) {
-      case 'ios':
-        actions.push({
-          id: 'status',
-          title: t('status.title'),
-          inlineChildren: true,
-          actions: accountMenuItems
-        })
-        break
-      default:
     actions.push(...accountMenuItems)
-        break
-    }
   }
 
-  return async (id: string) => {
+  return async (index: number) => {
-    switch (id) {
+    if (actions[index].id === 'status-delete') {
-      case 'status-delete':
       analytics('timeline_shared_headeractions_status_delete_press', {
         page: queryKey && queryKey[1].page
       })
@@ -143,12 +130,9 @@ const contextMenuStatus = ({
             text: t('status.delete.alert.buttons.confirm'),
             style: 'destructive',
             onPress: async () => {
-                analytics(
+              analytics('timeline_shared_headeractions_status_delete_confirm', {
-                  'timeline_shared_headeractions_status_delete_confirm',
-                  {
                 page: queryKey && queryKey[1].page
-                  }
+              })
-                )
               mutation.mutate({
                 type: 'deleteItem',
                 source: 'statuses',
@@ -163,8 +147,8 @@ const contextMenuStatus = ({
           }
         ]
       )
-        break
+    }
-      case 'status-delete-edit':
+    if (actions[index].id === 'status-delete-edit') {
       analytics('timeline_shared_headeractions_status_deleteedit_press', {
         page: queryKey && queryKey[1].page
       })
@@ -211,8 +195,8 @@ const contextMenuStatus = ({
           }
         ]
       )
-        break
+    }
-      case 'status-mute':
+    if (actions[index].id === 'status-mute') {
       analytics('timeline_shared_headeractions_status_mute_press', {
         page: queryKey && queryKey[1].page
       })
@@ -228,8 +212,8 @@ const contextMenuStatus = ({
           countValue: undefined
         }
       })
-        break
+    }
-      case 'status-edit':
+    if (actions[index].id === 'status-edit') {
       analytics('timeline_shared_headeractions_status_edit_press', {
         page: queryKey && queryKey[1].page
       })
@@ -260,8 +244,8 @@ const contextMenuStatus = ({
           rootQueryKey
         })
       })
-        break
+    }
-      case 'status-pin':
+    if (actions[index].id === 'status-pin') {
       // Also note that reblogs cannot be pinned.
       analytics('timeline_shared_headeractions_status_pin_press', {
         page: queryKey && queryKey[1].page
@@ -278,7 +262,6 @@ const contextMenuStatus = ({
           countValue: undefined
         }
       })
-        break
     }
   }
 }

src/components/Timeline/Shared/ContextMenu.tsx

@@ -47,6 +47,7 @@ const TimelineContextMenu: React.FC<Props & ContextMenuProps> = ({
   })
   const accountOnPress = contextMenuAccount({
     actions,
+    type: 'status',
     queryKey,
     rootQueryKey,
     id: status.account.id
@@ -62,14 +63,14 @@ const TimelineContextMenu: React.FC<Props & ContextMenuProps> = ({
     <ContextMenuContext.Provider value={actions}>
       <ContextMenu
         actions={actions}
-        onPress={({ nativeEvent: { id } }) => {
+        onPress={({ nativeEvent: { index } }) => {
           for (const on of [
             shareOnPress,
             statusOnPress,
             accountOnPress,
             instanceOnPress
           ]) {
-            on && on(id)
+            on && on(index)
           }
         }}
         children={children}

src/i18n/en/components/contextMenu.json

@@ -3,10 +3,12 @@
   "account": {
     "title": "User actions",
     "mute": {
-      "action": "Mute user"
+      "action_false": "Mute user",
+      "action_true": "Unmute user"
     },
     "block": {
-      "action": "Block user"
+      "action_false": "Block user",
+      "action_true": "Unblock user"
     },
     "reports": {
       "action": "Report user"
@@ -59,12 +61,12 @@
       }
     },
     "mute": {
-      "action-muted_false": "Mute toot and replies",
+      "action_false": "Mute toot and replies",
-      "action-muted_true": "Unmute toot and replies"
+      "action_true": "Unmute toot and replies"
     },
     "pin": {
-      "action-pinned_false": "Pin toot",
+      "action_false": "Pin toot",
-      "action-pinned_true": "Unpin toot"
+      "action_true": "Unpin toot"
     }
   }
 }

src/screens/Tabs/Shared/Root.tsx

@@ -63,15 +63,16 @@ const TabSharedRoot = ({
               })
               const accountOnPress = contextMenuAccount({
                 actions,
+                type: 'account',
                 id: account.id
               })
 
               return (
                 <ContextMenu
                   actions={actions}
-                  onPress={({ nativeEvent: { id } }) => {
+                  onPress={({ nativeEvent: { index } }) => {
-                    shareOnPress(id)
+                    shareOnPress(index)
-                    accountOnPress(id)
+                    accountOnPress(index)
                   }}
                   dropdownMenuMode
                 >

src/utils/queryHooks/timeline.ts

@@ -314,6 +314,7 @@ export type MutationVarsTimelineUpdateAccountProperty = {
   id: Mastodon.Account['id']
   payload: {
     property: 'mute' | 'block' | 'reports'
+    currentValue?: boolean
   }
 }
 
@@ -383,7 +384,9 @@ const mutationFunction = async (params: MutationVarsTimeline) => {
         case 'mute':
           return apiInstance<Mastodon.Account>({
             method: 'post',
-            url: `accounts/${params.id}/${params.payload.property}`
+            url: `accounts/${params.id}/${
+              params.payload.currentValue ? 'un' : ''
+            }${params.payload.property}`
           })
         case 'reports':
           return apiInstance<Mastodon.Account>({