Differential D8048 Diff 27367 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 * as React from 'react';			import * as React from 'react';
	import { Text, View } from 'react-native';			import { Text, View } from 'react-native';

				import type {
				UpdateUserAvatarRequest,
				ClientAvatar,
				} from 'lib/types/avatar-types.js';
				import type { NativeMediaSelection } from 'lib/types/media-types.js';
	import type { SIWEResult } from 'lib/types/siwe-types.js';			import type { SIWEResult } from 'lib/types/siwe-types.js';

	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 type { CoolOrNerdMode } from './registration-types.js';			import type { CoolOrNerdMode } from './registration-types.js';
				import {
				EditUserAvatarContext,
				type UserAvatarSelection,
				} from '../../avatars/edit-user-avatar-provider.react.js';
	import EditUserAvatar from '../../avatars/edit-user-avatar.react.js';			import EditUserAvatar from '../../avatars/edit-user-avatar.react.js';
	import type { NavigationRoute } from '../../navigation/route-names.js';			import type { NavigationRoute } from '../../navigation/route-names.js';
	import { useStyles } from '../../themes/colors.js';			import { useStyles } from '../../themes/colors.js';

	type EthereumAccountSelections = {			type EthereumAccountSelections = {
	+accountType: 'ethereum',			+accountType: 'ethereum',
	...SIWEResult,			...SIWEResult,
	};			};

	type UsernameAccountSelections = {			type UsernameAccountSelections = {
	+accountType: 'username',			+accountType: 'username',
	+username: string,			+username: string,
	+password: string,			+password: string,
	};			};

	export type AvatarSelectionParams = {			export type AvatarSelectionParams = {
	+userSelections: {			+userSelections: {
	+coolOrNerdMode: CoolOrNerdMode,			+coolOrNerdMode: CoolOrNerdMode,
	+keyserverUsername: string,			+keyserverUsername: string,
	+accountSelections: EthereumAccountSelections \| UsernameAccountSelections,			+accountSelections: EthereumAccountSelections \| UsernameAccountSelections,
	},			},
	};			};

				type AvatarData =
				\| {
				+needsUpload: true,
				+mediaSelection: NativeMediaSelection,
				+clientAvatar: ClientAvatar,
				}
				\| {
				+needsUpload: false,
				+updateUserAvatarRequest: UpdateUserAvatarRequest,
				+clientAvatar: ClientAvatar,
				};

	type Props = {			type Props = {
	+navigation: RegistrationNavigationProp<'AvatarSelection'>,			+navigation: RegistrationNavigationProp<'AvatarSelection'>,
	+route: NavigationRoute<'AvatarSelection'>,			+route: NavigationRoute<'AvatarSelection'>,
	};			};
	function AvatarSelection(props: Props): React.Node {			function AvatarSelection(props: Props): React.Node {
	const { userSelections } = props.route.params;			const { userSelections } = props.route.params;
	const { accountSelections } = userSelections;			const { accountSelections } = userSelections;
	const username =			const username =
	accountSelections.accountType === 'username'			accountSelections.accountType === 'username'
	? accountSelections.username			? accountSelections.username
	: accountSelections.address;			: accountSelections.address;

	const [avatarData] = React.useState();			const editUserAvatarContext = React.useContext(EditUserAvatarContext);
				invariant(editUserAvatarContext, 'editUserAvatarContext should be set');
				const { setRegistrationMode } = editUserAvatarContext;

				const [avatarData, setAvatarData] = React.useState<?AvatarData>();
				const setClientAvatarFromSelection = React.useCallback(
				(selection: UserAvatarSelection) => {
				if (selection.needsUpload) {
				setAvatarData({
				...selection,
				clientAvatar: {
				type: 'image',
				uri: selection.mediaSelection.uri,
				},
				});
				} else if (selection.updateUserAvatarRequest.type !== 'remove') {
				const clientRequest = selection.updateUserAvatarRequest;
				invariant(
				clientRequest.type !== 'image',
				'image avatars need to be uploaded',
				);
				setAvatarData({
				...selection,
				clientAvatar: clientRequest,
				});
				} else {
				setAvatarData(undefined);
				}
				},
				[],
				);

				React.useEffect(() => {
				setRegistrationMode({
				registrationMode: 'on',
				successCallback: setClientAvatarFromSelection,
				});
				return () => {
				setRegistrationMode({ registrationMode: 'off' });
				};
				}, [setRegistrationMode, setClientAvatarFromSelection]);

	const onProceed = React.useCallback(() => {}, []);			const onProceed = React.useCallback(() => {}, []);

	const clientAvatar = avatarData?.clientAvatar;			const clientAvatar = avatarData?.clientAvatar;
	const userInfoOverride = React.useMemo(			const userInfoOverride = React.useMemo(
	() => ({			() => ({
	username,			username,
	avatar: clientAvatar,			avatar: clientAvatar,
	▲ Show 20 Lines • Show All 49 Lines • Show Last 20 Lines