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
screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}
>
<E2EEnterYourPasswordStack.Screen
name='E2EEnterYourPasswordView'
component={E2EEnterYourPasswordView}
options={E2EEnterYourPasswordView.navigationOptions}
/>
<E2EEnterYourPasswordStack.Screen name='E2EEnterYourPasswordView' component={E2EEnterYourPasswordView} />
</E2EEnterYourPasswordStack.Navigator>
);
};

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

@ -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'

124
app/views/E2EEnterYourPasswordView.tsx
View File

@ -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;