From 76efadac0e3100db16c91c6f68099155bb680d09 Mon Sep 17 00:00:00 2001
From: Gleidson Daniel Silva <gleidson10daniel@hotmail.com>
Date: Thu, 11 Aug 2022 11:59:40 -0300
Subject: [PATCH] Chore: Migrate E2EEnterYourPasswordView to hooks (#4423)

* migrate E2EEnterYourPasswordView to hooks

* remove navigation options

* minor tweak

Co-authored-by: Reinaldo Neto <reinaldonetof@hotmail.com>
---
 app/stacks/InsideStack.tsx             |   6 +-
 app/stacks/MasterDetailStack/index.tsx |   6 +-
 app/views/E2EEnterYourPasswordView.tsx | 124 ++++++++++---------------
 3 files changed, 49 insertions(+), 87 deletions(-)

diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx
index 5c077081c..21b2004d8 100644
--- a/app/stacks/InsideStack.tsx
+++ b/app/stacks/InsideStack.tsx
@@ -296,11 +296,7 @@ const E2EEnterYourPasswordStackNavigator = () => {
 		<E2EEnterYourPasswordStack.Navigator
 			screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}
 		>
-			<E2EEnterYourPasswordStack.Screen
-				name='E2EEnterYourPasswordView'
-				component={E2EEnterYourPasswordView}
-				options={E2EEnterYourPasswordView.navigationOptions}
-			/>
+			<E2EEnterYourPasswordStack.Screen name='E2EEnterYourPasswordView' component={E2EEnterYourPasswordView} />
 		</E2EEnterYourPasswordStack.Navigator>
 	);
 };
diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx
index c740c781f..bba752d80 100644
--- a/app/stacks/MasterDetailStack/index.tsx
+++ b/app/stacks/MasterDetailStack/index.tsx
@@ -201,11 +201,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 					options={E2ESaveYourPasswordView.navigationOptions}
 				/>
 				<ModalStack.Screen name='E2EHowItWorksView' component={E2EHowItWorksView} />
-				<ModalStack.Screen
-					name='E2EEnterYourPasswordView'
-					component={E2EEnterYourPasswordView}
-					options={E2EEnterYourPasswordView.navigationOptions}
-				/>
+				<ModalStack.Screen name='E2EEnterYourPasswordView' component={E2EEnterYourPasswordView} />
 				<ModalStack.Screen name='UserPreferencesView' component={UserPreferencesView} />
 				<ModalStack.Screen
 					name='UserNotificationPrefView'
diff --git a/app/views/E2EEnterYourPasswordView.tsx b/app/views/E2EEnterYourPasswordView.tsx
index 39d3a550f..3b00c50a3 100644
--- a/app/views/E2EEnterYourPasswordView.tsx
+++ b/app/views/E2EEnterYourPasswordView.tsx
@@ -1,22 +1,19 @@
-import { StackNavigationOptions } from '@react-navigation/stack';
-import React from 'react';
-import { ScrollView, StyleSheet, Text, TextInput as RNTextInput } from 'react-native';
-import { connect } from 'react-redux';
+import { useNavigation } from '@react-navigation/native';
+import React, { useLayoutEffect, useState } from 'react';
+import { ScrollView, StyleSheet, Text } from 'react-native';
+import { useDispatch } from 'react-redux';
 
 import { encryptionDecodeKey } from '../actions/encryption';
-import { themes } from '../lib/constants';
 import Button from '../containers/Button';
 import * as HeaderButton from '../containers/HeaderButton';
+import KeyboardView from '../containers/KeyboardView';
 import SafeAreaView from '../containers/SafeAreaView';
 import StatusBar from '../containers/StatusBar';
 import { FormTextInput } from '../containers/TextInput';
-import { IBaseScreen } from '../definitions';
 import I18n from '../i18n';
-import KeyboardView from '../containers/KeyboardView';
-import { E2EEnterYourPasswordStackParamList } from '../stacks/types';
-import { withTheme } from '../theme';
 import { events, logEvent } from '../lib/methods/helpers/log';
 import scrollPersistTaps from '../lib/methods/helpers/scrollPersistTaps';
