diff --git a/native/account/registration/avatar-selection.react.js b/native/account/registration/avatar-selection.react.js --- a/native/account/registration/avatar-selection.react.js +++ b/native/account/registration/avatar-selection.react.js @@ -1,5 +1,6 @@ // @flow +import { useFocusEffect } from '@react-navigation/native'; import invariant from 'invariant'; import * as React from 'react'; import { Text, View } from 'react-native'; @@ -21,7 +22,10 @@ type UserAvatarSelection, } from '../../avatars/edit-user-avatar-provider.react.js'; import EditUserAvatar from '../../avatars/edit-user-avatar.react.js'; -import type { NavigationRoute } from '../../navigation/route-names.js'; +import { + type NavigationRoute, + RegistrationTermsRouteName, +} from '../../navigation/route-names.js'; import { useStyles } from '../../themes/colors.js'; export type AvatarSelectionParams = { @@ -46,8 +50,7 @@ const registrationContext = React.useContext(RegistrationContext); invariant(registrationContext, 'registrationContext should be set'); - const { cachedSelections, setCachedSelections, register } = - registrationContext; + const { cachedSelections, setCachedSelections } = registrationContext; const editUserAvatarContext = React.useContext(EditUserAvatarContext); invariant(editUserAvatarContext, 'editUserAvatarContext should be set'); @@ -107,13 +110,7 @@ [setCachedSelections], ); - const [registrationInProgress, setRegistrationInProgress] = - React.useState(false); - - React.useEffect(() => { - if (registrationInProgress) { - return undefined; - } + const focusEffect = React.useCallback(() => { setRegistrationMode({ registrationMode: 'on', successCallback: setClientAvatarFromSelection, @@ -121,23 +118,20 @@ return () => { setRegistrationMode({ registrationMode: 'off' }); }; - }, [ - registrationInProgress, - setRegistrationMode, - setClientAvatarFromSelection, - ]); + }, [setRegistrationMode, setClientAvatarFromSelection]); + useFocusEffect(focusEffect); + const { navigate } = props.navigation; const onProceed = React.useCallback(async () => { - setRegistrationInProgress(true); - try { - await register({ - ...userSelections, - avatarData, - }); - } finally { - setRegistrationInProgress(false); - } - }, [register, userSelections, avatarData]); + const newUserSelections = { + ...userSelections, + avatarData, + }; + navigate<'RegistrationTerms'>({ + name: RegistrationTermsRouteName, + params: { userSelections: newUserSelections }, + }); + }, [userSelections, avatarData, navigate]); const clientAvatar = avatarData?.clientAvatar; const userInfoOverride = React.useMemo( @@ -157,7 +151,6 @@ @@ -165,11 +158,7 @@ - + ); diff --git a/native/account/registration/registration-terms.react.js b/native/account/registration/registration-terms.react.js --- a/native/account/registration/registration-terms.react.js +++ b/native/account/registration/registration-terms.react.js @@ -1,5 +1,6 @@ // @flow +import invariant from 'invariant'; import * as React from 'react'; import { Text } from 'react-native'; @@ -7,6 +8,7 @@ import RegistrationButton from './registration-button.react.js'; import RegistrationContainer from './registration-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 { CoolOrNerdMode, @@ -29,9 +31,23 @@ +navigation: RegistrationNavigationProp<'RegistrationTerms'>, +route: NavigationRoute<'RegistrationTerms'>, }; -// eslint-disable-next-line no-unused-vars function RegistrationTerms(props: Props): React.Node { - const onProceed = React.useCallback(() => {}, []); + const registrationContext = React.useContext(RegistrationContext); + invariant(registrationContext, 'registrationContext should be set'); + const { register } = registrationContext; + + const [registrationInProgress, setRegistrationInProgress] = + React.useState(false); + + const { userSelections } = props.route.params; + const onProceed = React.useCallback(async () => { + setRegistrationInProgress(true); + try { + await register(userSelections); + } finally { + setRegistrationInProgress(false); + } + }, [register, userSelections]); const styles = useStyles(unboundStyles); return ( @@ -43,7 +59,7 @@