Chore: Migrate E2ESaveYourPasswordView to hooks (#4432)

app/stacks/InsideStack.tsx

@@ -277,11 +277,7 @@ const E2ESaveYourPasswordStackNavigator = () => {
 		<E2ESaveYourPasswordStack.Navigator
 			screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}
 		>
-			<E2ESaveYourPasswordStack.Screen
+			<E2ESaveYourPasswordStack.Screen name='E2ESaveYourPasswordView' component={E2ESaveYourPasswordView} />
-				name='E2ESaveYourPasswordView'
-				component={E2ESaveYourPasswordView}
-				options={E2ESaveYourPasswordView.navigationOptions}
-			/>
 			<E2ESaveYourPasswordStack.Screen name='E2EHowItWorksView' component={E2EHowItWorksView} />
 		</E2ESaveYourPasswordStack.Navigator>
 	);

app/stacks/MasterDetailStack/index.tsx

@@ -195,11 +195,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 				<ModalStack.Screen name='SelectedUsersViewCreateChannel' component={SelectedUsersView} />
 				<ModalStack.Screen name='CreateChannelView' component={CreateChannelView} options={CreateChannelView.navigationOptions} />
 				<ModalStack.Screen name='CreateDiscussionView' component={CreateDiscussionView} />
-				<ModalStack.Screen
+				<ModalStack.Screen name='E2ESaveYourPasswordView' component={E2ESaveYourPasswordView} />
-					name='E2ESaveYourPasswordView'
-					component={E2ESaveYourPasswordView}
-					options={E2ESaveYourPasswordView.navigationOptions}
-				/>
 				<ModalStack.Screen name='E2EHowItWorksView' component={E2EHowItWorksView} />
 				<ModalStack.Screen name='E2EEnterYourPasswordView' component={E2EEnterYourPasswordView} />
 				<ModalStack.Screen name='UserPreferencesView' component={UserPreferencesView} />

app/views/E2ESaveYourPasswordView.tsx

@@ -1,7 +1,9 @@
-import React from 'react';
-import { ScrollView, StyleSheet, Text, View } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
-import { connect } from 'react-redux';
+import React, { useEffect, useLayoutEffect, useState } from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useDispatch } from 'react-redux';
+import { StackActions, useNavigation } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
 
 import { encryptionSetBanner } from '../actions/encryption';
 import Button from '../containers/Button';
@@ -9,15 +11,15 @@ import * as HeaderButton from '../containers/HeaderButton';
 import SafeAreaView from '../containers/SafeAreaView';
 import StatusBar from '../containers/StatusBar';
 import { LISTENER } from '../containers/Toast';
-import { IApplicationState, IBaseScreen } from '../definitions';
 import I18n from '../i18n';
-import { E2E_RANDOM_PASSWORD_KEY, themes } from '../lib/constants';
+import { E2E_RANDOM_PASSWORD_KEY } from '../lib/constants';
-import UserPreferences from '../lib/methods/userPreferences';
+import { useAppSelector } from '../lib/hooks';
-import { E2ESaveYourPasswordStackParamList } from '../stacks/types';
-import { withTheme } from '../theme';
 import EventEmitter from '../lib/methods/helpers/events';
 import { events, logEvent } from '../lib/methods/helpers/log';
 import scrollPersistTaps from '../lib/methods/helpers/scrollPersistTaps';
