From a22e9593b23886cf5c125694b491cd67de7638e9 Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>
Date: Wed, 17 Nov 2021 17:02:57 -0300
Subject: [PATCH] Chore: Migrate E2EEncryptionSecurityView to Typescript
 (#3489)

Co-authored-by: AlexAlexandre <alexalexandrejr@gmail.com>
Co-authored-by: Diego Mello <diegolmello@gmail.com>
---
 ...yView.js => E2EEncryptionSecurityView.tsx} | 57 +++++++++++--------
 1 file changed, 33 insertions(+), 24 deletions(-)
 rename app/views/{E2EEncryptionSecurityView.js => E2EEncryptionSecurityView.tsx} (81%)

diff --git a/app/views/E2EEncryptionSecurityView.js b/app/views/E2EEncryptionSecurityView.tsx
similarity index 81%
rename from app/views/E2EEncryptionSecurityView.js
rename to app/views/E2EEncryptionSecurityView.tsx
index 67a42453..d5b0b27a 100644
--- a/app/views/E2EEncryptionSecurityView.js
+++ b/app/views/E2EEncryptionSecurityView.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import PropTypes from 'prop-types';
+import { StyleSheet, Text, View, TextInput as TextInputComp } from 'react-native';
+import { StackNavigationOptions } from '@react-navigation/stack';
 import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
 
 import StatusBar from '../containers/StatusBar';
 import * as List from '../containers/List';
@@ -41,20 +42,41 @@ const styles = StyleSheet.create({
 	}
 });
 
-class E2EEncryptionSecurityView extends React.Component {
+interface IE2EEncryptionSecurityViewState {
+	newPassword: string;
+}
+
+interface IE2EEncryptionSecurityViewProps {
+	theme: string;
+	user: {
+		roles: string[];
+		id: string;
+	};
+	server: string;
+	encryptionEnabled: boolean;
+	logout(): void;
+}
+
+class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityViewProps, IE2EEncryptionSecurityViewState> {
+	private newPasswordInputRef: any = React.createRef();
+
+	static navigationOptions = (): StackNavigationOptions => ({
+		title: I18n.t('E2E_Encryption')
+	});
+
 	state = { newPassword: '' };
 
-	newPasswordInputRef = React.createRef();
+	onChangePasswordText = debounce((text: string) => this.setState({ newPassword: text }), 300);
 
-	onChangePasswordText = debounce(text => this.setState({ newPassword: text }), 300);
-
-	setNewPasswordRef = ref => (this.newPasswordInputRef = ref);
+	setNewPasswordRef = (ref: TextInputComp) => (this.newPasswordInputRef = ref);
 
 	changePassword = () => {
 		const { newPassword } = this.state;
 		if (!newPassword.trim()) {
 			return;
 		}
+		// TODO: Remove ts-ignore when migrate the showConfirmationAlert
+		// @ts-ignore
 		showConfirmationAlert({
 			title: I18n.t('Are_you_sure_question_mark'),
 			message: I18n.t('E2E_encryption_change_password_message'),
@@ -76,6 +98,8 @@ class E2EEncryptionSecurityView extends React.Component {
 	};
 
 	resetOwnKey = () => {
+		// TODO: Remove ts-ignore when migrate the showConfirmationAlert
+		// @ts-ignore
 		showConfirmationAlert({
 			title: I18n.t('Are_you_sure_question_mark'),
 			message: I18n.t('E2E_encryption_reset_message'),
@@ -170,29 +194,14 @@ class E2EEncryptionSecurityView extends React.Component {
 	}
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
 	server: state.server.server,
 	user: getUserSelector(state),
 	encryptionEnabled: state.encryption.enabled
 });
 
-const mapDispatchToProps = dispatch => ({
+const mapDispatchToProps = (dispatch: Dispatch) => ({
 	logout: () => dispatch(logoutAction(true))
 });
 
-E2EEncryptionSecurityView.navigationOptions = () => ({
-	title: I18n.t('E2E_Encryption')
-});
-
-E2EEncryptionSecurityView.propTypes = {
-	theme: PropTypes.string,
-	user: PropTypes.shape({
-		roles: PropTypes.array,
-		id: PropTypes.string
-	}),
-	server: PropTypes.string,
-	encryptionEnabled: PropTypes.bool,
-	logout: PropTypes.func
-};
-
 export default connect(mapStateToProps, mapDispatchToProps)(withTheme(E2EEncryptionSecurityView));