From d30d4645a557906e68b8613dd731a5d3b5c66f1c Mon Sep 17 00:00:00 2001 From: Gleidson Daniel Silva Date: Thu, 29 Jun 2023 19:01:34 -0300 Subject: [PATCH] chore: migrate AutoTranslateView to hooks (#4677) Co-authored-by: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com> --- app/stacks/InsideStack.tsx | 3 +- app/stacks/MasterDetailStack/index.tsx | 3 +- app/views/AutoTranslateView/index.tsx | 212 +++++++++++-------------- 3 files changed, 95 insertions(+), 123 deletions(-) diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx index 844f26f35..79698c0c4 100644 --- a/app/stacks/InsideStack.tsx +++ b/app/stacks/InsideStack.tsx @@ -113,8 +113,7 @@ const ChatsStackNavigator = () => { - {/* @ts-ignore */} - + {/* @ts-ignore */} diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx index 2d0151649..1ad9df60e 100644 --- a/app/stacks/MasterDetailStack/index.tsx +++ b/app/stacks/MasterDetailStack/index.tsx @@ -138,8 +138,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => { /> - {/* @ts-ignore */} - + ; +const AutoTranslateView = (): React.ReactElement => { + const navigation = useNavigation(); + const { + params: { rid, room } + } = useRoute>(); + const { colors } = useTheme(); -class AutoTranslateView extends React.Component { - static navigationOptions = () => ({ - title: I18n.t('Auto_Translate') - }); + const [languages, setLanguages] = useState<{ language: string; name: string }[]>([]); + const [selectedLanguage, setSelectedLanguage] = useState(room?.autoTranslateLanguage); + const [enableAutoTranslate, setEnableAutoTranslate] = useState(room?.autoTranslate); + const subscription = useRef(null); - private mounted: boolean; - private rid: string; - private roomObservable?: Observable; - private subscription?: Subscription; + useLayoutEffect(() => { + navigation.setOptions({ + title: I18n.t('Auto_Translate') + }); + }, [navigation]); - constructor(props: TAutoTranslateViewProps) { - super(props); - this.mounted = false; - this.rid = props.route.params?.rid ?? ''; - const room = props.route.params?.room; + useEffect(() => { + (async () => { + try { + const languages = await Services.getSupportedLanguagesAutoTranslate(); + setLanguages(languages); + } catch (error) { + console.log(error); + } + })(); + }, []); - if (room && room.observe) { - this.roomObservable = room.observe(); - this.subscription = this.roomObservable.subscribe((changes: ISubscription) => { - if (this.mounted) { - const { selectedLanguage, enableAutoTranslate } = this.state; - if (selectedLanguage !== changes.autoTranslateLanguage) { - this.setState({ selectedLanguage: changes.autoTranslateLanguage }); - } - if (enableAutoTranslate !== changes.autoTranslate) { - this.setState({ enableAutoTranslate: changes.autoTranslate }); - } - } - }); - } - this.state = { - languages: [], - selectedLanguage: room?.autoTranslateLanguage, - enableAutoTranslate: room?.autoTranslate - }; - } + 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(); + }, []); - async componentDidMount() { - this.mounted = true; - try { - const languages = await Services.getSupportedLanguagesAutoTranslate(); - this.setState({ languages }); - } catch (error) { - console.log(error); - } - } - - componentWillUnmount() { - if (this.subscription && this.subscription.unsubscribe) { - this.subscription.unsubscribe(); - } - } - - toggleAutoTranslate = async () => { + const toggleAutoTranslate = async () => { logEvent(events.AT_TOGGLE_TRANSLATE); - const { enableAutoTranslate } = this.state; try { + setEnableAutoTranslate(!enableAutoTranslate); await Services.saveAutoTranslate({ - rid: this.rid, + rid, field: 'autoTranslate', value: enableAutoTranslate ? '0' : '1', options: { defaultLanguage: 'en' } }); - this.setState({ enableAutoTranslate: !enableAutoTranslate }); } catch (error) { + setEnableAutoTranslate(!enableAutoTranslate); logEvent(events.AT_TOGGLE_TRANSLATE_F); - console.log(error); } }; - saveAutoTranslateLanguage = async (language: string) => { + const saveAutoTranslateLanguage = async (selectedLanguage: string) => { logEvent(events.AT_SET_LANG); try { await Services.saveAutoTranslate({ - rid: this.rid, + rid, field: 'autoTranslateLanguage', - value: language + value: selectedLanguage }); - this.setState({ selectedLanguage: language }); + setSelectedLanguage(selectedLanguage); } catch (error) { logEvent(events.AT_SET_LANG_F); - console.log(error); } }; - renderIcon = () => { - const { theme } = this.props; - return ; - }; + const LanguageItem = React.memo(({ language, name }: { language: string; name?: string }) => ( + saveAutoTranslateLanguage(language)} + testID={`auto-translate-view-${language}`} + right={() => (selectedLanguage === language ? : null)} + translateTitle={false} + /> + )); - renderSwitch = () => { - const { enableAutoTranslate } = this.state; - return ; - }; - - renderItem = ({ item }: { item: { language: string; name: string } }) => { - const { selectedLanguage } = this.state; - const { language, name } = item; - const isSelected = selectedLanguage === language; - - return ( - this.saveAutoTranslateLanguage(language)} - testID={`auto-translate-view-${language}`} - right={() => (isSelected ? this.renderIcon() : 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]} /> - ); - }; + + ); +}; - render() { - const { languages } = this.state; - return ( - - - - - - this.renderSwitch()} /> - - - item.language} - renderItem={this.renderItem} - ItemSeparatorComponent={List.Separator} - ListFooterComponent={List.Separator} - ListHeaderComponent={List.Separator} - contentContainerStyle={[List.styles.contentContainerStyleFlatList, styles.list]} - /> - - - ); - } -} - -export default withTheme(AutoTranslateView); +export default AutoTranslateView;