Differential D8149 Diff 27615 native/account/registration/avatar-selection.react.js

Changeset View

Standalone View

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

// @flow		// @flow

import invariant from 'invariant';		import invariant from 'invariant';
import * as React from 'react';		import * as React from 'react';
import { Text, View } from 'react-native';		import { Text, View } from 'react-native';

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 { RegistrationContext } from './registration-context.js';
import type { RegistrationNavigationProp } from './registration-navigator.react.js';		import type { RegistrationNavigationProp } from './registration-navigator.react.js';
import type {		import type {
CoolOrNerdMode,		CoolOrNerdMode,
AccountSelection,		AccountSelection,
AvatarData,		AvatarData,
} from './registration-types.js';		} from './registration-types.js';
import {		import {
EditUserAvatarContext,		EditUserAvatarContext,
▲ Show 20 Lines • Show All 64 Lines • ▼ Show 20 Lines	(selection: UserAvatarSelection) => {
});		});
} else {		} else {
setAvatarData(undefined);		setAvatarData(undefined);
}		}
},		},
[],		[],
);		);

		const [registrationInProgress, setRegistrationInProgress] =
		React.useState(false);

React.useEffect(() => {		React.useEffect(() => {
		if (registrationInProgress) {
		return undefined;
		}
setRegistrationMode({		setRegistrationMode({
registrationMode: 'on',		registrationMode: 'on',
successCallback: setClientAvatarFromSelection,		successCallback: setClientAvatarFromSelection,
});		});
return () => {		return () => {
setRegistrationMode({ registrationMode: 'off' });		setRegistrationMode({ registrationMode: 'off' });
};		};
}, [setRegistrationMode, setClientAvatarFromSelection]);		}, [
		registrationInProgress,
const onProceed = React.useCallback(() => {}, []);		setRegistrationMode,
		setClientAvatarFromSelection,
		]);

		const registrationContext = React.useContext(RegistrationContext);
		invariant(registrationContext, 'registrationContext should be set');
		const { register } = registrationContext;

		const onProceed = React.useCallback(async () => {
		setRegistrationInProgress(true);
		try {
		await register({
		...userSelections,
		avatarData,
		});
		} finally {
		setRegistrationInProgress(false);
		}
		}, [register, userSelections, avatarData]);

const clientAvatar = avatarData?.clientAvatar;		const clientAvatar = avatarData?.clientAvatar;
const userInfoOverride = React.useMemo(		const userInfoOverride = React.useMemo(
() => ({		() => ({
username,		username,
avatar: clientAvatar,		avatar: clientAvatar,
}),		}),
[username, clientAvatar],		[username, clientAvatar],
);		);

const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);
return (		return (
<RegistrationContainer>		<RegistrationContainer>
<RegistrationContentContainer style={styles.scrollViewContentContainer}>		<RegistrationContentContainer style={styles.scrollViewContentContainer}>
<Text style={styles.header}>Pick an avatar</Text>		<Text style={styles.header}>Pick an avatar</Text>
<View style={styles.stagedAvatarSection}>		<View style={styles.stagedAvatarSection}>
<View style={styles.editUserAvatar}>		<View style={styles.editUserAvatar}>
<EditUserAvatar		<EditUserAvatar
userInfo={userInfoOverride}		userInfo={userInfoOverride}
disabled={false}		disabled={registrationInProgress}
prefetchedAvatarURI={prefetchedAvatarURI}		prefetchedAvatarURI={prefetchedAvatarURI}
/>		/>
</View>		</View>
</View>		</View>
</RegistrationContentContainer>		</RegistrationContentContainer>
<RegistrationButtonContainer>		<RegistrationButtonContainer>
<RegistrationButton		<RegistrationButton
onPress={onProceed}		onPress={onProceed}
label="Submit"		label="Submit"
variant="disabled"		variant={registrationInProgress ? 'loading' : 'enabled'}
/>		/>
</RegistrationButtonContainer>		</RegistrationButtonContainer>
</RegistrationContainer>		</RegistrationContainer>
);		);
}		}

const unboundStyles = {		const unboundStyles = {
scrollViewContentContainer: {		scrollViewContentContainer: {
Show All 21 Lines