user-status: Add UI for setting emoji status

src/account-info/AccountDetails.js

@@ -3,6 +3,8 @@ import React from 'react';
 import type { Node } from 'react';
 import { View } from 'react-native';
 
+import Emoji from '../emoji/Emoji';
+import { emojiTypeFromReactionType } from '../emoji/data';
 import type { UserOrBot } from '../types';
 import styles, { createStyleSheet } from '../styles';
 import { useSelector } from '../react-redux';
@@ -21,6 +23,7 @@ const componentStyles = createStyleSheet({
   },
   statusWrapper: {
     justifyContent: 'center',
+    alignItems: 'center',
     flexDirection: 'row',
   },
   presenceStatusIndicator: {
@@ -42,6 +45,9 @@ export default function AccountDetails(props: Props): Node {
 
   const ownUser = useSelector(getOwnUser);
   const userStatusText = useSelector(state => getUserStatus(state, props.user.user_id).status_text);
+  const userStatusEmoji = useSelector(
+    state => getUserStatus(state, props.user.user_id).status_emoji,
+  );
 
   const isSelf = user.user_id === ownUser.user_id;
 
@@ -70,9 +76,22 @@ export default function AccountDetails(props: Props): Node {
         />
         <ZulipText style={[styles.largerText, styles.halfMarginRight]} text={user.full_name} />
       </View>
-      {userStatusText !== null && (
-        <ZulipText style={[styles.largerText, componentStyles.statusText]} text={userStatusText} />
-      )}
+      <View style={componentStyles.statusWrapper}>
+        {userStatusEmoji && (
+          <Emoji
+            code={userStatusEmoji.emoji_code}
+            type={emojiTypeFromReactionType(userStatusEmoji.reaction_type)}
+            size={24}
+          />
+        )}
+        {userStatusEmoji && userStatusText !== null && <View style={{ width: 2 }} />}
+        {userStatusText !== null && (
+          <ZulipText
+            style={[styles.largerText, componentStyles.statusText]}
+            text={userStatusText}
+          />
+        )}
+      </View>
       {!isSelf && (
         <View>
           <ActivityText style={styles.largerText} user={user} />

src/action-sheets/index.js

@@ -41,6 +41,7 @@ import * as logging from '../utils/logging';
 import { getUnreadCountForTopic } from '../unread/unreadModel';
 import getIsNotificationEnabled from '../streams/getIsNotificationEnabled';
 import { getStreamTopicUrl, getStreamUrl } from '../utils/internalLinks';
+import { reactionTypeFromEmojiType } from '../emoji/data';
 
 // TODO really this belongs in a libdef.
 export type ShowActionSheetWithOptions = (
@@ -343,8 +344,17 @@ const shareMessage = {
 const addReaction = {
   title: 'Add a reaction',
   errorMessage: 'Failed to add reaction',
-  action: ({ message }) => {
-    NavigationService.dispatch(navigateToEmojiPicker(message.id));
+  action: ({ auth, message, _ }) => {
+    NavigationService.dispatch(
+      navigateToEmojiPicker(({ code, name, type }) => {
+        api
+          .emojiReactionAdd(auth, message.id, reactionTypeFromEmojiType(type, name), code, name)
+          .catch(err => {
+            logging.error('Error adding reaction emoji', err);
+            showToast(_('Failed to add reaction'));
+          });
+      }),
+    );
   },
 };
 

src/emoji/Emoji.js

@@ -1,5 +1,5 @@
 /* @flow strict-local */
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { Node } from 'react';
 import { Image } from 'react-native';
 import { createIconSet } from 'react-native-vector-icons';
@@ -18,19 +18,20 @@ const UnicodeEmoji = createIconSet(codeToEmojiMap);
 type Props = $ReadOnly<{|
   type: EmojiType,
   code: string,
+  size?: number,
 |}>;
 
-const componentStyles = createStyleSheet({
-  image: { width: 20, height: 20 },
-});
-
 export default function Emoji(props: Props): Node {
-  const { code } = props;
+  const { code, size = 20 } = props;
   const imageEmoji = useSelector(state =>
     props.type === 'image' ? getAllImageEmojiByCode(state)[props.code] : undefined,
   );
+  const componentStyles = useMemo(
+    () => createStyleSheet({ image: { width: size, height: size } }),
+    [size],
+  );
   if (imageEmoji) {
     return <Image style={componentStyles.image} source={{ uri: imageEmoji.source_url }} />;
   }
-  return <UnicodeEmoji name={code} size={20} />;
+  return <UnicodeEmoji name={code} size={size} />;
 }

src/emoji/EmojiPickerScreen.js

@@ -1,54 +1,63 @@
 /* @flow strict-local */
 
-import React, { useState, useCallback, useContext } from 'react';
+import React, { useState, useCallback } from 'react';
 import type { Node } from 'react';
-import { FlatList } from 'react-native';
+import { FlatList, LogBox } from 'react-native';
 
-import { TranslationContext } from '../boot/TranslationProvider';
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
-import * as NavigationService from '../nav/NavigationService';
-import * as api from '../api';
 import Screen from '../common/Screen';
 import EmojiRow from './EmojiRow';
-import { getFilteredEmojis, reactionTypeFromEmojiType } from './data';
+import { getFilteredEmojis } from './data';
+import { getActiveImageEmojiByName } from '../selectors';
+import type { EmojiType } from '../types';
 import { useSelector } from '../react-redux';
-import { getAuth, getActiveImageEmojiByName } from '../selectors';
-import { navigateBack } from '../nav/navActions';
-import * as logging from '../utils/logging';
-import { showToast } from '../utils/info';
 
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'emoji-picker'>,
-  route: RouteProp<'emoji-picker', {| messageId: number |}>,
+  route: RouteProp<
+    'emoji-picker',
+    {|
+      // This param is a function, so React Nav is right to point out that
+      // it isn't serializable. But this is fine as long as we don't try to
+      // persist navigation state for this screen or set up deep linking to
+      // it, hence the LogBox suppression below.
+      //
+      // React Navigation doesn't offer a more sensible way to do have us
+      // pass the emoji data to the calling screen. …We could store the
+      // emoji data as a route param on the calling screen, or in Redux. But
+      // from this screen's perspective, that's basically just setting a
+      // global variable. Better to offer this explicit, side-effect-free
+      // way for the data to flow where it should, when it should.
+      onPressEmoji: ({| +type: EmojiType, +code: string, +name: string |}) => void,
+    |},
+  >,
 |}>;
 
-export default function EmojiPickerScreen(props: Props): Node {
-  const { route } = props;
-  const { messageId } = route.params;
+// React Navigation would give us a console warning about non-serializable
+// route params. For more about the warning, see
+//   https://reactnavigation.org/docs/5.x/troubleshooting/#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state
+// See comment on this param, above.
+LogBox.ignoreLogs([/emoji-picker > params\.onPressEmoji \(Function\)/]);
 
-  const _ = useContext(TranslationContext);
+export default function EmojiPickerScreen(props: Props): Node {
+  const { navigation, route } = props;
+  const { onPressEmoji } = route.params;
 
   const activeImageEmojiByName = useSelector(getActiveImageEmojiByName);
-  const auth = useSelector(getAuth);
 
   const [filter, setFilter] = useState<string>('');
 
   const handleInputChange = useCallback((text: string) => {
     setFilter(text.toLowerCase());
   }, []);
 
-  const addReaction = useCallback(
-    ({ type, code, name }) => {
-      api
-        .emojiReactionAdd(auth, messageId, reactionTypeFromEmojiType(type, name), code, name)
-        .catch(err => {
-          logging.error('Error adding reaction emoji', err);
-          showToast(_('Failed to add reaction'));
-        });
-      NavigationService.dispatch(navigateBack());
+  const handlePressEmoji = useCallback(
+    (...args) => {
+      onPressEmoji(...args);
+      navigation.goBack();
     },
-    [auth, messageId, _],
+    [onPressEmoji, navigation],
   );
 
   const emojiNames = getFilteredEmojis(filter, activeImageEmojiByName);
@@ -65,7 +74,7 @@ export default function EmojiPickerScreen(props: Props): Node {
             type={item.emoji_type}
             code={item.code}
             name={item.name}
-            onPress={addReaction}
+            onPress={handlePressEmoji}
           />
         )}
       />

src/nav/navActions.js

@@ -7,7 +7,7 @@ import {
 } from '@react-navigation/native';
 
 import * as NavigationService from './NavigationService';
-import type { Message, Narrow, UserId } from '../types';
+import type { Message, Narrow, UserId, EmojiType } from '../types';
 import type { PmKeyRecipients } from '../utils/recipient';
 import type { SharedData } from '../sharing/types';
 import type { ApiResponseServerSettings } from '../api/settings/getServerSettings';
@@ -52,8 +52,9 @@ export const navigateToUsersScreen = (): GenericNavigationAction => StackActions
 
 export const navigateToSearch = (): GenericNavigationAction => StackActions.push('search-messages');
 
-export const navigateToEmojiPicker = (messageId: number): GenericNavigationAction =>
-  StackActions.push('emoji-picker', { messageId });
+export const navigateToEmojiPicker = (
+  onPressEmoji: ({| +type: EmojiType, +code: string, +name: string |}) => void,
+): GenericNavigationAction => StackActions.push('emoji-picker', { onPressEmoji });
 
 export const navigateToAuth = (
   serverSettings: ApiResponseServerSettings,

src/user-statuses/EmojiInput.js

@@ -0,0 +1,89 @@
+/* @flow strict-local */
+import React, { useContext, useCallback, useMemo } from 'react';
+import type { Node } from 'react';
+import { Platform } from 'react-native';
+import type { AppNavigationProp } from '../nav/AppNavigator';
+
+import { ThemeContext } from '../styles/theme';
+import Touchable from '../common/Touchable';
+import Emoji from '../emoji/Emoji';
+import { Icon } from '../common/Icons';
+import type { EmojiType } from '../types';
+import { createStyleSheet, BORDER_COLOR } from '../styles';
+
+export type Value = null | {| +type: EmojiType, +code: string, +name: string |};
+
+export type Props = $ReadOnly<{|
+  value: Value,
+  onChangeValue: Value => void,
+
+  /**
+   * Component must be under the stack nav that has the emoji-picker screen
+   *
+   * Pass this down from props or `useNavigation`.
+   */
+  navigation: AppNavigationProp<>,
+
+  /**
+   * Give appropriate right margin
+   */
+  rightMargin?: true,
+|}>;
+
+/**
+ * A controlled input component to let the user choose an emoji.
+ *
+ * When pressed, opens the emoji-picker screen, and populates with the emoji
+ * chosen by the user, if any.
+ *
+ * Designed for harmony with our Input component. If changing the appearance
+ * of this or that component, we should try to keep that harmony.
+ */
+export default function EmojiInput(props: Props): Node {
+  const { value, onChangeValue, navigation, rightMargin } = props;
+
+  const { color } = useContext(ThemeContext);
+
+  const handlePress = useCallback(() => {
+    navigation.push('emoji-picker', { onPressEmoji: onChangeValue });
+  }, [navigation, onChangeValue]);
+
+  const styles = useMemo(
+    () =>
+      createStyleSheet({
+        touchable: {
+          // Min touch-target size
+          minWidth: 48,
+          minHeight: 48,
+
+          alignItems: 'center',
+          justifyContent: 'center',
+
+          marginRight: rightMargin ? 4 : undefined,
+
+          // For harmony with the `Input` component, which differs between
+          // platforms because of platform conventions. Border on iOS, no
+          // border on Android.
+          ...(Platform.OS === 'ios'
+            ? {
+                borderWidth: 1,
+                borderColor: BORDER_COLOR,
+                borderRadius: 2,
+                padding: 8,
+              }
+            : Object.freeze({})),
+        },
+      }),
+    [rightMargin],
+  );
+
+  return (
+    <Touchable style={styles.touchable} onPress={handlePress}>
+      {value ? (
+        <Emoji code={value.code} type={value.type} size={24} />
+      ) : (
+        <Icon color={color} size={24} name="smile" />
+      )}
+    </Touchable>
+  );
+}