diff --git a/src/view/com/login/CreateAccount.tsx b/src/view/com/login/CreateAccount.tsx index f04e1d01..3c09a6cc 100644 --- a/src/view/com/login/CreateAccount.tsx +++ b/src/view/com/login/CreateAccount.tsx @@ -1,4 +1,4 @@ -import React, {useState, useEffect} from 'react' +import React from 'react' import { ActivityIndicator, Keyboard, @@ -33,25 +33,27 @@ export const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => { const {track, screen, identify} = useAnalytics() const pal = usePalette('default') const store = useStores() - const [isProcessing, setIsProcessing] = useState(false) - const [serviceUrl, setServiceUrl] = useState(DEFAULT_SERVICE) - const [error, setError] = useState('') - const [retryDescribeTrigger, setRetryDescribeTrigger] = useState({}) - const [serviceDescription, setServiceDescription] = useState< + const [isProcessing, setIsProcessing] = React.useState(false) + const [serviceUrl, setServiceUrl] = React.useState(DEFAULT_SERVICE) + const [error, setError] = React.useState('') + const [retryDescribeTrigger, setRetryDescribeTrigger] = React.useState( + {}, + ) + const [serviceDescription, setServiceDescription] = React.useState< ServiceDescription | undefined >(undefined) - const [userDomain, setUserDomain] = useState('') - const [inviteCode, setInviteCode] = useState('') - const [email, setEmail] = useState('') - const [password, setPassword] = useState('') - const [handle, setHandle] = useState('') - const [is13, setIs13] = useState(false) + const [userDomain, setUserDomain] = React.useState('') + const [inviteCode, setInviteCode] = React.useState('') + const [email, setEmail] = React.useState('') + const [password, setPassword] = React.useState('') + const [handle, setHandle] = React.useState('') + const [is13, setIs13] = React.useState(false) - useEffect(() => { + React.useEffect(() => { screen('CreateAccount') }, [screen]) - useEffect(() => { + React.useEffect(() => { let aborted = false setError('') setServiceDescription(undefined) @@ -81,18 +83,25 @@ export const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => { } }, [serviceUrl, store.session, store.log, retryDescribeTrigger]) - const onPressRetryConnect = () => setRetryDescribeTrigger({}) + const onPressRetryConnect = React.useCallback( + () => setRetryDescribeTrigger({}), + [setRetryDescribeTrigger], + ) - const onPressSelectService = () => { + const onPressSelectService = React.useCallback(() => { store.shell.openModal({ name: 'server-input', initialService: serviceUrl, onSelect: setServiceUrl, }) Keyboard.dismiss() - } + }, [store, serviceUrl]) - const onPressNext = async () => { + const onBlurInviteCode = React.useCallback(() => { + setInviteCode(inviteCode.trim()) + }, [setInviteCode, inviteCode]) + + const onPressNext = React.useCallback(async () => { if (!email) { return setError('Please enter your email.') } @@ -130,7 +139,19 @@ export const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => { setIsProcessing(false) setError(cleanError(errMsg)) } - } + }, [ + serviceUrl, + userDomain, + inviteCode, + email, + password, + handle, + setError, + setIsProcessing, + store, + track, + identify, + ]) const isReady = !!email && !!password && !!handle && is13 return ( @@ -201,6 +222,7 @@ export const CreateAccount = ({onPressBack}: {onPressBack: () => void}) => { autoFocus value={inviteCode} onChangeText={setInviteCode} + onBlur={onBlurInviteCode} editable={!isProcessing} />