diff --git a/native/profile/emoji-avatar-creation.react.js b/native/profile/emoji-avatar-creation.react.js
--- a/native/profile/emoji-avatar-creation.react.js
+++ b/native/profile/emoji-avatar-creation.react.js
@@ -1,18 +1,38 @@
// @flow
import * as React from 'react';
-import { View, Text, TouchableWithoutFeedback } from 'react-native';
+import {
+ View,
+ Text,
+ TouchableWithoutFeedback,
+ ActivityIndicator,
+ Alert,
+} from 'react-native';
import EmojiPicker from 'rn-emoji-keyboard';
+import {
+ updateUserAvatar,
+ 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';
+const loadingStatusSelector = createLoadingStatusSelector(
+ updateUserAvatarActionTypes,
+);
+
function EmojiAvatarCreation(): React.Node {
const savedEmojiAvatarFunc = useSelector(
savedEmojiAvatarSelectorForCurrentUser,
@@ -29,13 +49,45 @@
const styles = useStyles(unboundStyles);
+ const dispatchActionPromise = useDispatchActionPromise();
+ const callUpdateUserAvatar = useServerCall(updateUserAvatar);
+
+ const saveAvatarCallLoading = useSelector(
+ state => loadingStatusSelector(state) === 'loading',
+ );
+
const onPressEditEmoji = React.useCallback(() => {
setEmojiKeyboardOpen(true);
}, []);
const onPressSetAvatar = React.useCallback(() => {
- // TODO: handle saving avatar
- }, []);
+ const newEmojiAvatarRequest = {
+ type: 'emoji',
+ emoji: pendingEmoji,
+ 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]);
const onPressReset = React.useCallback(() => {
const resetEmojiAvatar = savedEmojiAvatarFunc();
@@ -62,13 +114,28 @@
[pendingColor, pendingEmoji],
);
+ const loadingContainer = React.useMemo(() => {
+ if (!saveAvatarCallLoading) {
+ return null;
+ }
+
+ return (
+
+
+
+ );
+ }, [saveAvatarCallLoading, styles.loadingContainer]);
+
return (
-
+
+
+ {loadingContainer}
+
Edit Emoji
@@ -82,10 +149,18 @@
-