Chore: Hooks app/views/ForgotPasswordView (#4485)

* Chore: Hooks app/views/ForgotPasswordView

* validating email and using hook forms

* using mode onCHange

* add return

* fix theme

Co-authored-by: Gleidson Daniel <gleidson10daniel@hotmail.com>

app/stacks/OutsideStack.tsx

@@ -25,7 +25,7 @@ const _OutsideStack = () => {
 			<Outside.Screen name='NewServerView' component={NewServerView} options={NewServerView.navigationOptions} />
 			<Outside.Screen name='WorkspaceView' component={WorkspaceView} options={WorkspaceView.navigationOptions} />
 			<Outside.Screen name='LoginView' component={LoginView} options={LoginView.navigationOptions} />
-			<Outside.Screen name='ForgotPasswordView' component={ForgotPasswordView} options={ForgotPasswordView.navigationOptions} />
+			<Outside.Screen name='ForgotPasswordView' component={ForgotPasswordView} />
 			<Outside.Screen name='SendEmailConfirmationView' component={SendEmailConfirmationView} />
 			<Outside.Screen name='RegisterView' component={RegisterView} options={RegisterView.navigationOptions} />
 			<Outside.Screen name='LegalView' component={LegalView} />

app/views/ForgotPasswordView.tsx

@@ -1,75 +1,58 @@
-import React from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import { Text } from 'react-native';
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { useForm } from 'react-hook-form';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
 
 import Button from '../containers/Button';
 import FormContainer, { FormContainerInner } from '../containers/FormContainer';
-import { FormTextInput } from '../containers/TextInput';
+import { ControlledFormTextInput } from '../containers/TextInput';
 import I18n from '../i18n';
-import { themes } from '../lib/constants';
 import { Services } from '../lib/services';
 import { OutsideParamList } from '../stacks/types';
-import { withTheme } from '../theme';
+import { useTheme } from '../theme';
-import { showErrorAlert, isValidEmail } from '../lib/methods/helpers';
+import { showErrorAlert } from '../lib/methods/helpers';
 import { events, logEvent } from '../lib/methods/helpers/log';
-import { IBaseScreen } from '../definitions';
 import sharedStyles from './Styles';
 
-interface IForgotPasswordViewState {
+const schema = yup.object().shape({
+	email: yup.string().email().required()
+});
+
+interface ISubmit {
 	email: string;
-	invalidEmail: boolean;
-	isFetching: boolean;
 }
 
-type IForgotPasswordViewProps = IBaseScreen<OutsideParamList, 'ForgotPasswordView'>;
+const ForgotPasswordView = (): React.ReactElement => {
+	const {
+		control,
+		handleSubmit,
+		formState: { isValid }
+	} = useForm<ISubmit>({ mode: 'onChange', resolver: yupResolver(schema) });
 
-class ForgotPasswordView extends React.Component<IForgotPasswordViewProps, IForgotPasswordViewState> {
+	const [isFetching, setIsFetching] = useState(false);
-	static navigationOptions = ({ route }: IForgotPasswordViewProps) => ({
-		title: route.params?.title ?? 'Rocket.Chat'
-	});
 
-	state = {
+	const navigation = useNavigation<StackNavigationProp<OutsideParamList, 'ForgotPasswordView'>>();
-		email: '',
+	const { params } = useRoute<RouteProp<OutsideParamList, 'ForgotPasswordView'>>();
-		invalidEmail: true,
+	const { colors } = useTheme();
-		isFetching: false
-	};
 
-	shouldComponentUpdate(nextProps: IForgotPasswordViewProps, nextState: IForgotPasswordViewState) {
+	useLayoutEffect(() => {
-		const { email, invalidEmail, isFetching } = this.state;
+		navigation.setOptions({
-		const { theme } = this.props;
+			title: params?.title ?? 'Rocket.Chat'
-		if (nextProps.theme !== theme) {
+		});
-			return true;
+	}, [navigation, params?.title]);
-		}
-		if (nextState.email !== email) {
-			return true;
-		}
-		if (nextState.invalidEmail !== invalidEmail) {
-			return true;
-		}
-		if (nextState.isFetching !== isFetching) {
-			return true;
-		}
-		return false;
-	}
 
-	validate = (email: string) => {
+	const resetPassword = async ({ email }: ISubmit) => {
-		if (!isValidEmail(email)) {
+		if (!isValid) {
-			this.setState({ invalidEmail: true });
-			return;
-		}
-		this.setState({ email, invalidEmail: false });
-	};
-
-	resetPassword = async () => {
-		logEvent(events.FP_FORGOT_PASSWORD);
-		const { email, invalidEmail } = this.state;
-		if (invalidEmail || !email) {
 			return;
 		}
 		try {
-			this.setState({ isFetching: true });
+			logEvent(events.FP_FORGOT_PASSWORD);
+			setIsFetching(true);
 			const result = await Services.forgotPassword(email);
 			if (result.success) {
-				const { navigation } = this.props;
 				navigation.pop();
 				showErrorAlert(I18n.t('Forgot_password_If_this_email_is_registered'), I18n.t('Alert'));
 			}
@@ -78,41 +61,38 @@ class ForgotPasswordView extends React.Component<IForgotPasswordViewProps, IForg
 			const msg = (e.data && e.data.error) || I18n.t('There_was_an_error_while_action', { action: I18n.t('resetting_password') });
 			showErrorAlert(msg, I18n.t('Alert'));
 		}
-		this.setState({ isFetching: false });
+		setIsFetching(false);
 	};
 
-	render() {
+	return (
-		const { invalidEmail, isFetching } = this.state;
+		<FormContainer testID='forgot-password-view'>
-		const { theme } = this.props;
+			<FormContainerInner>
+				<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, { color: colors.titleText }]}>
+					{I18n.t('Forgot_password')}
+				</Text>
+				<ControlledFormTextInput
+					name='email'
+					control={control}
+					autoFocus
+					placeholder={I18n.t('Email')}
+					keyboardType='email-address'
+					returnKeyType='send'
+					iconLeft='mail'
+					onSubmitEditing={handleSubmit(resetPassword)}
+					testID='forgot-password-view-email'
+					containerStyle={sharedStyles.inputLastChild}
+				/>
+				<Button
+					title={I18n.t('Reset_password')}
+					type='primary'
+					onPress={handleSubmit(resetPassword)}
+					testID='forgot-password-view-submit'
+					loading={isFetching}
+					disabled={!isValid}
+				/>
+			</FormContainerInner>
+		</FormContainer>
+	);
+};
 
-		return (
+export default ForgotPasswordView;
-			<FormContainer testID='forgot-password-view'>
-				<FormContainerInner>
-					<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, { color: themes[theme].titleText }]}>
-						{I18n.t('Forgot_password')}
-					</Text>
-					<FormTextInput
-						autoFocus
-						placeholder={I18n.t('Email')}
-						keyboardType='email-address'
-						returnKeyType='send'
-						onChangeText={email => this.validate(email)}
-						onSubmitEditing={this.resetPassword}
-						testID='forgot-password-view-email'
-						containerStyle={sharedStyles.inputLastChild}
-					/>
-					<Button
-						title={I18n.t('Reset_password')}
-						type='primary'
-						onPress={this.resetPassword}
-						testID='forgot-password-view-submit'
-						loading={isFetching}
-						disabled={invalidEmail}
-					/>
-				</FormContainerInner>
-			</FormContainer>
-		);
-	}
-}
-
-export default withTheme(ForgotPasswordView);