import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'; import { FlatList, StyleSheet, Switch } from 'react-native'; import { Subscription } from 'rxjs'; import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'; import * as List from '../../containers/List'; import SafeAreaView from '../../containers/SafeAreaView'; import StatusBar from '../../containers/StatusBar'; import { ISubscription } from '../../definitions'; import I18n from '../../i18n'; import { SWITCH_TRACK_COLOR } from '../../lib/constants'; import { events, logEvent } from '../../lib/methods/helpers/log'; import { Services } from '../../lib/services'; import { ChatsStackParamList } from '../../stacks/types'; import { useTheme } from '../../theme'; const styles = StyleSheet.create({ list: { paddingTop: 16 } }); const AutoTranslateView = (): React.ReactElement => { const navigation = useNavigation(); const { params: { rid, room } } = useRoute>(); const { colors } = useTheme(); const [languages, setLanguages] = useState<{ language: string; name: string }[]>([]); const [selectedLanguage, setSelectedLanguage] = useState(room?.autoTranslateLanguage); const [enableAutoTranslate, setEnableAutoTranslate] = useState(room?.autoTranslate); const subscription = useRef(null); useLayoutEffect(() => { navigation.setOptions({ title: I18n.t('Auto_Translate') }); }, [navigation]); useEffect(() => { (async () => { try { const languages = await Services.getSupportedLanguagesAutoTranslate(); setLanguages(languages); } catch (error) { console.log(error); } })(); }, []); useEffect(() => { let letSelectedLanguage = selectedLanguage; let letAutoTranslate = enableAutoTranslate; subscription.current = room.observe().subscribe((changes: ISubscription) => { if (letSelectedLanguage !== changes.autoTranslateLanguage) { setSelectedLanguage(changes.autoTranslateLanguage); letSelectedLanguage = changes.autoTranslateLanguage; } if (letAutoTranslate !== changes.autoTranslate) { setEnableAutoTranslate(changes.autoTranslate); letAutoTranslate = changes.autoTranslate; } }); return () => subscription.current?.unsubscribe && subscription.current.unsubscribe(); }, []); const toggleAutoTranslate = async () => { logEvent(events.AT_TOGGLE_TRANSLATE); try { setEnableAutoTranslate(!enableAutoTranslate); await Services.saveAutoTranslate({ rid, field: 'autoTranslate', value: enableAutoTranslate ? '0' : '1', options: { defaultLanguage: 'en' } }); } catch (error) { setEnableAutoTranslate(!enableAutoTranslate); logEvent(events.AT_TOGGLE_TRANSLATE_F); } }; const saveAutoTranslateLanguage = async (selectedLanguage: string) => { logEvent(events.AT_SET_LANG); try { await Services.saveAutoTranslate({ rid, field: 'autoTranslateLanguage', value: selectedLanguage }); setSelectedLanguage(selectedLanguage); } catch (error) { logEvent(events.AT_SET_LANG_F); } }; const LanguageItem = React.memo(({ language, name }: { language: string; name?: string }) => ( saveAutoTranslateLanguage(language)} testID={`auto-translate-view-${language}`} right={() => (selectedLanguage === language ? : null)} translateTitle={false} /> )); return ( item.name || item.language} renderItem={({ item: { language, name } }) => } ListHeaderComponent={ <> ( )} /> } ItemSeparatorComponent={List.Separator} ListFooterComponent={List.Separator} contentContainerStyle={[List.styles.contentContainerStyleFlatList, styles.list]} /> ); }; export default AutoTranslateView;