Chore: Hooks app/views/SetUsernameView (#4488)

* Chore: Hooks app/views/SetUsernameView

* semantic change of loading state

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

app/views/SetUsernameView.tsx

@@ -1,27 +1,28 @@
-import { RouteProp } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
-import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
+import { StackNavigationProp } from '@react-navigation/stack';
-import React from 'react';
+import React, { useEffect, useLayoutEffect, useState } from 'react';
 import { ScrollView, StyleSheet, Text } from 'react-native';
 import Orientation from 'react-native-orientation-locker';
-import { connect } from 'react-redux';
+import { useDispatch } from 'react-redux';
-import { Dispatch } from 'redux';
+import { useForm } from 'react-hook-form';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
 
 import { loginRequest } from '../actions/login';
-import { themes } from '../lib/constants';
 import Button from '../containers/Button';
 import SafeAreaView from '../containers/SafeAreaView';
 import StatusBar from '../containers/StatusBar';
-import { FormTextInput } from '../containers/TextInput';
+import { ControlledFormTextInput } from '../containers/TextInput';
-import { IApplicationState } from '../definitions';
 import { SetUsernameStackParamList } from '../definitions/navigationTypes';
 import I18n from '../i18n';
 import KeyboardView from '../containers/KeyboardView';
 import { getUserSelector } from '../selectors/login';
-import { TSupportedThemes, withTheme } from '../theme';
+import { useTheme } from '../theme';
 import { isTablet, showErrorAlert } from '../lib/methods/helpers';
 import scrollPersistTaps from '../lib/methods/helpers/scrollPersistTaps';
 import sharedStyles from './Styles';
 import { Services } from '../lib/services';
+import { useAppSelector } from '../lib/hooks';
 
 const styles = StyleSheet.create({
 	loginTitle: {
@@ -30,100 +31,78 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface ISetUsernameViewState {
+interface ISubmit {
 	username: string;
-	saving: boolean;
 }
 
-interface ISetUsernameViewProps {
+const schema = yup.object().shape({
-	navigation: StackNavigationProp<SetUsernameStackParamList, 'SetUsernameView'>;
+	username: yup.string().required()
-	route: RouteProp<SetUsernameStackParamList, 'SetUsernameView'>;
+});
-	server: string;
-	userId: string;
-	token: string;
-	theme: TSupportedThemes;
-	dispatch: Dispatch;
-}
 
-class SetUsernameView extends React.Component<ISetUsernameViewProps, ISetUsernameViewState> {
+const SetUsernameView = () => {
-	static navigationOptions = ({ route }: Pick<ISetUsernameViewProps, 'route'>): StackNavigationOptions => ({
+	const {
-		title: route.params?.title
+		control,
-	});
+		handleSubmit,
+		formState: { isValid },
+		setValue
+	} = useForm<ISubmit>({ mode: 'onChange', resolver: yupResolver(schema) });
+	const [loading, setLoading] = useState(false);
 
-	constructor(props: ISetUsernameViewProps) {
+	const { colors } = useTheme();
-		super(props);
+	const dispatch = useDispatch();
-		this.state = {
+	const { server, token } = useAppSelector(state => ({ server: state.server.server, token: getUserSelector(state).token }));
-			username: '',
+
-			saving: false
+	const navigation = useNavigation<StackNavigationProp<SetUsernameStackParamList, 'SetUsernameView'>>();
-		};
+
-		const { server } = this.props;
+	useLayoutEffect(() => {
-		props.navigation.setOptions({ title: server });
+		navigation.setOptions({ title: server });
 		if (!isTablet) {
 			Orientation.lockToPortrait();
 		}
-	}
+	}, [navigation, server]);
 
-	async componentDidMount() {
+	useEffect(() => {
+		const init = async () => {
 			const suggestion = await Services.getUsernameSuggestion();
 			if (suggestion.success) {
-			this.setState({ username: suggestion.result });
+				setValue('username', suggestion.result, { shouldValidate: true });
-		}
 			}
+		};
+		init();
+	}, []);
 
-	shouldComponentUpdate(nextProps: ISetUsernameViewProps, nextState: ISetUsernameViewState) {
+	const submit = async ({ username }: ISubmit) => {
-		const { username, saving } = this.state;
+		if (!isValid) {
-		const { theme } = this.props;
-		if (nextProps.theme !== theme) {
-			return true;
-		}
-		if (nextState.username !== username) {
-			return true;
-		}
-		if (nextState.saving !== saving) {
-			return true;
-		}
-		return false;
-	}
-
-	submit = async () => {
-		const { username } = this.state;
-		const { dispatch, token } = this.props;
-
-		if (!username.trim()) {
 			return;
 		}
-
+		setLoading(true);
-		this.setState({ saving: true });
 		try {
 			await Services.saveUserProfile({ username });
 			dispatch(loginRequest({ resume: token }));
 		} catch (e: any) {
 			showErrorAlert(e.message, I18n.t('Oops'));
 		}
-		this.setState({ saving: false });
+		setLoading(false);
 	};
 
-	render() {
-		const { username, saving } = this.state;
-		const { theme } = this.props;
 	return (
-			<KeyboardView style={{ backgroundColor: themes[theme].auxiliaryBackground }} contentContainerStyle={sharedStyles.container}>
+		<KeyboardView style={{ backgroundColor: colors.auxiliaryBackground }} contentContainerStyle={sharedStyles.container}>
 			<StatusBar />
 			<ScrollView {...scrollPersistTaps} contentContainerStyle={sharedStyles.containerScrollView}>
 				<SafeAreaView testID='set-username-view'>
-						<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, styles.loginTitle, { color: themes[theme].titleText }]}>
+					<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, styles.loginTitle, { color: colors.titleText }]}>
 						{I18n.t('Username')}
 					</Text>
-						<Text style={[sharedStyles.loginSubtitle, sharedStyles.textRegular, { color: themes[theme].titleText }]}>
+					<Text style={[sharedStyles.loginSubtitle, sharedStyles.textRegular, { color: colors.titleText }]}>
 						{I18n.t('Set_username_subtitle')}
 					</Text>
-						<FormTextInput
+					<ControlledFormTextInput
+						control={control}
+						name='username'
 						autoFocus
 						placeholder={I18n.t('Username')}
 						returnKeyType='send'
-							onChangeText={value => this.setState({ username: value })}
+						onSubmitEditing={handleSubmit(submit)}
-							value={username}
-							onSubmitEditing={this.submit}
 						testID='set-username-view-input'
 						clearButtonMode='while-editing'
 						containerStyle={sharedStyles.inputLastChild}
@@ -131,21 +110,15 @@ class SetUsernameView extends React.Component<ISetUsernameViewProps, ISetUsernam
 					<Button
 						title={I18n.t('Register')}
 						type='primary'
-							onPress={this.submit}
+						onPress={handleSubmit(submit)}
 						testID='set-username-view-submit'
-							disabled={!username}
+						disabled={!isValid}
-							loading={saving}
+						loading={loading}
 					/>
 				</SafeAreaView>
 			</ScrollView>
 		</KeyboardView>
 	);
-	}
+};
-}
 
-const mapStateToProps = (state: IApplicationState) => ({
+export default SetUsernameView;
-	server: state.server.server,
-	token: getUserSelector(state).token
-});
-
-export default connect(mapStateToProps)(withTheme(SetUsernameView));