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

@@ -296,11 +296,7 @@ const E2EEnterYourPasswordStackNavigator = () => {
 		<E2EEnterYourPasswordStack.Navigator
 			screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}
 		>
-			<E2EEnterYourPasswordStack.Screen
+			<E2EEnterYourPasswordStack.Screen name='E2EEnterYourPasswordView' component={E2EEnterYourPasswordView} />
-				name='E2EEnterYourPasswordView'
-				component={E2EEnterYourPasswordView}
-				options={E2EEnterYourPasswordView.navigationOptions}
-			/>
 		</E2EEnterYourPasswordStack.Navigator>
 	);
 };

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
+				<ModalStack.Screen name='E2EEnterYourPasswordView' component={E2EEnterYourPasswordView} />
-					name='E2EEnterYourPasswordView'
-					component={E2EEnterYourPasswordView}
-					options={E2EEnterYourPasswordView.navigationOptions}
-				/>
 				<ModalStack.Screen name='UserPreferencesView' component={UserPreferencesView} />
 				<ModalStack.Screen
 					name='UserNotificationPrefView'

app/views/E2EEnterYourPasswordView.tsx

@@ -1,22 +1,19 @@
-import { StackNavigationOptions } from '@react-navigation/stack';
+import { useNavigation } from '@react-navigation/native';
-import React from 'react';
+import React, { useLayoutEffect, useState } from 'react';
-import { ScrollView, StyleSheet, Text, TextInput as RNTextInput } from 'react-native';
+import { ScrollView, StyleSheet, Text } from 'react-native';
-import { connect } from 'react-redux';
+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 {
+const E2EEnterYourPasswordView = (): React.ReactElement => {
-	password: string;
+	const [password, setPassword] = useState('');
-}
+	const { colors } = useTheme();
+	const navigation = useNavigation();
+	const dispatch = useDispatch();
 
-type TE2EEnterYourPasswordViewProps = IBaseScreen<E2EEnterYourPasswordStackParamList, 'E2EEnterYourPasswordView'>;
+	useLayoutEffect(() => {
-
+		navigation.setOptions({
-class E2EEnterYourPasswordView extends React.Component<TE2EEnterYourPasswordViewProps, IE2EEnterYourPasswordViewState> {
+			headerLeft: () => <HeaderButton.CloseModal testID='e2e-enter-your-password-view-close' />,
-	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')
 		});
+	}, [navigation]);
 
-	constructor(props: TE2EEnterYourPasswordViewProps) {
+	const submit = () => {
-		super(props);
-		this.state = {
-			password: ''
-		};
-	}
-
-	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 }}
+			style={{ backgroundColor: colors.backgroundColor }}
 			contentContainerStyle={sharedStyles.container}
 			keyboardVerticalOffset={128}
 		>
 			<StatusBar />
-				<ScrollView
+			<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={sharedStyles.containerScrollView}>
-					{...scrollPersistTaps}
-					style={sharedStyles.container}
-					contentContainerStyle={sharedStyles.containerScrollView}
-				>
 				<SafeAreaView
-						style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}
+					style={[styles.container, { backgroundColor: colors.backgroundColor }]}
 					testID='e2e-enter-your-password-view'
 				>
 					<FormTextInput
-							inputRef={(e: RNTextInput) => {
-								this.passwordInput = e;
-							}}
 						placeholder={I18n.t('Password')}
 						returnKeyType='send'
 						secureTextEntry
-							onSubmitEditing={this.submit}
+						onSubmitEditing={submit}
-							onChangeText={value => this.setState({ password: value })}
+						onChangeText={setPassword}
 						testID='e2e-enter-your-password-view-password'
 						textContentType='password'
 					/>
-						<Button
+					<Button onPress={submit} title={I18n.t('Confirm')} disabled={!password} testID='e2e-enter-your-password-view-confirm' />
-							onPress={this.submit}
+					<Text style={[styles.info, { color: colors.bodyText }]}>{I18n.t('Enter_Your_Encryption_Password_desc1')}</Text>
-							title={I18n.t('Confirm')}
+					<Text style={[styles.info, { color: colors.bodyText }]}>{I18n.t('Enter_Your_Encryption_Password_desc2')}</Text>
-							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>
 	);
-	}
+};
-}
 
-export default connect(null)(withTheme(E2EEnterYourPasswordView));
+export default E2EEnterYourPasswordView;