+import UserPreferences from '../lib/methods/userPreferences';
+import { E2ESaveYourPasswordStackParamList } from '../stacks/types';
+import { useTheme } from '../theme';
 import sharedStyles from './Styles';
 
 const styles = StyleSheet.create({
@@ -54,123 +56,78 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface IE2ESaveYourPasswordViewState {
+const E2ESaveYourPasswordView = () => {
-	password: string | null;
+	const server = useAppSelector(state => state.server.server);
-}
+	const navigation = useNavigation<StackNavigationProp<E2ESaveYourPasswordStackParamList, 'E2ESaveYourPasswordView'>>();
+	const dispatch = useDispatch();
+	const [password, setPassword] = useState('');
+	const { colors } = useTheme();
 
-interface IE2ESaveYourPasswordViewProps extends IBaseScreen<E2ESaveYourPasswordStackParamList, 'E2ESaveYourPasswordView'> {
+	useLayoutEffect(() => {
-	server: string;
+		navigation.setOptions({
-}
+			title: I18n.t('Save_Your_E2E_Password'),
-
+			headerLeft: () => <HeaderButton.CloseModal testID='e2e-save-your-password-view-close' />
-class E2ESaveYourPasswordView extends React.Component<IE2ESaveYourPasswordViewProps, IE2ESaveYourPasswordViewState> {
-	private mounted: boolean;
-
-	static navigationOptions = ({ navigation }: Pick<IE2ESaveYourPasswordViewProps, 'navigation'>) => ({
-		headerLeft: () => <HeaderButton.CloseModal navigation={navigation} testID='e2e-save-your-password-view-close' />,
-		title: I18n.t('Save_Your_E2E_Password')
 		});
+	}, [navigation]);
 
-	constructor(props: IE2ESaveYourPasswordViewProps) {
+	useEffect(() => {
-		super(props);
+		const init = () => {
-		this.mounted = false;
-		this.state = { password: '' };
-		this.init();
-	}
-
-	componentDidMount() {
-		this.mounted = true;
-	}
-
-	init = () => {
-		const { server } = this.props;
-		try {
-			// Set stored password on local state
 			const password = UserPreferences.getString(`${server}-${E2E_RANDOM_PASSWORD_KEY}`);
-			if (this.mounted) {
+			if (password) setPassword(password);
-				this.setState({ password });
-			} else {
-				// @ts-ignore
-				this.state.password = password;
-			}
-		} catch {
-			// Do nothing
-		}
 		};
+		init();
+	}, []);
 
-	onSaved = () => {
+	const onSaved = () => {
 		logEvent(events.E2E_SAVE_PW_SAVED);
-		const { navigation, server, dispatch } = this.props;
-		// Remove stored password
 		UserPreferences.removeItem(`${server}-${E2E_RANDOM_PASSWORD_KEY}`);
-		// Hide encryption banner
 		dispatch(encryptionSetBanner());
-		navigation.pop();
+		navigation.dispatch(StackActions.pop());
 	};
 
-	onCopy = () => {
+	const onCopy = () => {
 		logEvent(events.E2E_SAVE_PW_COPY);
-		const { password } = this.state;
 		if (password) {
 			Clipboard.setString(password);
 			EventEmitter.emit(LISTENER, { message: I18n.t('Copied_to_clipboard') });
 		}
 	};
 
-	onHowItWorks = () => {
+	const onHowItWorks = () => {
 		logEvent(events.E2E_SAVE_PW_HOW_IT_WORKS);
-		const { navigation } = this.props;
 		navigation.navigate('E2EHowItWorksView');
 	};
 
-	render() {
-		const { password } = this.state;
-		const { theme } = this.props;
-
 	return (
-			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='e2e-save-password-view'>
+		<SafeAreaView style={{ backgroundColor: colors.backgroundColor }} testID='e2e-save-password-view'>
 			<StatusBar />
-				<ScrollView
+			<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={sharedStyles.containerScrollView}>
-					{...scrollPersistTaps}
+				<View style={[styles.container, { backgroundColor: colors.backgroundColor }]}>
-					style={sharedStyles.container}
+					<Text style={[styles.warning, { color: colors.dangerColor }]}>{I18n.t('Save_Your_Encryption_Password_warning')}</Text>
-					contentContainerStyle={sharedStyles.containerScrollView}
-				>
-					<View style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}>
-						<Text style={[styles.warning, { color: themes[theme].dangerColor }]}>
-							{I18n.t('Save_Your_Encryption_Password_warning')}
-						</Text>
 					<View style={styles.content}>
-							<Text style={[styles.passwordText, { color: themes[theme].bodyText }]}>{I18n.t('Your_password_is')}</Text>
+						<Text style={[styles.passwordText, { color: colors.bodyText }]}>{I18n.t('Your_password_is')}</Text>
-							<Text style={[styles.password, { color: themes[theme].bodyText }]}>{password}</Text>
+						<Text style={[styles.password, { color: colors.bodyText }]}>{password}</Text>
 						<Button
-								onPress={this.onCopy}
+							onPress={onCopy}
-								style={[styles.copyButton, { backgroundColor: themes[theme].auxiliaryBackground }]}
+							style={[styles.copyButton, { backgroundColor: colors.auxiliaryBackground }]}
 							title={I18n.t('Copy')}
 							type='secondary'
 							fontSize={12}
 						/>
 					</View>
-						<Text style={[styles.info, { color: themes[theme].bodyText }]}>{I18n.t('Save_Your_Encryption_Password_info')}</Text>
+					<Text style={[styles.info, { color: colors.bodyText }]}>{I18n.t('Save_Your_Encryption_Password_info')}</Text>
 					<Button
-							onPress={this.onHowItWorks}
+						onPress={onHowItWorks}
-							style={{ backgroundColor: themes[theme].auxiliaryBackground }}
+						style={{ backgroundColor: colors.auxiliaryBackground }}
 						title={I18n.t('How_It_Works')}
 						type='secondary'
 						testID='e2e-save-password-view-how-it-works'
 					/>
-						<Button
+					<Button onPress={onSaved} title={I18n.t('I_Saved_My_E2E_Password')} testID='e2e-save-password-view-saved-password' />
-							onPress={this.onSaved}
-							title={I18n.t('I_Saved_My_E2E_Password')}
-							testID='e2e-save-password-view-saved-password'
-						/>
 				</View>
 			</ScrollView>
 		</SafeAreaView>
 	);
-	}
+};
-}
 
-const mapStateToProps = (state: IApplicationState) => ({
+export default E2ESaveYourPasswordView;
-	server: state.server.server
-});
-
-export default connect(mapStateToProps)(withTheme(E2ESaveYourPasswordView));