verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chore: Migrate E2EEnterYourPasswordView to hooks (#4423) 

* migrate E2EEnterYourPasswordView to hooks

* remove navigation options

* minor tweak

Co-authored-by: Reinaldo Neto <reinaldonetof@hotmail.com>
This commit is contained in:
Gleidson Daniel Silva 2022-08-11 11:59:40 -03:00 committed by Diego Mello
parent 4a5c15ce66
commit 76efadac0e
3 changed files with 49 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/stacks/InsideStack.tsx
View File

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

6
app/stacks/MasterDetailStack/index.tsx
View File

@ -201,11 +201,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
options={E2ESaveYourPasswordView.navigationOptions} options={E2ESaveYourPasswordView.navigationOptions}
/> />
<ModalStack.Screen name='E2EHowItWorksView' component={E2EHowItWorksView} /> <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='UserPreferencesView' component={UserPreferencesView} />
<ModalStack.Screen <ModalStack.Screen
name='UserNotificationPrefView' name='UserNotificationPrefView'

124
app/views/E2EEnterYourPasswordView.tsx
View File

@ -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 { encryptionDecodeKey } from '../actions/encryption';
import { themes } from '../lib/constants';
import Button from '../containers/Button'; import Button from '../containers/Button';
import * as HeaderButton from '../containers/HeaderButton'; import * as HeaderButton from '../containers/HeaderButton';
import KeyboardView from '../containers/KeyboardView';
import SafeAreaView from '../containers/SafeAreaView'; import SafeAreaView from '../containers/SafeAreaView';
import StatusBar from '../containers/StatusBar'; import StatusBar from '../containers/StatusBar';
import { FormTextInput } from '../containers/TextInput'; import { FormTextInput } from '../containers/TextInput';
import { IBaseScreen } from '../definitions';
import I18n from '../i18n'; 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 { events, logEvent } from '../lib/methods/helpers/log';
import scrollPersistTaps from '../lib/methods/helpers/scrollPersistTaps'; import scrollPersistTaps from '../lib/methods/helpers/scrollPersistTaps';
import { useTheme } from '../theme';
import sharedStyles from './Styles'; import sharedStyles from './Styles';
const styles = StyleSheet.create({ 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({
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> { const submit = () => {
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 = () => {
logEvent(events.E2E_ENTER_PW_SUBMIT); logEvent(events.E2E_ENTER_PW_SUBMIT);
const { password } = this.state;
const { dispatch } = this.props;
dispatch(encryptionDecodeKey(password)); dispatch(encryptionDecodeKey(password));
}; };
render() { return (
const { password } = this.state; <KeyboardView
const { theme } = this.props; style={{ backgroundColor: colors.backgroundColor }}
contentContainerStyle={sharedStyles.container}
return ( keyboardVerticalOffset={128}
<KeyboardView >
style={{ backgroundColor: themes[theme].backgroundColor }} <StatusBar />
contentContainerStyle={sharedStyles.container} <ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={sharedStyles.containerScrollView}>
keyboardVerticalOffset={128} <SafeAreaView
> style={[styles.container, { backgroundColor: colors.backgroundColor }]}
<StatusBar /> testID='e2e-enter-your-password-view'
<ScrollView
{...scrollPersistTaps}
style={sharedStyles.container}
contentContainerStyle={sharedStyles.containerScrollView}
> >
<SafeAreaView <FormTextInput
style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]} placeholder={I18n.t('Password')}
testID='e2e-enter-your-password-view' returnKeyType='send'
> secureTextEntry
<FormTextInput onSubmitEditing={submit}
inputRef={(e: RNTextInput) => { onChangeText={setPassword}
this.passwordInput = e; testID='e2e-enter-your-password-view-password'
}} textContentType='password'
placeholder={I18n.t('Password')} />
returnKeyType='send' <Button onPress={submit} title={I18n.t('Confirm')} disabled={!password} testID='e2e-enter-your-password-view-confirm' />
secureTextEntry <Text style={[styles.info, { color: colors.bodyText }]}>{I18n.t('Enter_Your_Encryption_Password_desc1')}</Text>
onSubmitEditing={this.submit} <Text style={[styles.info, { color: colors.bodyText }]}>{I18n.t('Enter_Your_Encryption_Password_desc2')}</Text>
onChangeText={value => this.setState({ password: value })} </SafeAreaView>
testID='e2e-enter-your-password-view-password' </ScrollView>
textContentType='password' </KeyboardView>
/> );
<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>
);
}
}
export default connect(null)(withTheme(E2EEnterYourPasswordView)); export default E2EEnterYourPasswordView;