Improved translation response

package.json

@@ -4,7 +4,7 @@
     "native": "220206",
     "major": 3,
     "minor": 4,
-    "patch": 0,
+    "patch": 1,
     "expo": "44.0.0"
   },
   "description": "tooot app for Mastodon",

src/api/tooot.ts

@@ -53,7 +53,9 @@ const apiTooot = async <T = unknown>({
       Accept: '*/*',
       ...headers
     },
-    ...(body && { data: body })
+    ...(body && { data: body }),
+    validateStatus: status =>
+      url.includes('translate') ? status < 500 : status === 200
   })
     .then(response => {
       return Promise.resolve({

src/components/Timeline/Shared/Translate.tsx

@@ -32,6 +32,9 @@ const TimelineTranslate = React.memo(
 
     const settingsLanguage = useSelector(getSettingsLanguage)
 
+    if (Localization.locale.includes(tootLanguage)) {
+      return null
+    }
     if (settingsLanguage?.includes(tootLanguage)) {
       return null
     }
@@ -88,13 +91,19 @@ const TimelineTranslate = React.memo(
             {isError
               ? t('shared.translate.failed')
               : isSuccess
-              ? t('shared.translate.succeed', {
+              ? typeof data?.error === 'string'
-                  provider: data?.provider,
+                ? t(`shared.translate.${data.error}`)
-                  source: data?.sourceLanguage
+                : t('shared.translate.succeed', {
-                })
+                    provider: data?.provider,
+                    source: data?.sourceLanguage
+                  })
               : t('shared.translate.default')}
+          </Text>
+          <Text>
             {__DEV__
-              ? ` Source: ${status.language}; Target: ${settingsLanguage}`
+              ? ` Source: ${status.language}; Target: ${
+                  Localization.locale || settingsLanguage || 'en'
+                }`
               : undefined}
           </Text>
           {isLoading ? (
@@ -105,7 +114,7 @@ const TimelineTranslate = React.memo(
             />
           ) : null}
         </Pressable>
-        {data
+        {data && data.error === undefined
           ? data.text.map((d, i) => (
               <ParseHTML
                 key={i}

src/i18n/en/components/timeline.json

@@ -81,7 +81,9 @@
     "translate": {
       "default": "Translate",
       "succeed": "Translated by {{provider}} from {{source}}",
-      "failed": "Translation failed"
+      "failed": "Translation failed",
+      "source_not_supported": "toot's language is not supported",
+      "target_not_supported": "The target language is not supported"
     },
     "header": {
       "shared": {

src/utils/queryHooks/translate.ts

@@ -3,11 +3,19 @@ import haptics from '@components/haptics'
 import { AxiosError } from 'axios'
 import { QueryFunctionContext, useQuery, UseQueryOptions } from 'react-query'
 
-type Translations = {
+type Translations =
-  provider: string
+  | {
-  sourceLanguage: string
+      error: undefined
-  text: string[]
+      provider: string
-}
+      sourceLanguage: string
+      text: string[]
+    }
+  | {
+      error: string
+      provider: undefined
+      sourceLanguage: undefined
+      text: undefined
+    }
 
 export type QueryKeyTranslate = [
   'Translate',