Fixed #566

src/components/Timeline/Shared/Context.tsx

@@ -14,6 +14,7 @@ type ContextType = {
     content: string
     complete: boolean
   }>
+  detectedLanguage?: React.MutableRefObject<string>
 
   highlighted?: boolean
   inThread?: boolean

src/components/Timeline/Shared/Feedback.tsx

@@ -11,7 +11,7 @@ import { StyleSheet, View } from 'react-native'
 import StatusContext from './Context'
 
 const TimelineFeedback = () => {
-  const { status, highlighted } = useContext(StatusContext)
+  const { status, highlighted, detectedLanguage } = useContext(StatusContext)
   if (!status || !highlighted) return null
 
   const { t } = useTranslation('componentTimeline')
@@ -80,7 +80,12 @@ const TimelineFeedback = () => {
             accessibilityHint={t('shared.actionsUsers.history.accessibilityHint')}
             accessibilityRole='button'
             style={[styles.text, { marginRight: 0, color: colors.blue }]}
-            onPress={() => navigation.push('Tab-Shared-History', { id: status.id })}
+            onPress={() =>
+              navigation.push('Tab-Shared-History', {
+                id: status.id,
+                detectedLanguage: detectedLanguage?.current || status.language || ''
+              })
+            }
           >
             {t('shared.actionsUsers.history.text', {
               count: data.length - 1

src/components/Timeline/Shared/Translate.tsx

@@ -13,7 +13,7 @@ import { Circle } from 'react-native-animated-spinkit'
 import StatusContext from './Context'
 
 const TimelineTranslate = () => {
-  const { status, highlighted, copiableContent } = useContext(StatusContext)
+  const { status, highlighted, copiableContent, detectedLanguage } = useContext(StatusContext)
   if (!status || !highlighted) return null
 
   const { t } = useTranslation('componentTimeline')
@@ -38,14 +38,19 @@ const TimelineTranslate = () => {
     ? [copiableContent?.current.content]
     : backupTextProcessing()
 
-  const [detectedLanguage, setDetectedLanguage] = useState<{
+  const [detected, setDetected] = useState<{
     language: string
     confidence: number
   }>({ language: status.language || '', confidence: 0 })
   useEffect(() => {
     const detect = async () => {
       const result = await detectLanguage(text.join('\n\n'))
-      result && setDetectedLanguage(result)
+      if (result) {
+        setDetected(result)
+        if (detectedLanguage) {
+          detectedLanguage.current = result.language
+        }
+      }
     }
     detect()
   }, [])
@@ -57,7 +62,7 @@ const TimelineTranslate = () => {
 
   const [enabled, setEnabled] = useState(false)
   const { refetch, data, isFetching, isSuccess, isError } = useTranslateQuery({
-    source: detectedLanguage.language,
+    source: detected.language,
     target: targetLanguage,
     text,
     options: { enabled }
@@ -66,9 +71,9 @@ const TimelineTranslate = () => {
   const devView = () => {
     return __DEV__ ? (
       <CustomText fontStyle='S' style={{ color: colors.secondary }}>{` Source: ${
-        detectedLanguage?.language
+        detected?.language
       }; Confidence: ${
-        detectedLanguage?.confidence.toString().slice(0, 5) || 'null'
+        detected?.confidence.toString().slice(0, 5) || 'null'
       }; Target: ${targetLanguage}`}</CustomText>
     ) : null
   }
@@ -78,13 +83,13 @@ const TimelineTranslate = () => {
   }
   if (
     Platform.OS === 'ios' &&
-    Localization.locale.slice(0, 2).includes(detectedLanguage.language.slice(0, 2))
+    Localization.locale.slice(0, 2).includes(detected.language.slice(0, 2))
   ) {
     return devView()
   }
   if (
     Platform.OS === 'android' &&
-    settingsLanguage?.slice(0, 2).includes(detectedLanguage.language.slice(0, 2))
+    settingsLanguage?.slice(0, 2).includes(detected.language.slice(0, 2))
   ) {
     return devView()
   }