diff --git a/native/avatars/edit-user-avatar-provider.react.js b/native/avatars/edit-user-avatar-provider.react.js --- a/native/avatars/edit-user-avatar-provider.react.js +++ b/native/avatars/edit-user-avatar-provider.react.js @@ -36,7 +36,7 @@ +updateImageUserAvatar: (selection: NativeMediaSelection) => Promise, +setUserAvatar: (avatarRequest: UpdateUserAvatarRequest) => Promise, +setRegistrationMode: (registrationMode: RegistrationMode) => void, - +registrationModeEnabled: boolean, + +getRegistrationModeEnabled: () => boolean, }; const EditUserAvatarContext: React.Context = @@ -60,8 +60,8 @@ function EditUserAvatarProvider(props: Props): React.Node { const { children } = props; - const [registrationMode, setRegistrationMode] = - React.useState(registrationModeOff); + const registrationModeRef = + React.useRef(registrationModeOff); const dispatchActionPromise = useDispatchActionPromise(); const updateUserAvatarCall = useServerCall(updateUserAvatar); @@ -83,8 +83,8 @@ const updateImageUserAvatar = React.useCallback( async (selection: NativeMediaSelection) => { - if (registrationMode.registrationMode === 'on') { - registrationMode.successCallback({ + if (registrationModeRef.current.registrationMode === 'on') { + registrationModeRef.current.successCallback({ needsUpload: true, mediaSelection: selection, }); @@ -108,12 +108,7 @@ dispatchActionPromise(updateUserAvatarActionTypes, promise); await promise; }, - [ - registrationMode, - uploadSelectedMedia, - updateUserAvatarCall, - dispatchActionPromise, - ], + [uploadSelectedMedia, updateUserAvatarCall, dispatchActionPromise], ); const selectFromGalleryAndUpdateUserAvatar = React.useCallback(async () => { @@ -126,8 +121,9 @@ const setUserAvatar = React.useCallback( async (request: UpdateUserAvatarRequest) => { - if (registrationMode.registrationMode === 'on') { - registrationMode.successCallback({ + const regMode = registrationModeRef.current; + if (regMode.registrationMode === 'on') { + regMode.successCallback({ needsUpload: false, updateUserAvatarRequest: request, }); @@ -145,10 +141,17 @@ dispatchActionPromise(updateUserAvatarActionTypes, promise); await promise; }, - [registrationMode, updateUserAvatarCall, dispatchActionPromise], + [updateUserAvatarCall, dispatchActionPromise], + ); + + const setRegistrationMode = React.useCallback((mode: RegistrationMode) => { + registrationModeRef.current = mode; + }, []); + const getRegistrationModeEnabled = React.useCallback( + () => registrationModeRef.current.registrationMode === 'on', + [], ); - const registrationModeEnabled = registrationMode.registrationMode === 'on'; const context = React.useMemo( () => ({ userAvatarSaveInProgress, @@ -156,7 +159,7 @@ updateImageUserAvatar, setUserAvatar, setRegistrationMode, - registrationModeEnabled, + getRegistrationModeEnabled, }), [ userAvatarSaveInProgress, @@ -164,7 +167,7 @@ updateImageUserAvatar, setUserAvatar, setRegistrationMode, - registrationModeEnabled, + getRegistrationModeEnabled, ], ); diff --git a/native/avatars/edit-user-avatar.react.js b/native/avatars/edit-user-avatar.react.js --- a/native/avatars/edit-user-avatar.react.js +++ b/native/avatars/edit-user-avatar.react.js @@ -36,7 +36,7 @@ userAvatarSaveInProgress, selectFromGalleryAndUpdateUserAvatar, setUserAvatar, - registrationModeEnabled, + getRegistrationModeEnabled, } = editUserAvatarContext; const currentUserInfo = useSelector(state => state.currentUserInfo); @@ -54,7 +54,7 @@ const usernameOrEthAddress = userInfo?.username; const navigateToEmojiSelection = React.useCallback(() => { - if (!registrationModeEnabled) { + if (!getRegistrationModeEnabled()) { navigate(EmojiUserAvatarCreationRouteName); return; } @@ -62,15 +62,15 @@ name: EmojiAvatarSelectionRouteName, params: { usernameOrEthAddress }, }); - }, [navigate, registrationModeEnabled, usernameOrEthAddress]); + }, [navigate, getRegistrationModeEnabled, usernameOrEthAddress]); const navigateToCamera = React.useCallback(() => { navigate( - registrationModeEnabled + getRegistrationModeEnabled() ? RegistrationUserAvatarCameraModalRouteName : UserAvatarCameraModalRouteName, ); - }, [navigate, registrationModeEnabled]); + }, [navigate, getRegistrationModeEnabled]); const setENSUserAvatar = React.useCallback(() => { setUserAvatar({ type: 'ens' });