From 9922fdd7e521b71ba4e494703112f2de131053d8 Mon Sep 17 00:00:00 2001 From: Gerzon Z Date: Wed, 20 Oct 2021 13:45:47 -0400 Subject: [PATCH] Chore: Migrate LoginView to TypeScript (#3423) * Initial commit * Update interface * Minor tweaks * Update FormContainer.tsx * Minor tweaks * update snapshots * Update TextInput interface * Update snapshots * Merge branch 'develop' into chore.migrate-loginview-ts * Minor tweak --- .../__snapshots__/Storyshots.test.js.snap | 6 -- app/containers/TextInput.tsx | 12 +--- app/presentation/TextInput.tsx | 4 +- app/views/{LoginView.js => LoginView.tsx} | 65 ++++++++++--------- 4 files changed, 38 insertions(+), 49 deletions(-) rename app/views/{LoginView.js => LoginView.tsx} (83%) diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap index ae596da06..3b283ab56 100644 --- a/__tests__/__snapshots__/Storyshots.test.js.snap +++ b/__tests__/__snapshots__/Storyshots.test.js.snap @@ -76288,8 +76288,6 @@ exports[`Storyshots Text Input Short and Long Text 1`] = ` } > {label ? ( - - {label} - + {label} ) : null} diff --git a/app/presentation/TextInput.tsx b/app/presentation/TextInput.tsx index b3f18676c..028b811b5 100644 --- a/app/presentation/TextInput.tsx +++ b/app/presentation/TextInput.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { I18nManager, StyleSheet, TextInput, TextInputProps } from 'react-native'; +import { I18nManager, StyleProp, StyleSheet, TextInput, TextInputProps, TextStyle } from 'react-native'; import { themes } from '../constants/colors'; @@ -10,7 +10,7 @@ const styles = StyleSheet.create({ }); interface IThemedTextInput extends TextInputProps { - style: object; + style: StyleProp; theme: string; } diff --git a/app/views/LoginView.js b/app/views/LoginView.tsx similarity index 83% rename from app/views/LoginView.js rename to app/views/LoginView.tsx index 6925f4ca7..4643687e2 100644 --- a/app/views/LoginView.js +++ b/app/views/LoginView.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { Alert, Keyboard, StyleSheet, Text, View } from 'react-native'; import { connect } from 'react-redux'; import { dequal } from 'dequal'; +import { StackNavigationProp } from '@react-navigation/stack'; +import { RouteProp } from '@react-navigation/core'; import Button from '../containers/Button'; import I18n from '../i18n'; @@ -46,31 +47,35 @@ const styles = StyleSheet.create({ } }); -class LoginView extends React.Component { - static navigationOptions = ({ route, navigation }) => ({ - title: route.params?.title ?? 'Rocket.Chat', +interface IProps { + navigation: StackNavigationProp; + route: RouteProp; + Site_Name: string; + Accounts_RegistrationForm: string; + Accounts_RegistrationForm_LinkReplacementText: string; + Accounts_EmailOrUsernamePlaceholder: string; + Accounts_PasswordPlaceholder: string; + Accounts_PasswordReset: boolean; + Accounts_ShowFormLogin: boolean; + isFetching: boolean; + error: { + error: string; + }; + failure: boolean; + theme: string; + loginRequest: Function; + inviteLinkToken: string; +} + +class LoginView extends React.Component { + private passwordInput: any; + + static navigationOptions = ({ route, navigation }: Partial) => ({ + title: route?.params?.title ?? 'Rocket.Chat', headerRight: () => }); - static propTypes = { - navigation: PropTypes.object, - route: PropTypes.object, - Site_Name: PropTypes.string, - Accounts_RegistrationForm: PropTypes.string, - Accounts_RegistrationForm_LinkReplacementText: PropTypes.string, - Accounts_EmailOrUsernamePlaceholder: PropTypes.string, - Accounts_PasswordPlaceholder: PropTypes.string, - Accounts_PasswordReset: PropTypes.bool, - Accounts_ShowFormLogin: PropTypes.bool, - isFetching: PropTypes.bool, - error: PropTypes.object, - failure: PropTypes.bool, - theme: PropTypes.string, - loginRequest: PropTypes.func, - inviteLinkToken: PropTypes.string - }; - - constructor(props) { + constructor(props: IProps) { super(props); this.state = { user: props.route.params?.username ?? '', @@ -78,10 +83,10 @@ class LoginView extends React.Component { }; } - UNSAFE_componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps: IProps) { const { error } = this.props; if (nextProps.failure && !dequal(error, nextProps.error)) { - if (nextProps.error.error === 'error-invalid-email') { + if (nextProps.error?.error === 'error-invalid-email') { this.resendEmailConfirmation(); } else { Alert.alert(I18n.t('Oops'), I18n.t('Login_error')); @@ -156,7 +161,7 @@ class LoginView extends React.Component { placeholder={Accounts_EmailOrUsernamePlaceholder || I18n.t('Username_or_email')} keyboardType='email-address' returnKeyType='next' - onChangeText={value => this.setState({ user: value })} + onChangeText={(value: string) => this.setState({ user: value })} onSubmitEditing={() => { this.passwordInput.focus(); }} @@ -176,7 +181,7 @@ class LoginView extends React.Component { returnKeyType='send' secureTextEntry onSubmitEditing={this.submit} - onChangeText={value => this.setState({ password: value })} + onChangeText={(value: string) => this.setState({ password: value })} testID='login-view-password' textContentType='password' autoCompleteType='password' @@ -237,7 +242,7 @@ class LoginView extends React.Component { } } -const mapStateToProps = state => ({ +const mapStateToProps = (state: any) => ({ server: state.server.server, Site_Name: state.settings.Site_Name, Accounts_ShowFormLogin: state.settings.Accounts_ShowFormLogin, @@ -252,8 +257,8 @@ const mapStateToProps = state => ({ inviteLinkToken: state.inviteLinks.token }); -const mapDispatchToProps = dispatch => ({ - loginRequest: params => dispatch(loginRequestAction(params)) +const mapDispatchToProps = (dispatch: any) => ({ + loginRequest: (params: any) => dispatch(loginRequestAction(params)) }); export default connect(mapStateToProps, mapDispatchToProps)(withTheme(LoginView));