tooot/src/components/ContextMenu/instance.ts

import { displayMessage } from '@components/Message'
import { QueryKeyTimeline, useTimelineMutation } from '@utils/queryHooks/timeline'
import { getInstanceUrl } from '@utils/slices/instancesSlice'
import { useTheme } from '@utils/styles/ThemeManager'
import { useTranslation } from 'react-i18next'
import { Alert, 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[]
  status: Mastodon.Status
  queryKey: QueryKeyTimeline
  rootQueryKey?: QueryKeyTimeline
}

const contextMenuInstance = ({ actions, status, queryKey, rootQueryKey }: Props) => {
  const { t } = useTranslation('componentContextMenu')
  const { theme } = useTheme()

  const currentInstance = useSelector(getInstanceUrl)
  const instance = status?.uri && status.uri.split(new RegExp(/\/\/(.*?)\//))[1]

  const queryClient = useQueryClient()
  const mutation = useTimelineMutation({
    onSettled: () => {
      displayMessage({
        theme,
        type: 'success',
        message: t('common:message.success.message', {
          function: t(`instance.block.action`, { instance })
        })
      })
      queryClient.invalidateQueries(queryKey)
      rootQueryKey && queryClient.invalidateQueries(rootQueryKey)
    }
  })

  if (currentInstance !== instance && instance) {
    switch (Platform.OS) {
      case 'ios':
        actions.push({
          id: 'instance',
          title: t('instance.title'),
          actions: [
            {
              id: 'instance-block',
              title: t('instance.block.action', { instance }),
              destructive: true
            }
          ]
        })
        break
      default:
        actions.push({
          id: 'instance-block',
          title: t('instance.block.action', { instance }),
          destructive: true
        })
        break
    }
  }

  return (index: number) => {
    if (typeof index !== 'number' || !actions[index]) {
      return // For Android
    }
    if (
      actions[index].id === 'instance-block' ||
      (actions[index].id === 'instance' && actions[index].actions?.[0].id === 'instance-block')
    ) {
      Alert.alert(
        t('instance.block.alert.title', { instance }),
        t('instance.block.alert.message'),
        [
          {
            text: t('instance.block.alert.buttons.confirm'),
            style: 'destructive',
            onPress: () => {
              mutation.mutate({
                type: 'domainBlock',
                queryKey,
                domain: instance
              })
            }
          },
          {
            text: t('common:buttons.cancel')
          }
        ]
      )
    }
  }
}

export default contextMenuInstance