Differential D7969 Diff 27024 native/account/registration/username-selection.react.js

Changeset View

Standalone View

native/account/registration/username-selection.react.js

	Show All 15 Lines

	import RegistrationButtonContainer from './registration-button-container.react.js';			import RegistrationButtonContainer from './registration-button-container.react.js';
	import RegistrationButton from './registration-button.react.js';			import RegistrationButton from './registration-button.react.js';
	import RegistrationContainer from './registration-container.react.js';			import RegistrationContainer from './registration-container.react.js';
	import RegistrationContentContainer from './registration-content-container.react.js';			import RegistrationContentContainer from './registration-content-container.react.js';
	import type { RegistrationNavigationProp } from './registration-navigator.react.js';			import type { RegistrationNavigationProp } from './registration-navigator.react.js';
	import RegistrationTextInput from './registration-text-input.react.js';			import RegistrationTextInput from './registration-text-input.react.js';
	import type { CoolOrNerdMode } from './registration-types.js';			import type { CoolOrNerdMode } from './registration-types.js';
	import type { NavigationRoute } from '../../navigation/route-names.js';			import {
				type NavigationRoute,
				PasswordSelectionRouteName,
				} from '../../navigation/route-names.js';
	import { useSelector } from '../../redux/redux-utils.js';			import { useSelector } from '../../redux/redux-utils.js';
	import { useStyles } from '../../themes/colors.js';			import { useStyles } from '../../themes/colors.js';

	const exactSearchUserLoadingStatusSelector = createLoadingStatusSelector(			const exactSearchUserLoadingStatusSelector = createLoadingStatusSelector(
	exactSearchUserActionTypes,			exactSearchUserActionTypes,
	);			);

	export type UsernameSelectionParams = {			export type UsernameSelectionParams = {
	+userSelections: {			+userSelections: {
	+coolOrNerdMode: CoolOrNerdMode,			+coolOrNerdMode: CoolOrNerdMode,
	+keyserverUsername: string,			+keyserverUsername: string,
	},			},
	};			};

	type UsernameError = 'username_invalid' \| 'username_taken';			type UsernameError = 'username_invalid' \| 'username_taken';

	type Props = {			type Props = {
	+navigation: RegistrationNavigationProp<'UsernameSelection'>,			+navigation: RegistrationNavigationProp<'UsernameSelection'>,
	+route: NavigationRoute<'UsernameSelection'>,			+route: NavigationRoute<'UsernameSelection'>,
	};			};
	// eslint-disable-next-line no-unused-vars
	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 styles = useStyles(unboundStyles);
	const checkUsernameValidity = React.useCallback(() => {			const checkUsernameValidity = React.useCallback(() => {
	if (validUsername) {			if (validUsername) {
	return true;			return true;
	}			}
	setUsernameError('username_invalid');			setUsernameError('username_invalid');
	return false;			return false;
	}, [validUsername]);			}, [validUsername]);

	const exactSearchUserCall = useServerCall(exactSearchUser);			const exactSearchUserCall = useServerCall(exactSearchUser);
	const dispatchActionPromise = useDispatchActionPromise();			const dispatchActionPromise = useDispatchActionPromise();
				const { navigate } = props.navigation;
				const { userSelections } = props.route.params;
	const onProceed = React.useCallback(async () => {			const onProceed = React.useCallback(async () => {
	if (!checkUsernameValidity()) {			if (!checkUsernameValidity()) {
	return;			return;
	}			}

	const searchPromise = exactSearchUserCall(username);			const searchPromise = exactSearchUserCall(username);
	dispatchActionPromise(exactSearchUserActionTypes, searchPromise);			dispatchActionPromise(exactSearchUserActionTypes, searchPromise);
	const { userInfo } = await searchPromise;			const { userInfo } = await searchPromise;

	if (userInfo) {			if (userInfo) {
	setUsernameError('username_taken');			setUsernameError('username_taken');
	return;			return;
	}			}

	setUsernameError(undefined);			setUsernameError(undefined);
				navigate<'PasswordSelection'>({
				name: PasswordSelectionRouteName,
				params: {
				userSelections: {
				...userSelections,
				username,
				},
				},
				});
	}, [			}, [
	checkUsernameValidity,			checkUsernameValidity,
	username,			username,
	exactSearchUserCall,			exactSearchUserCall,
	dispatchActionPromise,			dispatchActionPromise,
				navigate,
				userSelections,
	]);			]);

	const exactSearchUserCallLoading = useSelector(			const exactSearchUserCallLoading = useSelector(
	state => exactSearchUserLoadingStatusSelector(state) === 'loading',			state => exactSearchUserLoadingStatusSelector(state) === 'loading',
	);			);
	let buttonVariant = 'disabled';			let buttonVariant = 'disabled';
	if (exactSearchUserCallLoading) {			if (exactSearchUserCallLoading) {
	buttonVariant = 'loading';			buttonVariant = 'loading';
	▲ Show 20 Lines • Show All 96 Lines • Show Last 20 Lines