Page MenuHomePhabricator
Files F3698073

D7359.diff
No OneTemporary
Actions

D7359.diff
View Options

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 (
+ <View style={styles.loadingContainer}>
+ <ActivityIndicator size="large" color="white" />
+ </View>
+ );
+ }, [saveAvatarCallLoading, styles.loadingContainer]);
+
return (
<View style={styles.container}>
<View style={styles.emojiAvatarCreationContainer}>
<View style={styles.stagedAvatarSection}>
<TouchableWithoutFeedback onPress={onPressEditEmoji}>
<View>
- <Avatar size="profile" avatarInfo={stagedAvatarInfo} />
+ <View>
+ <Avatar size="profile" avatarInfo={stagedAvatarInfo} />
+ {loadingContainer}
+ </View>
<Text style={styles.editEmojiText}>Edit Emoji</Text>
</View>
</TouchableWithoutFeedback>
@@ -82,10 +149,18 @@
</View>
</View>
<View style={styles.buttonsContainer}>
- <Button onPress={onPressSetAvatar} style={styles.saveButton}>
+ <Button
+ onPress={onPressSetAvatar}
+ style={styles.saveButton}
+ disabled={saveAvatarCallLoading}
+ >
<Text style={styles.saveButtonText}>Save Avatar</Text>
</Button>
- <Button onPress={onPressReset} style={styles.resetButton}>
+ <Button
+ onPress={onPressReset}
+ style={styles.resetButton}
+ disabled={saveAvatarCallLoading}
+ >
<Text style={styles.resetButtonText}>Reset</Text>
</Button>
</View>

File Metadata

Mime Type
text/plain
Expires
Wed, Jan 8, 2:19 PM (3 h, 35 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2818485
Default Alt Text
D7359.diff (4 KB)

Event Timeline