diff --git a/native/components/emoji-avatar-creation.react.js b/native/components/emoji-avatar-creation.react.js --- a/native/components/emoji-avatar-creation.react.js +++ b/native/components/emoji-avatar-creation.react.js @@ -6,28 +6,20 @@ Text, TouchableWithoutFeedback, ActivityIndicator, - Alert, } from 'react-native'; import EmojiPicker from 'rn-emoji-keyboard'; -import { - updateUserAvatar, - updateUserAvatarActionTypes, -} from 'lib/actions/user-actions.js'; +import { updateUserAvatarActionTypes } from 'lib/actions/user-actions.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import { savedEmojiAvatarSelectorForCurrentUser } from 'lib/selectors/user-selectors.js'; import type { ClientEmojiAvatar } from 'lib/types/avatar-types.js'; -import { - useDispatchActionPromise, - useServerCall, -} from 'lib/utils/action-utils.js'; import Avatar from '../components/avatar.react.js'; import Button from '../components/button.react.js'; import ColorRows from '../components/color-rows.react.js'; -import { displayActionResultModal } from '../navigation/action-result-modal.js'; import { useSelector } from '../redux/redux-utils.js'; import { useStyles } from '../themes/colors.js'; +import { useSaveUserAvatar } from '../utils/avatar-utils.js'; const loadingStatusSelector = createLoadingStatusSelector( updateUserAvatarActionTypes, @@ -49,8 +41,7 @@ const styles = useStyles(unboundStyles); - const dispatchActionPromise = useDispatchActionPromise(); - const callUpdateUserAvatar = useServerCall(updateUserAvatar); + const saveUserAvatar = useSaveUserAvatar(); const saveAvatarCallLoading = useSelector( state => loadingStatusSelector(state) === 'loading', @@ -67,27 +58,8 @@ color: pendingColor, }; - const saveAvatarPromise = (async () => { - try { - const response = await callUpdateUserAvatar(newEmojiAvatarRequest); - displayActionResultModal('Avatar updated!'); - - return response; - } catch (e) { - Alert.alert( - 'Couldn’t save avatar', - 'Please try again later', - [{ text: 'OK' }], - { - cancelable: true, - }, - ); - throw e; - } - })(); - - dispatchActionPromise(updateUserAvatarActionTypes, saveAvatarPromise); - }, [callUpdateUserAvatar, dispatchActionPromise, pendingColor, pendingEmoji]); + saveUserAvatar(newEmojiAvatarRequest); + }, [pendingColor, pendingEmoji, saveUserAvatar]); const onPressReset = React.useCallback(() => { const resetEmojiAvatar = savedEmojiAvatarFunc(); diff --git a/native/utils/avatar-utils.js b/native/utils/avatar-utils.js --- a/native/utils/avatar-utils.js +++ b/native/utils/avatar-utils.js @@ -1,8 +1,20 @@ // @flow import * as React from 'react'; +import { Alert } from 'react-native'; + +import { + updateUserAvatar, + updateUserAvatarActionTypes, +} from 'lib/actions/user-actions.js'; +import type { ClientEmojiAvatar } from 'lib/types/avatar-types.js'; +import { + useServerCall, + useDispatchActionPromise, +} from 'lib/utils/action-utils.js'; import { FeatureFlagsContext } from '../components/feature-flags-provider.react.js'; +import { displayActionResultModal } from '../navigation/action-result-modal.js'; function useShouldRenderAvatars(): boolean { const { configuration: featureFlagConfig } = @@ -11,4 +23,37 @@ return !!featureFlagConfig['AVATARS_DISPLAY']; } -export { useShouldRenderAvatars }; +function useSaveUserAvatar(): ( + newEmojiAvatarRequest: ClientEmojiAvatar, +) => mixed { + const callUpdateUserAvatar = useServerCall(updateUserAvatar); + const dispatchActionPromise = useDispatchActionPromise(); + + return React.useCallback( + newEmojiAvatarRequest => { + const saveAvatarPromise = (async () => { + try { + const response = await callUpdateUserAvatar(newEmojiAvatarRequest); + displayActionResultModal('Avatar updated!'); + + return response; + } catch (e) { + Alert.alert( + 'Couldn’t save avatar', + 'Please try again later', + [{ text: 'OK' }], + { + cancelable: true, + }, + ); + throw e; + } + })(); + + dispatchActionPromise(updateUserAvatarActionTypes, saveAvatarPromise); + }, + [callUpdateUserAvatar, dispatchActionPromise], + ); +} + +export { useShouldRenderAvatars, useSaveUserAvatar };