From f52a017ff326a5457ec3f11264c57ea5cb4f8959 Mon Sep 17 00:00:00 2001
From: Alex Junior <alexalexandrejr@gmail.com>
Date: Wed, 10 Nov 2021 11:35:01 -0300
Subject: [PATCH] Chore: Migrate LanguageView to TypeScript

* chore: migrate the view LanguageView to ts

* chore: create the `ILanguageViewState` interface
---
 app/externalModules.d.ts                      |  1 +
 .../LanguageView/{index.js => index.tsx}      | 51 +++++++++++--------
 2 files changed, 30 insertions(+), 22 deletions(-)
 rename app/views/LanguageView/{index.js => index.tsx} (78%)

diff --git a/app/externalModules.d.ts b/app/externalModules.d.ts
index 3f7d7a6d8..fb054b8f6 100644
--- a/app/externalModules.d.ts
+++ b/app/externalModules.d.ts
@@ -9,3 +9,4 @@ declare module '@rocket.chat/ui-kit';
 declare module '@rocket.chat/sdk';
 declare module 'react-native-config-reader';
 declare module 'react-native-keycommands';
+declare module 'react-native-restart';
diff --git a/app/views/LanguageView/index.js b/app/views/LanguageView/index.tsx
similarity index 78%
rename from app/views/LanguageView/index.js
rename to app/views/LanguageView/index.tsx
index 29f65bf55..955572e24 100644
--- a/app/views/LanguageView/index.js
+++ b/app/views/LanguageView/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { FlatList } from 'react-native';
 import { connect } from 'react-redux';
 import RNRestart from 'react-native-restart';
+import { Dispatch } from 'redux';
 
 import RocketChat from '../../lib/rocketchat';
 import I18n, { LANGUAGES, isRTL } from '../../i18n';
@@ -18,26 +18,33 @@ import { getUserSelector } from '../../selectors/login';
 import database from '../../lib/database';
 import SafeAreaView from '../../containers/SafeAreaView';
 
-class LanguageView extends React.Component {
+interface ILanguageViewProps {
+	user: {
+		id: string;
+		language: string;
+	};
+	setUser(user: object): void;
+	appStart(params: any): void;
+	theme: string;
+}
+
+interface ILanguageViewState {
+	language: string;
+}
+
+class LanguageView extends React.Component<ILanguageViewProps, ILanguageViewState> {
 	static navigationOptions = () => ({
 		title: I18n.t('Change_Language')
 	});
 
-	static propTypes = {
-		user: PropTypes.object,
-		setUser: PropTypes.func,
-		appStart: PropTypes.func,
-		theme: PropTypes.string
-	};
-
-	constructor(props) {
+	constructor(props: ILanguageViewProps) {
 		super(props);
 		this.state = {
 			language: props.user ? props.user.language : 'en'
 		};
 	}
 
-	shouldComponentUpdate(nextProps, nextState) {
+	shouldComponentUpdate(nextProps: ILanguageViewProps, nextState: ILanguageViewState) {
 		const { language } = this.state;
 		const { user, theme } = this.props;
 		if (nextProps.theme !== theme) {
@@ -52,12 +59,12 @@ class LanguageView extends React.Component {
 		return false;
 	}
 
-	formIsChanged = language => {
+	formIsChanged = (language: string) => {
 		const { user } = this.props;
 		return user.language !== language;
 	};
 
-	submit = async language => {
+	submit = async (language: string) => {
 		if (!this.formIsChanged(language)) {
 			return;
 		}
@@ -78,11 +85,11 @@ class LanguageView extends React.Component {
 		}
 	};
 
-	changeLanguage = async language => {
+	changeLanguage = async (language: string) => {
 		logEvent(events.LANG_SET_LANGUAGE);
 		const { user, setUser } = this.props;
 
-		const params = {};
+		const params: { language?: string } = {};
 
 		// language
 		if (user.language !== language) {
@@ -95,10 +102,10 @@ class LanguageView extends React.Component {
 
 			const serversDB = database.servers;
 			const usersCollection = serversDB.get('users');
-			await serversDB.action(async () => {
+			await serversDB.write(async () => {
 				try {
 					const userRecord = await usersCollection.find(user.id);
-					await userRecord.update(record => {
+					await userRecord.update((record: any) => {
 						record.language = params.language;
 					});
 				} catch (e) {
@@ -117,7 +124,7 @@ class LanguageView extends React.Component {
 		return <List.Icon name='check' color={themes[theme].tintColor} />;
 	};
 
-	renderItem = ({ item }) => {
+	renderItem = ({ item }: { item: { value: string; label: string } }) => {
 		const { value, label } = item;
 		const { language } = this.state;
 		const isSelected = language === value;
@@ -151,13 +158,13 @@ class LanguageView extends React.Component {
 	}
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
 	user: getUserSelector(state)
 });
 
-const mapDispatchToProps = dispatch => ({
-	setUser: params => dispatch(setUserAction(params)),
-	appStart: params => dispatch(appStartAction(params))
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+	setUser: (params: any) => dispatch(setUserAction(params)),
+	appStart: (params: any) => dispatch(appStartAction(params))
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(withTheme(LanguageView));