UserItem: Remove UserItemRaw hack

package.json

@@ -32,7 +32,7 @@
     "@react-navigation/native": "^5.7.6",
     "@react-navigation/stack": "^5.9.3",
     "@sentry/react-native": "^3.3.3",
-    "@zulip/shared": "^0.0.14",
+    "@zulip/shared": "0.0.16",
     "base-64": "^1.0.0",
     "blueimp-md5": "^2.10.0",
     "color": "^4.0.1",
@@ -51,7 +51,7 @@
     "lodash.isequal": "^4.4.0",
     "lodash.omit": "^4.5.0",
     "lodash.union": "^4.6.0",
-    "lodash.uniqby": "^4.4.0",
+    "lodash.uniq": "^4.5.0",
     "react": "17.0.2",
     "react-intl": "5.24.6",
     "react-native": "0.67.4",

src/api/modelTypes.js

@@ -85,7 +85,7 @@ export type CustomProfileField = {|
   +display_in_profile_summary?: true,
 |};
 
-export type ImageEmojiType = $ReadOnly<{|
+export type RealmEmoji = $ReadOnly<{|
   author?: $ReadOnly<{|
     email: string,
     full_name: string,
@@ -99,7 +99,16 @@ export type ImageEmojiType = $ReadOnly<{|
 |}>;
 
 export type RealmEmojiById = $ReadOnly<{|
-  [id: string]: ImageEmojiType,
+  [id: string]: RealmEmoji,
+|}>;
+
+export type ImageEmoji = {|
+  ...RealmEmoji,
+  +reaction_type: ReactionType, // eslint-disable-line no-use-before-define
+|};
+
+export type ImageEmojiById = $ReadOnly<{|
+  [id: string]: ImageEmoji,
 |}>;
 
 /**

src/autocomplete/AutocompleteView.js

@@ -2,7 +2,7 @@
 import React, { useCallback } from 'react';
 import type { Node } from 'react';
 
-import type { InputSelection } from '../types';
+import type { InputSelection, Narrow } from '../types';
 import getAutocompletedText from './getAutocompletedText';
 import getAutocompleteFilter from './getAutocompleteFilter';
 import EmojiAutocomplete from './EmojiAutocomplete';
@@ -20,6 +20,7 @@ type Props = $ReadOnly<{|
   isFocused: boolean,
   text: string,
   selection: InputSelection,
+  destinationNarrow: Narrow,
 
   /**
    * The callback that is called when the user taps on any of the suggested items.
@@ -33,7 +34,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default function AutocompleteView(props: Props): Node {
-  const { isFocused, text, onAutocomplete, selection } = props;
+  const { isFocused, text, onAutocomplete, selection, destinationNarrow } = props;
 
   const handleAutocomplete = useCallback(
     (autocomplete: string) => {
@@ -50,7 +51,13 @@ export default function AutocompleteView(props: Props): Node {
 
   return (
     <AnimatedScaleComponent visible={shouldShow}>
-      {shouldShow && <AutocompleteComponent filter={filter} onAutocomplete={handleAutocomplete} />}
+      {shouldShow && (
+        <AutocompleteComponent
+          filter={filter}
+          onAutocomplete={handleAutocomplete}
+          destinationNarrow={destinationNarrow}
+        />
+      )}
     </AnimatedScaleComponent>
   );
 }

src/autocomplete/EmojiAutocomplete.js

@@ -4,6 +4,7 @@ import React, { useCallback } from 'react';
 import type { Node } from 'react';
 import { FlatList } from 'react-native';
 
+import type { Narrow } from '../types';
 import Popup from '../common/Popup';
 import EmojiRow from '../emoji/EmojiRow';
 import { getFilteredEmojis } from '../emoji/data';
@@ -14,6 +15,7 @@ import { getRealm } from '../directSelectors';
 type Props = $ReadOnly<{|
   filter: string,
   onAutocomplete: (name: string) => void,
+  destinationNarrow?: Narrow,
 |}>;
 
 const MAX_CHOICES = 30;

src/autocomplete/PeopleAutocomplete.js

@@ -1,29 +1,37 @@
 /* @flow strict-local */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useContext } from 'react';
 import type { Node } from 'react';
 import { SectionList } from 'react-native';
 
-import type { UserGroup } from '../types';
+import type { UserOrBot, UserGroup, Narrow } from '../types';
 import { useSelector } from '../react-redux';
 import { getMutedUsers, getSortedUsers, getUserGroups } from '../selectors';
 import {
-  type AutocompleteOption,
   getAutocompleteSuggestion,
   getAutocompleteUserGroupSuggestions,
 } from '../users/userHelpers';
 import Popup from '../common/Popup';
-import { UserItemRaw } from '../users/UserItem';
+import UserItem from '../users/UserItem';
 import UserGroupItem from '../user-groups/UserGroupItem';
 import { getOwnUserId } from '../users/userSelectors';
+import WildcardMentionItem, {
+  getWildcardMentionsForQuery,
+  WildcardMentionType,
+} from './WildcardMentionItem';
+import { TranslationContext } from '../boot/TranslationProvider';
 
 type Props = $ReadOnly<{|
   filter: string,
+  destinationNarrow: Narrow,
   onAutocomplete: (name: string) => void,
 |}>;
 
 export default function PeopleAutocomplete(props: Props): Node {
-  const { filter, onAutocomplete } = props;
+  const { filter, destinationNarrow, onAutocomplete } = props;
+
+  const _ = useContext(TranslationContext);
+
   const mutedUsers = useSelector(getMutedUsers);
   const ownUserId = useSelector(getOwnUserId);
   const users = useSelector(getSortedUsers);
@@ -36,8 +44,15 @@ export default function PeopleAutocomplete(props: Props): Node {
     [onAutocomplete],
   );
 
+  const handleWildcardMentionAutocomplete = useCallback(
+    (type, serverCanonicalString) => {
+      onAutocomplete(`**${serverCanonicalString}**`);
+    },
+    [onAutocomplete],
+  );
+
   const handleUserItemAutocomplete = useCallback(
-    (user: AutocompleteOption): void => {
+    (user: UserOrBot): void => {
       // If another user with the same full name is found, we send the
       // user ID as well, to ensure the mentioned user is uniquely identified.
       if (users.find(x => x.full_name === user.full_name && x.user_id !== user.user_id)) {
@@ -52,6 +67,7 @@ export default function PeopleAutocomplete(props: Props): Node {
   );
 
   const filteredUserGroups = getAutocompleteUserGroupSuggestions(userGroups, filter);
+  const wildcardMentionsForQuery = getWildcardMentionsForQuery(filter, destinationNarrow, _);
   const filteredUsers = getAutocompleteSuggestion(users, filter, ownUserId, mutedUsers);
 
   if (filteredUserGroups.length + filteredUsers.length === 0) {
@@ -74,22 +90,29 @@ export default function PeopleAutocomplete(props: Props): Node {
         />
       ),
     }: Section<UserGroup>),
+    ({
+      data: wildcardMentionsForQuery,
+      renderItem: ({ item }) => (
+        <WildcardMentionItem
+          key={WildcardMentionType.getName(item)}
+          type={item}
+          destinationNarrow={destinationNarrow}
+          onPress={handleWildcardMentionAutocomplete}
+        />
+      ),
+    }: Section<WildcardMentionType>),
     ({
       data: filteredUsers,
       renderItem: ({ item }) => (
-        // "Raw" because some of our autocomplete suggestions are fake
-        // synthetic "users" to represent @all and @everyone.
-        // TODO display those in a UI that makes more sense for them,
-        //   and drop the fake "users" and use the normal UserItem.
-        <UserItemRaw
+        <UserItem
           key={item.user_id}
-          user={item}
+          userId={item.user_id}
           showEmail
           onPress={handleUserItemAutocomplete}
           size="medium"
         />
       ),
-    }: Section<AutocompleteOption>),
+    }: Section<UserOrBot>),
   ];
 
   return (

src/autocomplete/StreamAutocomplete.js

@@ -4,6 +4,7 @@ import React, { useCallback } from 'react';
 import type { Node } from 'react';
 import { FlatList } from 'react-native';
 
+import type { Narrow } from '../types';
 import { useSelector } from '../react-redux';
 import Popup from '../common/Popup';
 import { getSubscriptions } from '../directSelectors';
@@ -12,6 +13,7 @@ import StreamItem from '../streams/StreamItem';
 type Props = $ReadOnly<{|
   filter: string,
   onAutocomplete: (name: string) => void,
+  destinationNarrow?: Narrow,
 |}>;
 
 export default function StreamAutocomplete(props: Props): Node {