From 212d7baea0d9cd9740efe35357140c26e881f873 Mon Sep 17 00:00:00 2001
From: Alex Junior <alexalexandrejr@gmail.com>
Date: Wed, 15 Sep 2021 11:38:51 -0300
Subject: [PATCH] Chore: Migrate AutoTranslateView to Typescript (#3380)

* [improve] - migrate the view: AutoTranslateView to typescript

* TODO -> TODO:

Co-authored-by: Diego Mello <diegolmello@gmail.com>
---
 .eslintrc.js                                  |  3 +-
 .../AutoTranslateView/{index.js => index.tsx} | 43 +++++++++++++------
 2 files changed, 32 insertions(+), 14 deletions(-)
 rename app/views/AutoTranslateView/{index.js => index.tsx} (81%)

diff --git a/.eslintrc.js b/.eslintrc.js
index 8edbeaf5d..f5b6d39c8 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -235,7 +235,8 @@ module.exports = {
 						ignoreRestSiblings: true
 					}
 				],
-				'new-cap': 'off'
+				'new-cap': 'off',
+				'lines-between-class-members': 'off'
 			},
 			globals: {
 				JSX: true
diff --git a/app/views/AutoTranslateView/index.js b/app/views/AutoTranslateView/index.tsx
similarity index 81%
rename from app/views/AutoTranslateView/index.js
rename to app/views/AutoTranslateView/index.tsx
index 0c3e9505a..92a77543a 100644
--- a/app/views/AutoTranslateView/index.js
+++ b/app/views/AutoTranslateView/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { FlatList, StyleSheet, Switch } from 'react-native';
 
 import RocketChat from '../../lib/rocketchat';
@@ -17,17 +16,33 @@ const styles = StyleSheet.create({
 	}
 });
 
-class AutoTranslateView extends React.Component {
+interface IRoom {
+	observe: Function;
+	autoTranslateLanguage: boolean;
+	autoTranslate: boolean;
+}
+
+interface IAutoTranslateViewProps {
+	route: {
+		params: {
+			rid?: string;
+			room?: IRoom;
+		};
+	};
+	theme: string;
+}
+
+class AutoTranslateView extends React.Component<IAutoTranslateViewProps, any> {
 	static navigationOptions = () => ({
 		title: I18n.t('Auto_Translate')
 	});
 
-	static propTypes = {
-		route: PropTypes.object,
-		theme: PropTypes.string
-	};
+	private mounted: boolean;
+	private rid: string | undefined;
+	private roomObservable: any;
+	private subscription: any;
 
-	constructor(props) {
+	constructor(props: IAutoTranslateViewProps) {
 		super(props);
 		this.mounted = false;
 		this.rid = props.route.params?.rid;
@@ -35,7 +50,7 @@ class AutoTranslateView extends React.Component {
 
 		if (room && room.observe) {
 			this.roomObservable = room.observe();
-			this.subscription = this.roomObservable.subscribe(changes => {
+			this.subscription = this.roomObservable.subscribe((changes: IRoom) => {
 				if (this.mounted) {
 					const { selectedLanguage, enableAutoTranslate } = this.state;
 					if (selectedLanguage !== changes.autoTranslateLanguage) {
@@ -49,8 +64,8 @@ class AutoTranslateView extends React.Component {
 		}
 		this.state = {
 			languages: [],
-			selectedLanguage: room.autoTranslateLanguage,
-			enableAutoTranslate: room.autoTranslate
+			selectedLanguage: room?.autoTranslateLanguage,
+			enableAutoTranslate: room?.autoTranslate
 		};
 	}
 
@@ -87,13 +102,15 @@ class AutoTranslateView extends React.Component {
 		}
 	};
 
-	saveAutoTranslateLanguage = async language => {
+	saveAutoTranslateLanguage = async (language: string) => {
 		logEvent(events.AT_SET_LANG);
 		try {
+			// TODO: remove the parameter options, after migrate the RocketChat
 			await RocketChat.saveAutoTranslate({
 				rid: this.rid,
 				field: 'autoTranslateLanguage',
-				value: language
+				value: language,
+				options: null
 			});
 			this.setState({ selectedLanguage: language });
 		} catch (error) {
@@ -112,7 +129,7 @@ class AutoTranslateView extends React.Component {
 		return <Switch value={enableAutoTranslate} trackColor={SWITCH_TRACK_COLOR} onValueChange={this.toggleAutoTranslate} />;
 	};
 
-	renderItem = ({ item }) => {
+	renderItem = ({ item }: { item: { language: string; name: string } }) => {
 		const { selectedLanguage } = this.state;
 		const { language, name } = item;
 		const isSelected = selectedLanguage === language;