Chore: Evaluate e2e screens - TypeScript (#4142)
This commit is contained in:
parent
f5625cd5f3
commit
469c04e90a
|
@ -1,14 +1,13 @@
|
|||
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 { connect } from 'react-redux';
|
||||
import { Dispatch } from 'redux';
|
||||
|
||||
import StatusBar from '../containers/StatusBar';
|
||||
import * as List from '../containers/List';
|
||||
import I18n from '../i18n';
|
||||
import log, { events, logEvent } from '../utils/log';
|
||||
import { TSupportedThemes, withTheme } from '../theme';
|
||||
import { withTheme } from '../theme';
|
||||
import SafeAreaView from '../containers/SafeAreaView';
|
||||
import FormTextInput from '../containers/TextInput/FormTextInput';
|
||||
import Button from '../containers/Button';
|
||||
|
@ -16,14 +15,15 @@ import { getUserSelector } from '../selectors/login';
|
|||
import { PADDING_HORIZONTAL } from '../containers/List/constants';
|
||||
import { themes } from '../lib/constants';
|
||||
import { Encryption } from '../lib/encryption';
|
||||
import { logout as logoutAction } from '../actions/login';
|
||||
import { logout } from '../actions/login';
|
||||
import { showConfirmationAlert, showErrorAlert } from '../utils/info';
|
||||
import EventEmitter from '../utils/events';
|
||||
import { LISTENER } from '../containers/Toast';
|
||||
import debounce from '../utils/debounce';
|
||||
import sharedStyles from './Styles';
|
||||
import { IUser } from '../definitions';
|
||||
import { IApplicationState, IBaseScreen, IUser } from '../definitions';
|
||||
import { Services } from '../lib/services';
|
||||
import { SettingsStackParamList } from '../stacks/types';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
|
@ -47,12 +47,10 @@ interface IE2EEncryptionSecurityViewState {
|
|||
newPassword: string;
|
||||
}
|
||||
|
||||
interface IE2EEncryptionSecurityViewProps {
|
||||
theme?: TSupportedThemes;
|
||||
interface IE2EEncryptionSecurityViewProps extends IBaseScreen<SettingsStackParamList, 'E2EEncryptionSecurityView'> {
|
||||
user: IUser;
|
||||
server: string;
|
||||
encryptionEnabled: boolean;
|
||||
logout(): void;
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
setNewPasswordRef = (ref: TextInputComp) => (this.newPasswordInputRef = ref);
|
||||
setNewPasswordRef = (ref: RNTextInput) => (this.newPasswordInputRef = ref);
|
||||
|
||||
changePassword = () => {
|
||||
const { newPassword } = this.state;
|
||||
|
@ -107,8 +105,8 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
|
|||
* that's why we're using strict equality to boolean
|
||||
*/
|
||||
if (res === true) {
|
||||
const { logout } = this.props;
|
||||
logout();
|
||||
const { dispatch } = this.props;
|
||||
dispatch(logout());
|
||||
}
|
||||
} catch (e) {
|
||||
log(e);
|
||||
|
@ -127,10 +125,10 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
|
|||
return (
|
||||
<>
|
||||
<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')}
|
||||
</Text>
|
||||
<Text style={[styles.description, { color: themes[theme!].bodyText }]}>
|
||||
<Text style={[styles.description, { color: themes[theme].bodyText }]}>
|
||||
{I18n.t('E2E_encryption_change_password_description')}
|
||||
</Text>
|
||||
<FormTextInput
|
||||
|
@ -161,17 +159,17 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
|
|||
render() {
|
||||
const { theme } = this.props;
|
||||
return (
|
||||
<SafeAreaView testID='e2e-encryption-security-view' style={{ backgroundColor: themes[theme!].backgroundColor }}>
|
||||
<SafeAreaView testID='e2e-encryption-security-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
|
||||
<StatusBar />
|
||||
<List.Container>
|
||||
<View style={styles.container}>
|
||||
{this.renderChangePassword()}
|
||||
|
||||
<List.Section>
|
||||
<Text style={[styles.title, { color: themes[theme!].headerTitleColor }]}>
|
||||
<Text style={[styles.title, { color: themes[theme].headerTitleColor }]}>
|
||||
{I18n.t('E2E_encryption_reset_title')}
|
||||
</Text>
|
||||
<Text style={[styles.description, { color: themes[theme!].bodyText }]}>
|
||||
<Text style={[styles.description, { color: themes[theme].bodyText }]}>
|
||||
{I18n.t('E2E_encryption_reset_description')}
|
||||
</Text>
|
||||
<Button
|
||||
|
@ -179,7 +177,7 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
|
|||
title={I18n.t('E2E_encryption_reset_button')}
|
||||
theme={theme}
|
||||
type='secondary'
|
||||
backgroundColor={themes[theme!].chatComponentBackground}
|
||||
backgroundColor={themes[theme].chatComponentBackground}
|
||||
testID='e2e-encryption-security-view-reset-key'
|
||||
/>
|
||||
</List.Section>
|
||||
|
@ -190,14 +188,10 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
|
|||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: any) => ({
|
||||
const mapStateToProps = (state: IApplicationState) => ({
|
||||
server: state.server.server,
|
||||
user: getUserSelector(state),
|
||||
encryptionEnabled: state.encryption.enabled
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch: Dispatch) => ({
|
||||
logout: () => dispatch(logoutAction(true))
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(withTheme(E2EEncryptionSecurityView));
|
||||
export default connect(mapStateToProps)(withTheme(E2EEncryptionSecurityView));
|
||||
|
|
|
@ -1,15 +1,14 @@
|
|||
import React from 'react';
|
||||
import { StackNavigationProp } from '@react-navigation/stack';
|
||||
import { RouteProp } from '@react-navigation/native';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import SafeAreaView from '../containers/SafeAreaView';
|
||||
import { themes } from '../lib/constants';
|
||||
import * as HeaderButton from '../containers/HeaderButton';
|
||||
import Markdown from '../containers/markdown';
|
||||
import { TSupportedThemes, withTheme } from '../theme';
|
||||
import { withTheme } from '../theme';
|
||||
import I18n from '../i18n';
|
||||
import { E2ESaveYourPasswordStackParamList } from '../stacks/types';
|
||||
import { IBaseScreen } from '../definitions';
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
|
@ -23,17 +22,10 @@ const styles = StyleSheet.create({
|
|||
}
|
||||
});
|
||||
|
||||
interface INavigation {
|
||||
navigation: StackNavigationProp<E2ESaveYourPasswordStackParamList, 'E2EHowItWorksView'>;
|
||||
route: RouteProp<E2ESaveYourPasswordStackParamList, 'E2EHowItWorksView'>;
|
||||
}
|
||||
type TE2EHowItWorksViewProps = IBaseScreen<E2ESaveYourPasswordStackParamList, 'E2EHowItWorksView'>;
|
||||
|
||||
interface IE2EHowItWorksViewProps extends INavigation {
|
||||
theme: TSupportedThemes;
|
||||
}
|
||||
|
||||
class E2EHowItWorksView extends React.Component<IE2EHowItWorksViewProps, any> {
|
||||
static navigationOptions = ({ route, navigation }: INavigation) => {
|
||||
class E2EHowItWorksView extends React.Component<TE2EHowItWorksViewProps, any> {
|
||||
static navigationOptions = ({ route, navigation }: Pick<TE2EHowItWorksViewProps, 'navigation' | 'route'>) => {
|
||||
const showCloseModal = route.params?.showCloseModal;
|
||||
return {
|
||||
title: I18n.t('How_It_Works'),
|
||||
|
|
|
@ -55,7 +55,7 @@ const styles = StyleSheet.create({
|
|||
});
|
||||
|
||||
interface IE2ESaveYourPasswordViewState {
|
||||
password: string;
|
||||
password: string | null;
|
||||
}
|
||||
|
||||
interface IE2ESaveYourPasswordViewProps extends IBaseScreen<E2ESaveYourPasswordStackParamList, 'E2ESaveYourPasswordView'> {
|
||||
|
@ -87,7 +87,7 @@ class E2ESaveYourPasswordView extends React.Component<IE2ESaveYourPasswordViewPr
|
|||
// Set stored password on local state
|
||||
const password = UserPreferences.getString(`${server}-${E2E_RANDOM_PASSWORD_KEY}`);
|
||||
if (this.mounted) {
|
||||
this.setState({ password: password! });
|
||||
this.setState({ password });
|
||||
} else {
|
||||
// @ts-ignore
|
||||
this.state.password = password;
|
||||
|
@ -110,8 +110,10 @@ class E2ESaveYourPasswordView extends React.Component<IE2ESaveYourPasswordViewPr
|
|||
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 = () => {
|
||||
|
|
Loading…
Reference in New Issue