emoji types: Split ImageEmojiType into RealmEmoji and ImageEmoji

With ImageEmoji being the same as RealmEmoji except for an added
reaction_type property. See discussion:
  zulip#5508 (comment)

Author: chrisbobbe

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/emoji/__tests__/emojiSelectors-test.js

@@ -33,14 +33,17 @@ describe('getActiveImageEmojiById', () => {
 
     const expectedResult = {
       1: {
+        reaction_type: 'realm_emoji',
         deactivated: false,
         source_url: 'https://example.com/static/user_upload/smile.png',
       },
       2: {
+        reaction_type: 'realm_emoji',
         deactivated: false,
         source_url: 'https://example.com/static/user_upload/laugh.png',
       },
       zulip: {
+        reaction_type: 'zulip_extra_emoji',
         deactivated: false,
         name: 'zulip',
         code: 'zulip',
@@ -69,9 +72,16 @@ describe('getAllImageEmojiById', () => {
     };
 
     const expectedResult = {
-      '1': { source_url: 'https://example.com/static/user_upload/smile.png' },
-      '2': { source_url: 'https://example.com/static/user_upload/laugh.png' },
+      '1': {
+        reaction_type: 'realm_emoji',
+        source_url: 'https://example.com/static/user_upload/smile.png',
+      },
+      '2': {
+        reaction_type: 'realm_emoji',
+        source_url: 'https://example.com/static/user_upload/laugh.png',
+      },
       zulip: {
+        reaction_type: 'zulip_extra_emoji',
         deactivated: false,
         name: 'zulip',
         code: 'zulip',
@@ -105,16 +115,19 @@ describe('getAllImageEmojiByCode', () => {
 
     const expectedResult = {
       1: {
+        reaction_type: 'realm_emoji',
         code: '1',
         name: 'smile',
         source_url: 'https://example.com/static/user_upload/smile.png',
       },
       2: {
+        reaction_type: 'realm_emoji',
         code: '2',
         name: 'laugh',
         source_url: 'https://example.com/static/user_upload/laugh.png',
       },
       zulip: {
+        reaction_type: 'zulip_extra_emoji',
         deactivated: false,
         name: 'zulip',
         code: 'zulip',

src/emoji/emojiSelectors.js

@@ -1,32 +1,39 @@
 /* @flow strict-local */
 import { createSelector } from 'reselect';
-import type { Selector, RealmEmojiById, ImageEmojiType, EmojiForShared } from '../types';
+import type { Selector, ImageEmoji, ImageEmojiById, EmojiForShared } from '../types';
 import { getRawRealmEmoji } from '../directSelectors';
 import { getIdentity } from '../account/accountsSelectors';
 import zulipExtraEmojiMap from './zulipExtraEmojiMap';
 import { objectFromEntries } from '../jsBackport';
+import type { ReadWrite } from '../generics';
+import { objectEntries } from '../flowPonyfill';
 
-export const getAllImageEmojiById: Selector<RealmEmojiById> = createSelector(
+export const getAllImageEmojiById: Selector<ImageEmojiById> = createSelector(
   getIdentity,
   getRawRealmEmoji,
   (identity, realmEmoji) => {
-    const result: {| [string]: ImageEmojiType |} = {};
-    [realmEmoji, zulipExtraEmojiMap].forEach(emojis => {
-      Object.keys(emojis).forEach(id => {
-        result[id] = {
-          ...emojis[id],
-          source_url: new URL(emojis[id].source_url, identity.realm).toString(),
-        };
-      });
+    const result: ReadWrite<ImageEmojiById> = {};
+    objectEntries(realmEmoji).forEach(([id, emoji]) => {
+      result[id] = {
+        ...emoji,
+        reaction_type: 'realm_emoji',
+        source_url: new URL(emoji.source_url, identity.realm).toString(),
+      };
+    });
+    objectEntries(zulipExtraEmojiMap).forEach(([id, emoji]) => {
+      result[id] = {
+        ...emoji,
+        source_url: new URL(emoji.source_url, identity.realm).toString(),
+      };
     });
     return result;
   },
 );
 
-export const getActiveImageEmojiById: Selector<RealmEmojiById> = createSelector(
+export const getActiveImageEmojiById: Selector<ImageEmojiById> = createSelector(
   getAllImageEmojiById,
   emojis => {
-    const result: {| [string]: ImageEmojiType |} = {};
+    const result: ReadWrite<ImageEmojiById> = {};
     Object.keys(emojis).forEach(id => {
       if (!emojis[id].deactivated) {
         result[id] = emojis[id];
@@ -37,7 +44,7 @@ export const getActiveImageEmojiById: Selector<RealmEmojiById> = createSelector(
 );
 
 export const getAllImageEmojiByCode: Selector<{|
-  [string]: ImageEmojiType,
+  [string]: ImageEmoji,
 |}> = createSelector(getAllImageEmojiById, emojis =>
   objectFromEntries(Object.keys(emojis).map(id => [emojis[id].code, emojis[id]])),
 );

src/emoji/zulipExtraEmojiMap.js

@@ -1,13 +1,14 @@
 /* @flow strict-local */
-import type { ImageEmojiType } from '../types';
+import type { ImageEmoji } from '../types';
 
 /**
  * Make this to ressemble with realm emoji
  * so that both emoji type can be handled in similiar way
  * thus id has no meaning here
  */
-const zulipExtraEmojiMap: {| [id: string]: ImageEmojiType |} = {
+const zulipExtraEmojiMap: {| [id: string]: ImageEmoji |} = {
   zulip: {
+    reaction_type: 'zulip_extra_emoji',
     deactivated: false,
     code: 'zulip',
     name: 'zulip',

src/webview/backgroundData.js

@@ -6,7 +6,7 @@ import type {
   Debug,
   FlagsState,
   GlobalSettingsState,
-  ImageEmojiType,
+  ImageEmoji,
   MuteState,
   MutedUsersState,
   PerAccountState,
@@ -50,7 +50,7 @@ import type { ServerEmojiData } from '../api/modelTypes';
  */
 export type BackgroundData = $ReadOnly<{|
   alertWords: AlertWordsState,
-  allImageEmojiById: $ReadOnly<{| [id: string]: ImageEmojiType |}>,
+  allImageEmojiById: $ReadOnly<{| [id: string]: ImageEmoji |}>,
   auth: Auth,
   debug: Debug,
   flags: FlagsState,