From 469c04e90adab0d5326547f0081caaf3d53b2dac Mon Sep 17 00:00:00 2001
From: Alex Junior <alexalexandrejr@gmail.com>
Date: Thu, 19 May 2022 23:42:55 -0300
Subject: [PATCH] Chore: Evaluate e2e screens - TypeScript (#4142)

---
 app/views/E2EEncryptionSecurityView.tsx | 40 +++++++++++--------------
 app/views/E2EHowItWorksView.tsx         | 18 ++++-------
 app/views/E2ESaveYourPasswordView.tsx   | 10 ++++---
 3 files changed, 28 insertions(+), 40 deletions(-)

diff --git a/app/views/E2EEncryptionSecurityView.tsx b/app/views/E2EEncryptionSecurityView.tsx
index 8a46468a3..3a3ef18e2 100644
--- a/app/views/E2EEncryptionSecurityView.tsx
+++ b/app/views/E2EEncryptionSecurityView.tsx
@@ -1,14 +1,13 @@
 import React from 'react';
-import { StyleSheet, Text, View, TextInput as TextInputComp } from 'react-native';
+import { StyleSheet, Text, View, TextInput as RNTextInput } 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';
 import I18n from '../i18n';
 import log, { events, logEvent } from '../utils/log';
-import { TSupportedThemes, withTheme } from '../theme';
+import { withTheme } from '../theme';
 import SafeAreaView from '../containers/SafeAreaView';
 import FormTextInput from '../containers/TextInput/FormTextInput';
 import Button from '../containers/Button';
@@ -16,14 +15,15 @@ import { getUserSelector } from '../selectors/login';
 import { PADDING_HORIZONTAL } from '../containers/List/constants';
 import { themes } from '../lib/constants';
 import { Encryption } from '../lib/encryption';
-import { logout as logoutAction } from '../actions/login';
+import { logout } from '../actions/login';
 import { showConfirmationAlert, showErrorAlert } from '../utils/info';
 import EventEmitter from '../utils/events';
 import { LISTENER } from '../containers/Toast';
 import debounce from '../utils/debounce';
 import sharedStyles from './Styles';
-import { IUser } from '../definitions';
+import { IApplicationState, IBaseScreen, IUser } from '../definitions';
 import { Services } from '../lib/services';
+import { SettingsStackParamList } from '../stacks/types';
 
 const styles = StyleSheet.create({
 	container: {
@@ -47,12 +47,10 @@ interface IE2EEncryptionSecurityViewState {
 	newPassword: string;
 }
 
-interface IE2EEncryptionSecurityViewProps {
-	theme?: TSupportedThemes;
+interface IE2EEncryptionSecurityViewProps extends IBaseScreen<SettingsStackParamList, 'E2EEncryptionSecurityView'> {
 	user: IUser;
 	server: string;
 	encryptionEnabled: boolean;
-	logout(): void;
 }
 
 class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityViewProps, IE2EEncryptionSecurityViewState> {
@@ -66,7 +64,7 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
 
 	onChangePasswordText = debounce((text: string) => this.setState({ newPassword: text }), 300);
 
-	setNewPasswordRef = (ref: TextInputComp) => (this.newPasswordInputRef = ref);
+	setNewPasswordRef = (ref: RNTextInput) => (this.newPasswordInputRef = ref);
 
 	changePassword = () => {
 		const { newPassword } = this.state;
@@ -107,8 +105,8 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
 					 * that's why we're using strict equality to boolean
 					 */
 					if (res === true) {
-						const { logout } = this.props;
-						logout();
+						const { dispatch } = this.props;
+						dispatch(logout());
 					}
 				} catch (e) {
 					log(e);
@@ -127,10 +125,10 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
 		return (
 			<>
 				<List.Section>
-					<Text style={[styles.title, { color: themes[theme!].headerTitleColor }]}>
+					<Text style={[styles.title, { color: themes[theme].headerTitleColor }]}>
 						{I18n.t('E2E_encryption_change_password_title')}
 					</Text>
-					<Text style={[styles.description, { color: themes[theme!].bodyText }]}>
+					<Text style={[styles.description, { color: themes[theme].bodyText }]}>
 						{I18n.t('E2E_encryption_change_password_description')}
 					</Text>
 					<FormTextInput
@@ -161,17 +159,17 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
 	render() {
 		const { theme } = this.props;
 		return (
-			<SafeAreaView testID='e2e-encryption-security-view' style={{ backgroundColor: themes[theme!].backgroundColor }}>
+			<SafeAreaView testID='e2e-encryption-security-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
 				<StatusBar />
 				<List.Container>
 					<View style={styles.container}>
 						{this.renderChangePassword()}
 
 						<List.Section>
-							<Text style={[styles.title, { color: themes[theme!].headerTitleColor }]}>
+							<Text style={[styles.title, { color: themes[theme].headerTitleColor }]}>
 								{I18n.t('E2E_encryption_reset_title')}
 							</Text>
-							<Text style={[styles.description, { color: themes[theme!].bodyText }]}>
+							<Text style={[styles.description, { color: themes[theme].bodyText }]}>
 								{I18n.t('E2E_encryption_reset_description')}
 							</Text>
 							<Button
@@ -179,7 +177,7 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
 								title={I18n.t('E2E_encryption_reset_button')}
 								theme={theme}
 								type='secondary'
-								backgroundColor={themes[theme!].chatComponentBackground}
+								backgroundColor={themes[theme].chatComponentBackground}
 								testID='e2e-encryption-security-view-reset-key'
 							/>
 						</List.Section>
@@ -190,14 +188,10 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
 	}
 }
 
-const mapStateToProps = (state: any) => ({
+const mapStateToProps = (state: IApplicationState) => ({
 	server: state.server.server,
 	user: getUserSelector(state),
 	encryptionEnabled: state.encryption.enabled
 });
 
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-	logout: () => dispatch(logoutAction(true))
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(withTheme(E2EEncryptionSecurityView));
+export default connect(mapStateToProps)(withTheme(E2EEncryptionSecurityView));
diff --git a/app/views/E2EHowItWorksView.tsx b/app/views/E2EHowItWorksView.tsx
index 74212f652..540664b9f 100644
--- a/app/views/E2EHowItWorksView.tsx
+++ b/app/views/E2EHowItWorksView.tsx
@@ -1,15 +1,14 @@
 import React from 'react';
-import { StackNavigationProp } from '@react-navigation/stack';
-import { RouteProp } from '@react-navigation/native';
 import { StyleSheet } from 'react-native';
 
 import SafeAreaView from '../containers/SafeAreaView';
 import { themes } from '../lib/constants';
 import * as HeaderButton from '../containers/HeaderButton';
 import Markdown from '../containers/markdown';
-import { TSupportedThemes, withTheme } from '../theme';
+import { withTheme } from '../theme';
 import I18n from '../i18n';
 import { E2ESaveYourPasswordStackParamList } from '../stacks/types';
+import { IBaseScreen } from '../definitions';
 
 const styles = StyleSheet.create({
 	container: {
@@ -23,17 +22,10 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface INavigation {
-	navigation: StackNavigationProp<E2ESaveYourPasswordStackParamList, 'E2EHowItWorksView'>;
-	route: RouteProp<E2ESaveYourPasswordStackParamList, 'E2EHowItWorksView'>;
-}
+type TE2EHowItWorksViewProps = IBaseScreen<E2ESaveYourPasswordStackParamList, 'E2EHowItWorksView'>;
 
-interface IE2EHowItWorksViewProps extends INavigation {
-	theme: TSupportedThemes;
-}
-
-class E2EHowItWorksView extends React.Component<IE2EHowItWorksViewProps, any> {
-	static navigationOptions = ({ route, navigation }: INavigation) => {
+class E2EHowItWorksView extends React.Component<TE2EHowItWorksViewProps, any> {
+	static navigationOptions = ({ route, navigation }: Pick<TE2EHowItWorksViewProps, 'navigation' | 'route'>) => {
 		const showCloseModal = route.params?.showCloseModal;
 		return {
 			title: I18n.t('How_It_Works'),
diff --git a/app/views/E2ESaveYourPasswordView.tsx b/app/views/E2ESaveYourPasswordView.tsx
index 663d05709..878cd5029 100644
--- a/app/views/E2ESaveYourPasswordView.tsx
+++ b/app/views/E2ESaveYourPasswordView.tsx
@@ -55,7 +55,7 @@ const styles = StyleSheet.create({
 });
 
 interface IE2ESaveYourPasswordViewState {
-	password: string;
+	password: string | null;
 }
 
 interface IE2ESaveYourPasswordViewProps extends IBaseScreen<E2ESaveYourPasswordStackParamList, 'E2ESaveYourPasswordView'> {
@@ -87,7 +87,7 @@ class E2ESaveYourPasswordView extends React.Component<IE2ESaveYourPasswordViewPr
 			// Set stored password on local state
 			const password = UserPreferences.getString(`${server}-${E2E_RANDOM_PASSWORD_KEY}`);
 			if (this.mounted) {
-				this.setState({ password: password! });
+				this.setState({ password });
 			} else {
 				// @ts-ignore
 				this.state.password = password;
@@ -110,8 +110,10 @@ class E2ESaveYourPasswordView extends React.Component<IE2ESaveYourPasswordViewPr
 	onCopy = () => {
 		logEvent(events.E2E_SAVE_PW_COPY);
 		const { password } = this.state;
-		Clipboard.setString(password);
-		EventEmitter.emit(LISTENER, { message: I18n.t('Copied_to_clipboard') });
+		if (password) {
+			Clipboard.setString(password);
+			EventEmitter.emit(LISTENER, { message: I18n.t('Copied_to_clipboard') });
+		}
 	};
 
 	onHowItWorks = () => {