+import { useTheme } from '../theme';
 import sharedStyles from './Styles';
 
 const styles = StyleSheet.create({
@@ -30,79 +27,52 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface IE2EEnterYourPasswordViewState {
-	password: string;
-}
+const E2EEnterYourPasswordView = (): React.ReactElement => {
+	const [password, setPassword] = useState('');
+	const { colors } = useTheme();
+	const navigation = useNavigation();
+	const dispatch = useDispatch();
 
-type TE2EEnterYourPasswordViewProps = IBaseScreen<E2EEnterYourPasswordStackParamList, 'E2EEnterYourPasswordView'>;
+	useLayoutEffect(() => {
+		navigation.setOptions({
+			headerLeft: () => <HeaderButton.CloseModal testID='e2e-enter-your-password-view-close' />,
+			title: I18n.t('Enter_Your_E2E_Password')
+		});
+	}, [navigation]);
 
-class E2EEnterYourPasswordView extends React.Component<TE2EEnterYourPasswordViewProps, IE2EEnterYourPasswordViewState> {
-	private passwordInput?: RNTextInput;
-
-	static navigationOptions = ({ navigation }: Pick<TE2EEnterYourPasswordViewProps, 'navigation'>): StackNavigationOptions => ({
-		headerLeft: () => <HeaderButton.CloseModal navigation={navigation} testID='e2e-enter-your-password-view-close' />,
-		title: I18n.t('Enter_Your_E2E_Password')
-	});
-
-	constructor(props: TE2EEnterYourPasswordViewProps) {
-		super(props);
-		this.state = {
-			password: ''
-		};
-	}
-
-	submit = () => {
+	const submit = () => {
 		logEvent(events.E2E_ENTER_PW_SUBMIT);
-		const { password } = this.state;
-		const { dispatch } = this.props;
 		dispatch(encryptionDecodeKey(password));
 	};
 
-	render() {
-		const { password } = this.state;
-		const { theme } = this.props;
-
-		return (
-			<KeyboardView
-				style={{ backgroundColor: themes[theme].backgroundColor }}
-				contentContainerStyle={sharedStyles.container}
-				keyboardVerticalOffset={128}
-			>
-				<StatusBar />
-				<ScrollView
-					{...scrollPersistTaps}
-					style={sharedStyles.container}
-					contentContainerStyle={sharedStyles.containerScrollView}
+	return (
+		<KeyboardView
+			style={{ backgroundColor: colors.backgroundColor }}
+			contentContainerStyle={sharedStyles.container}
+			keyboardVerticalOffset={128}
+		>
+			<StatusBar />
+			<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={sharedStyles.containerScrollView}>
+				<SafeAreaView
+					style={[styles.container, { backgroundColor: colors.backgroundColor }]}
+					testID='e2e-enter-your-password-view'
 				>
-					<SafeAreaView
-						style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}
-						testID='e2e-enter-your-password-view'
-					>
-						<FormTextInput
-							inputRef={(e: RNTextInput) => {
-								this.passwordInput = e;
-							}}
-							placeholder={I18n.t('Password')}
-							returnKeyType='send'
-							secureTextEntry
-							onSubmitEditing={this.submit}
-							onChangeText={value => this.setState({ password: value })}
-							testID='e2e-enter-your-password-view-password'
-							textContentType='password'
-						/>
-						<Button
-							onPress={this.submit}
-							title={I18n.t('Confirm')}
-							disabled={!password}
-							testID='e2e-enter-your-password-view-confirm'
-						/>
-						<Text style={[styles.info, { color: themes[theme].bodyText }]}>{I18n.t('Enter_Your_Encryption_Password_desc1')}</Text>
-						<Text style={[styles.info, { color: themes[theme].bodyText }]}>{I18n.t('Enter_Your_Encryption_Password_desc2')}</Text>
-					</SafeAreaView>
-				</ScrollView>
-			</KeyboardView>
-		);
-	}
-}
+					<FormTextInput
+						placeholder={I18n.t('Password')}
+						returnKeyType='send'
+						secureTextEntry
+						onSubmitEditing={submit}
+						onChangeText={setPassword}
+						testID='e2e-enter-your-password-view-password'
+						textContentType='password'
+					/>
+					<Button onPress={submit} title={I18n.t('Confirm')} disabled={!password} testID='e2e-enter-your-password-view-confirm' />
+					<Text style={[styles.info, { color: colors.bodyText }]}>{I18n.t('Enter_Your_Encryption_Password_desc1')}</Text>
+					<Text style={[styles.info, { color: colors.bodyText }]}>{I18n.t('Enter_Your_Encryption_Password_desc2')}</Text>
+				</SafeAreaView>
+			</ScrollView>
+		</KeyboardView>
+	);
+};
 
-export default connect(null)(withTheme(E2EEnterYourPasswordView));
+export default E2EEnterYourPasswordView;