From eabb9f157c617f9825f0790402ec08e917dbda73 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com> Date: Tue, 6 Sep 2022 13:53:21 -0300 Subject: [PATCH] Chore: Hooks app/views/SetUsernameView (#4488) * Chore: Hooks app/views/SetUsernameView * semantic change of loading state Co-authored-by: Gleidson Daniel --- app/views/SetUsernameView.tsx | 187 +++++++++++++++------------------- 1 file changed, 80 insertions(+), 107 deletions(-) diff --git a/app/views/SetUsernameView.tsx b/app/views/SetUsernameView.tsx index 266bb2ee5..b500ecd18 100644 --- a/app/views/SetUsernameView.tsx +++ b/app/views/SetUsernameView.tsx @@ -1,27 +1,28 @@ -import { RouteProp } from '@react-navigation/native'; -import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack'; -import React from 'react'; +import { useNavigation } from '@react-navigation/native'; +import { StackNavigationProp } from '@react-navigation/stack'; +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 { Dispatch } from 'redux'; +import { useDispatch } from 'react-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 { IApplicationState } from '../definitions'; +import { ControlledFormTextInput } from '../containers/TextInput'; 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 { - navigation: StackNavigationProp; - route: RouteProp; - server: string; - userId: string; - token: string; - theme: TSupportedThemes; - dispatch: Dispatch; -} +const schema = yup.object().shape({ + username: yup.string().required() +}); -class SetUsernameView extends React.Component { - static navigationOptions = ({ route }: Pick): StackNavigationOptions => ({ - title: route.params?.title - }); +const SetUsernameView = () => { + const { + control, + handleSubmit, + formState: { isValid }, + setValue + } = useForm({ mode: 'onChange', resolver: yupResolver(schema) }); + const [loading, setLoading] = useState(false); - constructor(props: ISetUsernameViewProps) { - super(props); - this.state = { - username: '', - saving: false - }; - const { server } = this.props; - props.navigation.setOptions({ title: server }); + const { colors } = useTheme(); + const dispatch = useDispatch(); + const { server, token } = useAppSelector(state => ({ server: state.server.server, token: getUserSelector(state).token })); + + const navigation = useNavigation>(); + + useLayoutEffect(() => { + navigation.setOptions({ title: server }); if (!isTablet) { Orientation.lockToPortrait(); } - } + }, [navigation, server]); - async componentDidMount() { - const suggestion = await Services.getUsernameSuggestion(); - if (suggestion.success) { - this.setState({ username: suggestion.result }); - } - } + useEffect(() => { + const init = async () => { + const suggestion = await Services.getUsernameSuggestion(); + if (suggestion.success) { + setValue('username', suggestion.result, { shouldValidate: true }); + } + }; + init(); + }, []); - shouldComponentUpdate(nextProps: ISetUsernameViewProps, nextState: ISetUsernameViewState) { - const { username, saving } = this.state; - 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()) { + const submit = async ({ username }: ISubmit) => { + if (!isValid) { return; } - - this.setState({ saving: true }); + setLoading(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 ( - - - - - - {I18n.t('Username')} - - - {I18n.t('Set_username_subtitle')} - - this.setState({ username: value })} - value={username} - onSubmitEditing={this.submit} - testID='set-username-view-input' - clearButtonMode='while-editing' - containerStyle={sharedStyles.inputLastChild} - /> -