UserStatusScreen: Make status suggestions use new emoji-status feature!

When available, that is. Support was added in FL 86.

If emoji statuses are supported, we use the suggested emoji for the
emoji status, and the suggested text for the text status.

If emoji statuses aren't supported…we do end up just cutting the
emoji out of the status suggestion, which I guess is a small
downside. For these older servers, we could have kept up what we do
now: stick the status emoji at the start of the suggested text. But
I think achieving that has a higher complexity cost than it's worth.
I've never really used this UI, I'm not sure how common it is to do
so, and people are still free to depart from the suggested text,
including by adding emojis, by using the text input.

Author: chrisbobbe

src/user-statuses/UserStatusScreen.js

@@ -13,17 +13,37 @@ import { useSelector } from '../react-redux';
 import Input from '../common/Input';
 import EmojiInput from './EmojiInput';
 import type { Value as EmojiInputValue } from './EmojiInput';
-import { emojiTypeFromReactionType, reactionTypeFromEmojiType } from '../emoji/data';
+import { unicodeCodeByName } from '../emoji/codePointMap';
+import {
+  emojiTypeFromReactionType,
+  reactionTypeFromEmojiType,
+  parseUnicodeEmojiCode,
+} from '../emoji/data';
 import SelectableOptionRow from '../common/SelectableOptionRow';
 import Screen from '../common/Screen';
 import ZulipButton from '../common/ZulipButton';
 import { getZulipFeatureLevel, getAuth, getOwnUserId } from '../selectors';
 import { getUserStatus } from './userStatusesModel';
 import type { UserStatus } from '../api/modelTypes';
 import { Icon } from '../common/Icons';
-import statusSuggestions from './userStatusTextSuggestions';
 import * as api from '../api';
 
+type StatusSuggestion = [
+  $ReadOnly<{| emoji_name: string, emoji_code: string, reaction_type: 'unicode_emoji' |}>,
+  string,
+];
+
+const statusSuggestions: $ReadOnlyArray<StatusSuggestion> = [
+  ['calendar', 'In a meeting'],
+  ['bus', 'Commuting'],
+  ['sick', 'Out sick'],
+  ['palm_tree', 'Vacationing'],
+  ['house', 'Working remotely'],
+].map(([emoji_name, status_text]) => [
+  { emoji_name, emoji_code: unicodeCodeByName[emoji_name], reaction_type: 'unicode_emoji' },
+  status_text,
+]);
+
 const styles = createStyleSheet({
   inputRow: {
     flexDirection: 'row',
@@ -152,16 +172,24 @@ export default function UserStatusScreen(props: Props): Node {
       <FlatList
         data={statusSuggestions}
         keyboardShouldPersistTaps="always"
-        keyExtractor={item => item}
-        renderItem={({ item: text, index }) => {
+        keyExtractor={(item, index) => index.toString() /* list is constant; index OK */}
+        renderItem={({ item: [emoji, text], index }) => {
           const translatedText = _(text);
           return (
             <SelectableOptionRow
-              itemKey={text}
-              title={translatedText}
-              selected={translatedText === statusTextFromInputValue(textInputValue)}
+              itemKey={index}
+              title={
+                serverSupportsEmojiStatus
+                  ? `${parseUnicodeEmojiCode(emoji.emoji_code)} ${translatedText}`
+                  : translatedText
+              }
+              selected={
+                translatedText === statusTextFromInputValue(textInputValue)
+                && isEqual(emoji, statusEmojiFromInputValue(emojiInputValue))
+              }
               onRequestSelectionChange={() => {
                 setTextInputValue(translatedText);
+                setEmojiInputValue(inputValueFromStatusEmoji(emoji));
               }}
             />
           );

src/user-statuses/userStatusTextSuggestions.js

@@ -274,11 +274,11 @@
   "Couldn’t load information about {fullName}": "Couldn’t load information about {fullName}",
   "What’s your status?": "What’s your status?",
   "Click to join video call": "Click to join video call",
-  "📅 In a meeting": "📅 In a meeting",
-  "🚌 Commuting": "🚌 Commuting",
-  "🤒 Out sick": "🤒 Out sick",
-  "🌴 Vacationing": "🌴 Vacationing",
-  "🏠 Working remotely": "🏠 Working remotely",
+  "In a meeting": "In a meeting",
+  "Commuting": "Commuting",
+  "Out sick": "Out sick",
+  "Vacationing": "Vacationing",
+  "Working remotely": "Working remotely",
   "This message was hidden because it is from a user you have muted. Long-press to view.": "This message was hidden because it is from a user you have muted. Long-press to view.",
   "Signed out": "Signed out",
   "Remove account?": "Remove account?",