Translated Timeline components

src/components/Timelines/Timeline/Shared/HeaderDefault/ActionsAccount.tsx

@@ -1,64 +1,14 @@
-import React from 'react'
-import { useMutation, useQueryClient } from 'react-query'
 import client from '@api/client'
+import haptics from '@components/haptics'
 import { MenuContainer, MenuHeader, MenuRow } from '@components/Menu'
 import { toast } from '@components/toast'
-import haptics from '@root/components/haptics'
-
-const fireMutation = async ({
-  type,
-  id,
-  stateKey
-}: {
-  type: 'mute' | 'block' | 'reports'
-  id: string
-  stateKey?: 'muting' | 'blocking'
-}) => {
-  let res
-  switch (type) {
-    case 'mute':
-    case 'block':
-      res = await client({
-        method: 'post',
-        instance: 'local',
-        url: `accounts/${id}/${type}`
-      })
-
-      if (res.body[stateKey!] === true) {
-        toast({ type: 'success', content: '功能成功' })
-        return Promise.resolve()
-      } else {
-        toast({ type: 'error', content: '功能错误', autoHide: false })
-        return Promise.reject()
-      }
-      break
-    case 'reports':
-      res = await client({
-        method: 'post',
-        instance: 'local',
-        url: `reports`,
-        params: {
-          account_id: id!
-        }
-      })
-      if (!res.body.error) {
-        toast({ type: 'success', content: '举报账户成功' })
-        return Promise.resolve()
-      } else {
-        toast({
-          type: 'error',
-          content: '举报账户失败，请重试',
-          autoHide: false
-        })
-        return Promise.reject()
-      }
-      break
-  }
-}
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useMutation, useQueryClient } from 'react-query'
 
 export interface Props {
   queryKey?: QueryKey.Timeline
-  account: Pick<Mastodon.Account, 'id' | 'username' | 'acct' | 'url'>
+  account: Pick<Mastodon.Account, 'id' | 'acct'>
   setBottomSheetVisible: React.Dispatch<React.SetStateAction<boolean>>
 }
 
@@ -67,51 +17,103 @@ const HeaderDefaultActionsAccount: React.FC<Props> = ({
   account,
   setBottomSheetVisible
 }) => {
+  const { t } = useTranslation()
   const queryClient = useQueryClient()
+  const fireMutation = useCallback(
+    async ({ type }: { type: 'mute' | 'block' | 'reports' }) => {
+      switch (type) {
+        case 'mute':
+        case 'block':
+          return client({
+            method: 'post',
+            instance: 'local',
+            url: `accounts/${account.id}/${type}`
+          })
+          break
+        case 'reports':
+          return client({
+            method: 'post',
+            instance: 'local',
+            url: `reports`,
+            params: {
+              account_id: account.id!
+            }
+          })
+          break
+      }
+    },
+    []
+  )
   const { mutate } = useMutation(fireMutation, {
-    onSettled: () => {
+    onSuccess: (_, { type }) => {
       haptics('Success')
+      toast({
+        type: 'success',
+        message: t('common:toastMessage.success.message', {
+          function: t(
+            `timeline:shared.header.default.actions.account.${type}.function`,
+            { acct: account.acct }
+          )
+        })
+      })
+    },
+    onError: (_, { type }) => {
+      haptics('Error')
+      toast({
+        type: 'error',
+        message: t('common:toastMessage.error.message', {
+          function: t(
+            `timeline:shared.header.default.actions.account.${type}.function`,
+            { acct: account.acct }
+          )
+        })
+      })
+    },
+    onSettled: () => {
       queryKey && queryClient.invalidateQueries(queryKey)
     }
   })
 
   return (
     <MenuContainer>
-      <MenuHeader heading='关于账户' />
+      <MenuHeader
+        heading={t('timeline:shared.header.default.actions.account.heading')}
+      />
       <MenuRow
         onPress={() => {
           setBottomSheetVisible(false)
-          mutate({
-            type: 'mute',
-            id: account.id,
-            stateKey: 'muting'
-          })
+          mutate({ type: 'mute' })
         }}
         iconFront='eye-off'
-        title={`隐藏 @${account.acct} 的嘟嘟`}
+        title={t('timeline:shared.header.default.actions.account.mute.button', {
+          acct: account.acct
+        })}
       />
       <MenuRow
         onPress={() => {
           setBottomSheetVisible(false)
-          mutate({
-            type: 'block',
-            id: account.id,
-            stateKey: 'blocking'
-          })
+          mutate({ type: 'block' })
         }}
         iconFront='x-circle'
-        title={`屏蔽用户 @${account.acct}`}
+        title={t(
+          'timeline:shared.header.default.actions.account.block.button',
+          {
+            acct: account.acct
+          }
+        )}
       />
       <MenuRow
         onPress={() => {
           setBottomSheetVisible(false)
-          mutate({
-            type: 'reports',
-            id: account.id
-          })
+          mutate({ type: 'reports' })
         }}
         iconFront='flag'
-        title={`举报 @${account.acct}`}
+        title={t(
+          'timeline:shared.header.default.actions.account.report.button',
+          {
+            acct: account.acct
+          }
+        )}
       />
     </MenuContainer>
   )