Changeset View
Changeset View
Standalone View
Standalone View
native/account/registration/username-selection.react.js
Show First 20 Lines • Show All 44 Lines • ▼ Show 20 Lines | type Props = { | ||||
+navigation: RegistrationNavigationProp<'UsernameSelection'>, | +navigation: RegistrationNavigationProp<'UsernameSelection'>, | ||||
+route: NavigationRoute<'UsernameSelection'>, | +route: NavigationRoute<'UsernameSelection'>, | ||||
}; | }; | ||||
function UsernameSelection(props: Props): React.Node { | function UsernameSelection(props: Props): React.Node { | ||||
const [username, setUsername] = React.useState(''); | const [username, setUsername] = React.useState(''); | ||||
const validUsername = username.search(validUsernameRegex) > -1; | const validUsername = username.search(validUsernameRegex) > -1; | ||||
const [usernameError, setUsernameError] = React.useState<?UsernameError>(); | const [usernameError, setUsernameError] = React.useState<?UsernameError>(); | ||||
const styles = useStyles(unboundStyles); | |||||
const checkUsernameValidity = React.useCallback(() => { | const checkUsernameValidity = React.useCallback(() => { | ||||
if (validUsername) { | if (!validUsername) { | ||||
ashoat: I flipped the order of the conditions since they now had the same amount of code, and I figured… | |||||
return true; | |||||
} | |||||
setUsernameError('username_invalid'); | setUsernameError('username_invalid'); | ||||
return false; | return false; | ||||
} | |||||
setUsernameError(null); | |||||
return true; | |||||
}, [validUsername]); | }, [validUsername]); | ||||
const exactSearchUserCall = useServerCall(exactSearchUser); | const exactSearchUserCall = useServerCall(exactSearchUser); | ||||
const dispatchActionPromise = useDispatchActionPromise(); | const dispatchActionPromise = useDispatchActionPromise(); | ||||
const { navigate } = props.navigation; | const { navigate } = props.navigation; | ||||
const { userSelections } = props.route.params; | const { userSelections } = props.route.params; | ||||
const onProceed = React.useCallback(async () => { | const onProceed = React.useCallback(async () => { | ||||
if (!checkUsernameValidity()) { | if (!checkUsernameValidity()) { | ||||
Show All 33 Lines | function UsernameSelection(props: Props): React.Node { | ||||
); | ); | ||||
let buttonVariant = 'disabled'; | let buttonVariant = 'disabled'; | ||||
if (exactSearchUserCallLoading) { | if (exactSearchUserCallLoading) { | ||||
buttonVariant = 'loading'; | buttonVariant = 'loading'; | ||||
} else if (validUsername) { | } else if (validUsername) { | ||||
buttonVariant = 'enabled'; | buttonVariant = 'enabled'; | ||||
} | } | ||||
const styles = useStyles(unboundStyles); | |||||
let errorText; | let errorText; | ||||
if (usernameError === 'username_invalid') { | if (usernameError === 'username_invalid') { | ||||
errorText = ( | errorText = ( | ||||
<> | <> | ||||
<Text style={styles.errorText}>Usernames must:</Text> | <Text style={styles.errorText}>Usernames must:</Text> | ||||
<View style={styles.listItem}> | <View style={styles.listItem}> | ||||
<Text style={[styles.errorText, styles.listItemNumber]}>{'1. '}</Text> | <Text style={[styles.errorText, styles.listItemNumber]}>{'1. '}</Text> | ||||
<Text style={[styles.errorText, styles.listItemContent]}> | <Text style={[styles.errorText, styles.listItemContent]}> | ||||
Show All 31 Lines | <RegistrationContainer> | ||||
onChangeText={setUsername} | onChangeText={setUsername} | ||||
placeholder="Username" | placeholder="Username" | ||||
autoFocus={true} | autoFocus={true} | ||||
autoCorrect={false} | autoCorrect={false} | ||||
autoCapitalize="none" | autoCapitalize="none" | ||||
keyboardType="ascii-capable" | keyboardType="ascii-capable" | ||||
textContentType="username" | textContentType="username" | ||||
autoComplete="username-new" | autoComplete="username-new" | ||||
returnKeyType="next" | returnKeyType="go" | ||||
onSubmitEditing={onProceed} | onSubmitEditing={onProceed} | ||||
editable={!exactSearchUserCallLoading} | editable={!exactSearchUserCallLoading} | ||||
onBlur={checkUsernameValidity} | onBlur={checkUsernameValidity} | ||||
/> | /> | ||||
<View style={styles.error}>{errorText}</View> | <View style={styles.error}>{errorText}</View> | ||||
</RegistrationContentContainer> | </RegistrationContentContainer> | ||||
<RegistrationButtonContainer> | <RegistrationButtonContainer> | ||||
<RegistrationButton | <RegistrationButton | ||||
Show All 36 Lines |
I flipped the order of the conditions since they now had the same amount of code, and I figured it made more sense to have the "default" condition at end, in part for consistency with PasswordSelection which has two possible error states