verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Chore: Evaluate e2e screens - TypeScript (#4142)

This commit is contained in:
Alex Junior 2022-05-19 23:42:55 -03:00 committed by GitHub
parent f5625cd5f3
commit 469c04e90a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
app/views/E2EEncryptionSecurityView.tsx
View File

@ -1,14 +1,13 @@
import React from 'react'; import React from 'react';
import { StyleSheet, Text, View, TextInput as TextInputComp } from 'react-native'; import { StyleSheet, Text, View, TextInput as RNTextInput } from 'react-native';
import { StackNavigationOptions } from '@react-navigation/stack'; import { StackNavigationOptions } from '@react-navigation/stack';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import StatusBar from '../containers/StatusBar'; import StatusBar from '../containers/StatusBar';
import * as List from '../containers/List'; import * as List from '../containers/List';
import I18n from '../i18n'; import I18n from '../i18n';
import log, { events, logEvent } from '../utils/log'; import log, { events, logEvent } from '../utils/log';
import { TSupportedThemes, withTheme } from '../theme'; import { withTheme } from '../theme';
import SafeAreaView from '../containers/SafeAreaView'; import SafeAreaView from '../containers/SafeAreaView';
import FormTextInput from '../containers/TextInput/FormTextInput'; import FormTextInput from '../containers/TextInput/FormTextInput';
import Button from '../containers/Button'; import Button from '../containers/Button';
@ -16,14 +15,15 @@ import { getUserSelector } from '../selectors/login';
import { PADDING_HORIZONTAL } from '../containers/List/constants'; import { PADDING_HORIZONTAL } from '../containers/List/constants';
import { themes } from '../lib/constants'; import { themes } from '../lib/constants';
import { Encryption } from '../lib/encryption'; import { Encryption } from '../lib/encryption';
import { logout as logoutAction } from '../actions/login'; import { logout } from '../actions/login';
import { showConfirmationAlert, showErrorAlert } from '../utils/info'; import { showConfirmationAlert, showErrorAlert } from '../utils/info';
import EventEmitter from '../utils/events'; import EventEmitter from '../utils/events';
import { LISTENER } from '../containers/Toast'; import { LISTENER } from '../containers/Toast';
import debounce from '../utils/debounce'; import debounce from '../utils/debounce';
import sharedStyles from './Styles'; import sharedStyles from './Styles';
import { IUser } from '../definitions'; import { IApplicationState, IBaseScreen, IUser } from '../definitions';
import { Services } from '../lib/services'; import { Services } from '../lib/services';
import { SettingsStackParamList } from '../stacks/types';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
@ -47,12 +47,10 @@ interface IE2EEncryptionSecurityViewState {
newPassword: string; newPassword: string;
} }
interface IE2EEncryptionSecurityViewProps { interface IE2EEncryptionSecurityViewProps extends IBaseScreen<SettingsStackParamList, 'E2EEncryptionSecurityView'> {
theme?: TSupportedThemes;
user: IUser; user: IUser;
server: string; server: string;
encryptionEnabled: boolean; encryptionEnabled: boolean;
logout(): void;
} }
class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityViewProps, IE2EEncryptionSecurityViewState> { class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityViewProps, IE2EEncryptionSecurityViewState> {
@ -66,7 +64,7 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
onChangePasswordText = debounce((text: string) => this.setState({ newPassword: text }), 300); onChangePasswordText = debounce((text: string) => this.setState({ newPassword: text }), 300);
setNewPasswordRef = (ref: TextInputComp) => (this.newPasswordInputRef = ref); setNewPasswordRef = (ref: RNTextInput) => (this.newPasswordInputRef = ref);
changePassword = () => { changePassword = () => {
const { newPassword } = this.state; const { newPassword } = this.state;
@ -107,8 +105,8 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
* that's why we're using strict equality to boolean * that's why we're using strict equality to boolean
*/ */
if (res === true) { if (res === true) {
const { logout } = this.props; const { dispatch } = this.props;
logout(); dispatch(logout());
} }
} catch (e) { } catch (e) {
log(e); log(e);
@ -127,10 +125,10 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
return ( return (
<> <>
<List.Section> <List.Section>
<Text style={[styles.title, { color: themes[theme!].headerTitleColor }]}> <Text style={[styles.title, { color: themes[theme].headerTitleColor }]}>
{I18n.t('E2E_encryption_change_password_title')} {I18n.t('E2E_encryption_change_password_title')}
</Text> </Text>
<Text style={[styles.description, { color: themes[theme!].bodyText }]}> <Text style={[styles.description, { color: themes[theme].bodyText }]}>
{I18n.t('E2E_encryption_change_password_description')} {I18n.t('E2E_encryption_change_password_description')}
</Text> </Text>
<FormTextInput <FormTextInput
@ -161,17 +159,17 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
render() { render() {
const { theme } = this.props; const { theme } = this.props;
return ( return (
<SafeAreaView testID='e2e-encryption-security-view' style={{ backgroundColor: themes[theme!].backgroundColor }}> <SafeAreaView testID='e2e-encryption-security-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
<StatusBar /> <StatusBar />
<List.Container> <List.Container>
<View style={styles.container}> <View style={styles.container}>
{this.renderChangePassword()} {this.renderChangePassword()}
<List.Section> <List.Section>
<Text style={[styles.title, { color: themes[theme!].headerTitleColor }]}> <Text style={[styles.title, { color: themes[theme].headerTitleColor }]}>
{I18n.t('E2E_encryption_reset_title')} {I18n.t('E2E_encryption_reset_title')}
</Text> </Text>
<Text style={[styles.description, { color: themes[theme!].bodyText }]}> <Text style={[styles.description, { color: themes[theme].bodyText }]}>
{I18n.t('E2E_encryption_reset_description')} {I18n.t('E2E_encryption_reset_description')}
</Text> </Text>
<Button <Button
@ -179,7 +177,7 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
title={I18n.t('E2E_encryption_reset_button')} title={I18n.t('E2E_encryption_reset_button')}
theme={theme} theme={theme}
type='secondary' type='secondary'
backgroundColor={themes[theme!].chatComponentBackground} backgroundColor={themes[theme].chatComponentBackground}
testID='e2e-encryption-security-view-reset-key' testID='e2e-encryption-security-view-reset-key'
/> />
</List.Section> </List.Section>
@ -190,14 +188,10 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
} }
} }
const mapStateToProps = (state: any) => ({ const mapStateToProps = (state: IApplicationState) => ({
server: state.server.server, server: state.server.server,
user: getUserSelector(state), user: getUserSelector(state),
encryptionEnabled: state.encryption.enabled encryptionEnabled: state.encryption.enabled
}); });
const mapDispatchToProps = (dispatch: Dispatch) => ({ export default connect(mapStateToProps)(withTheme(E2EEncryptionSecurityView));
logout: () => dispatch(logoutAction(true))
});
export default connect(mapStateToProps, mapDispatchToProps)(withTheme(E2EEncryptionSecurityView));

18
app/views/E2EHowItWorksView.tsx
View File

@ -1,15 +1,14 @@
import React from 'react'; import React from 'react';
import { StackNavigationProp } from '@react-navigation/stack';
import { RouteProp } from '@react-navigation/native';
import { StyleSheet } from 'react-native'; import { StyleSheet } from 'react-native';
import SafeAreaView from '../containers/SafeAreaView'; import SafeAreaView from '../containers/SafeAreaView';
import { themes } from '../lib/constants'; import { themes } from '../lib/constants';
import * as HeaderButton from '../containers/HeaderButton'; import * as HeaderButton from '../containers/HeaderButton';
import Markdown from '../containers/markdown'; import Markdown from '../containers/markdown';
import { TSupportedThemes, withTheme } from '../theme'; import { withTheme } from '../theme';
import I18n from '../i18n'; import I18n from '../i18n';
import { E2ESaveYourPasswordStackParamList } from '../stacks/types'; import { E2ESaveYourPasswordStackParamList } from '../stacks/types';
import { IBaseScreen } from '../definitions';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
@ -23,17 +22,10 @@ const styles = StyleSheet.create({
} }
}); });
interface INavigation { type TE2EHowItWorksViewProps = IBaseScreen<E2ESaveYourPasswordStackParamList, 'E2EHowItWorksView'>;
navigation: StackNavigationProp<E2ESaveYourPasswordStackParamList, 'E2EHowItWorksView'>;
route: RouteProp<E2ESaveYourPasswordStackParamList, 'E2EHowItWorksView'>;
}
interface IE2EHowItWorksViewProps extends INavigation { class E2EHowItWorksView extends React.Component<TE2EHowItWorksViewProps, any> {
theme: TSupportedThemes; static navigationOptions = ({ route, navigation }: Pick<TE2EHowItWorksViewProps, 'navigation' | 'route'>) => {
}
class E2EHowItWorksView extends React.Component<IE2EHowItWorksViewProps, any> {
static navigationOptions = ({ route, navigation }: INavigation) => {
const showCloseModal = route.params?.showCloseModal; const showCloseModal = route.params?.showCloseModal;
return { return {
title: I18n.t('How_It_Works'), title: I18n.t('How_It_Works'),

10
app/views/E2ESaveYourPasswordView.tsx
View File

@ -55,7 +55,7 @@ const styles = StyleSheet.create({
}); });
interface IE2ESaveYourPasswordViewState { interface IE2ESaveYourPasswordViewState {
password: string; password: string | null;
} }
interface IE2ESaveYourPasswordViewProps extends IBaseScreen<E2ESaveYourPasswordStackParamList, 'E2ESaveYourPasswordView'> { interface IE2ESaveYourPasswordViewProps extends IBaseScreen<E2ESaveYourPasswordStackParamList, 'E2ESaveYourPasswordView'> {
@ -87,7 +87,7 @@ class E2ESaveYourPasswordView extends React.Component<IE2ESaveYourPasswordViewPr
// Set stored password on local state // Set stored password on local state
const password = UserPreferences.getString(`${server}-${E2E_RANDOM_PASSWORD_KEY}`); const password = UserPreferences.getString(`${server}-${E2E_RANDOM_PASSWORD_KEY}`);
if (this.mounted) { if (this.mounted) {
this.setState({ password: password! }); this.setState({ password });
} else { } else {
// @ts-ignore // @ts-ignore
this.state.password = password; this.state.password = password;
@ -110,8 +110,10 @@ class E2ESaveYourPasswordView extends React.Component<IE2ESaveYourPasswordViewPr
onCopy = () => { onCopy = () => {
logEvent(events.E2E_SAVE_PW_COPY); logEvent(events.E2E_SAVE_PW_COPY);
const { password } = this.state; const { password } = this.state;
Clipboard.setString(password); if (password) {
EventEmitter.emit(LISTENER, { message: I18n.t('Copied_to_clipboard') }); Clipboard.setString(password);
EventEmitter.emit(LISTENER, { message: I18n.t('Copied_to_clipboard') });
}
}; };
onHowItWorks = () => { onHowItWorks = () => {