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,122 +31,94 @@ 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 suggestion = await Services.getUsernameSuggestion();
+		const init = async () => {
-		if (suggestion.success) {
+			const suggestion = await Services.getUsernameSuggestion();
-			this.setState({ username: suggestion.result });
+			if (suggestion.success) {
-		}
+				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() {
+	return (
-		const { username, saving } = this.state;
+		<KeyboardView style={{ backgroundColor: colors.auxiliaryBackground }} contentContainerStyle={sharedStyles.container}>
-		const { theme } = this.props;
+			<StatusBar />
-		return (
+			<ScrollView {...scrollPersistTaps} contentContainerStyle={sharedStyles.containerScrollView}>
-			<KeyboardView style={{ backgroundColor: themes[theme].auxiliaryBackground }} contentContainerStyle={sharedStyles.container}>
+				<SafeAreaView testID='set-username-view'>
-				<StatusBar />
+					<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, styles.loginTitle, { color: colors.titleText }]}>
-				<ScrollView {...scrollPersistTaps} contentContainerStyle={sharedStyles.containerScrollView}>
+						{I18n.t('Username')}
-					<SafeAreaView testID='set-username-view'>
+					</Text>
-						<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, styles.loginTitle, { color: themes[theme].titleText }]}>
+					<Text style={[sharedStyles.loginSubtitle, sharedStyles.textRegular, { color: colors.titleText }]}>
-							{I18n.t('Username')}
+						{I18n.t('Set_username_subtitle')}
-						</Text>
+					</Text>
-						<Text style={[sharedStyles.loginSubtitle, sharedStyles.textRegular, { color: themes[theme].titleText }]}>
+					<ControlledFormTextInput
-							{I18n.t('Set_username_subtitle')}
+						control={control}
-						</Text>
+						name='username'
-						<FormTextInput
+						autoFocus
-							autoFocus
+						placeholder={I18n.t('Username')}
-							placeholder={I18n.t('Username')}
+						returnKeyType='send'
-							returnKeyType='send'
+						onSubmitEditing={handleSubmit(submit)}
-							onChangeText={value => this.setState({ username: value })}
+						testID='set-username-view-input'
-							value={username}
+						clearButtonMode='while-editing'
-							onSubmitEditing={this.submit}
+						containerStyle={sharedStyles.inputLastChild}
-							testID='set-username-view-input'
+					/>
-							clearButtonMode='while-editing'
+					<Button
-							containerStyle={sharedStyles.inputLastChild}
+						title={I18n.t('Register')}
-						/>
+						type='primary'
-						<Button
+						onPress={handleSubmit(submit)}
-							title={I18n.t('Register')}
+						testID='set-username-view-submit'
-							type='primary'
+						disabled={!isValid}
-							onPress={this.submit}
+						loading={loading}
-							testID='set-username-view-submit'
+					/>
-							disabled={!username}
+				</SafeAreaView>
-							loading={saving}
+			</ScrollView>
-						/>
+		</KeyboardView>
-					</SafeAreaView>
+	);
-				</ScrollView>
+};
-			</KeyboardView>
-		);
-	}
-}
 
-const mapStateToProps = (state: IApplicationState) => ({
+export default SetUsernameView;
-	server: state.server.server,
-	token: getUserSelector(state).token
-});
-
-export default connect(mapStateToProps)(withTheme(SetUsernameView));