Basic translation working

src/@types/translate.d.ts

@@ -0,0 +1,15 @@
+declare namespace Translate {
+  type Detect = {
+    confidence: number
+    language: string
+  }
+
+  type Language = {
+    code: string
+    name: string
+  }
+
+  type Translate = {
+    translatedText: string
+  }
+}

src/components/Timeline/Default.tsx

@@ -19,6 +19,7 @@ import { Pressable, StyleSheet, View } from 'react-native'
 import { useSelector } from 'react-redux'
 import TimelineActionsUsers from './Shared/ActionsUsers'
 import TimelineFullConversation from './Shared/FullConversation'
+import TimelineTranslate from './Shared/Translate'
 
 export interface Props {
   item: Mastodon.Status & { _pinned?: boolean } // For account page, internal property
@@ -129,6 +130,7 @@ const TimelineDefault: React.FC<Props> = ({
           <TimelineCard card={actualStatus.card} />
         )}
         <TimelineFullConversation queryKey={queryKey} status={actualStatus} />
+        <TimelineTranslate status={actualStatus} highlighted={highlighted} />
       </View>
 
       <TimelineActionsUsers status={actualStatus} highlighted={highlighted} />

src/components/Timeline/Shared/Translate.tsx

@@ -0,0 +1,59 @@
+import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
+import { useTranslateQuery } from '@utils/queryHooks/translate'
+import { getSettingsLanguage } from '@utils/slices/settingsSlice'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Text } from 'react-native'
+import { useSelector } from 'react-redux'
+
+export interface Props {
+  highlighted: boolean
+  status: Mastodon.Status
+}
+
+const TimelineTranslate = React.memo(
+  ({ highlighted, status }: Props) => {
+    if (!highlighted) {
+      return null
+    }
+    if (!status.language) {
+      return null
+    }
+
+    const settingsLanguage = useSelector(getSettingsLanguage, () => true)
+    const tootLanguage = status.language.slice(0, 2)
+
+    if (settingsLanguage.includes(tootLanguage)) {
+      return null
+    }
+
+    const { t } = useTranslation('componentTimeline')
+    const { theme } = useTheme()
+
+    const { data } = useTranslateQuery({
+      toot: status.content,
+      source: status.language,
+      target: settingsLanguage.slice(0, 2)
+    })
+
+    return (
+      <>
+        <Text
+          style={{
+            ...StyleConstants.FontStyle.S,
+            color: theme.blue,
+            marginTop: StyleConstants.Font.Size.S
+          }}
+        >
+          {t('shared.translate')}
+        </Text>
+        {data ? <Text children={data} /> : null}
+      </>
+    )
+  },
+  () => true
+)
+
+export default TimelineTranslate

src/i18n/en/components/timeline.json

@@ -74,6 +74,7 @@
       "expandHint": "hidden content"
     },
     "fullConversation": "Read conversations",
+    "translate": "Translate",
     "header": {
       "shared": {
         "account": {

src/utils/queryHooks/translate.ts

@@ -0,0 +1,30 @@
+import apiGeneral from '@api/general'
+import { useQuery } from 'react-query'
+
+export type QueryKeyTranslate = [
+  'Translate',
+  { toot: string; source: string; target: string }
+]
+
+const queryFunction = ({ queryKey }: { queryKey: QueryKeyTranslate }) => {
+  const { toot, source, target } = queryKey[1]
+
+  return apiGeneral<Translate.Translate>({
+    domain: 'translate.tooot.app',
+    method: 'post',
+    url: 'translate',
+    params: {
+      api_key: '65180371-1ddb-4ec0-9aa3-ac47d371c41a',
+      q: toot,
+      source,
+      target
+    }
+  }).then(res => res.body.translatedText)
+}
+
+const useTranslateQuery = (queryKeyParams: QueryKeyTranslate[1]) => {
+  const queryKey: QueryKeyTranslate = ['Translate', { ...queryKeyParams }]
+  return useQuery(queryKey, queryFunction)
+}
+
+export { useTranslateQuery }