fixed types

app/soapbox/actions/compose.ts

@@ -4,6 +4,7 @@ import { defineMessages, IntlShape } from 'react-intl';
 
 import snackbar from 'soapbox/actions/snackbar';
 import api from 'soapbox/api';
+import { isNativeEmoji } from 'soapbox/features/emoji';
 import emojiSearch from 'soapbox/features/emoji/search';
 import { tagHistory } from 'soapbox/settings';
 import { isLoggedIn } from 'soapbox/utils/auth';
@@ -526,7 +527,7 @@ const selectComposeSuggestion = (position: number, token: string | null, suggest
     let completion, startPosition;
 
     if (typeof suggestion === 'object' && suggestion.id) {
-      completion    = suggestion.native || suggestion.colons;
+      completion    = isNativeEmoji(suggestion) ? suggestion.native : suggestion.colons;
       startPosition = position - 1;
 
       dispatch(useEmoji(suggestion));

app/soapbox/components/autosuggest_emoji.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 
-import type { Emoji } from 'soapbox/features/emoji';
+import { isCustomEmoji, isNativeEmoji } from 'soapbox/features/emoji';
 import unicodeMapping from 'soapbox/features/emoji/mapping';
 import { joinPublicPath } from 'soapbox/utils/static';
 
+import type { Emoji } from 'soapbox/features/emoji';
+
 interface UnicodeMapping {
   filename: string,
 }
@@ -13,11 +15,12 @@ interface IAutosuggestEmoji {
 }
 
 const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {
-  let url;
+  let url, alt;
 
-  if (emoji.custom) {
+  if (isCustomEmoji(emoji)) {
     url = emoji.imageUrl;
-  } else {
+    alt = emoji.colons;
+  } else if (isNativeEmoji(emoji)) {
     const mapping = unicodeMapping[emoji.native] || unicodeMapping[emoji.native.replace(/\uFE0F$/, '')];
 
     if (!mapping) {
@@ -25,6 +28,9 @@ const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {
     }
 
     url = joinPublicPath(`packs/emoji/${mapping.unified}.svg`);
+    alt = emoji.native;
+  } else {
+    return <div />
   }
 
   return (
@@ -32,7 +38,7 @@ const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {
       <img
         className='emojione'
         src={url}
-        alt={emoji.native || emoji.colons}
+        alt={alt}
       />
 
       {emoji.colons}

app/soapbox/features/emoji/components/emoji_picker_dropdown.tsx

@@ -74,11 +74,6 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ custom_emojis, fr
   };
 
   const handlePick = (emoji: Emoji) => {
-    // TODO: remove me
-    if (!emoji.native) {
-      emoji.native = emoji.shortcodes;
-    }
-
     setVisible(false);
     onPickEmoji(emoji);
   };

app/soapbox/features/emoji/index.ts

@@ -5,17 +5,33 @@ import { parseDocument } from 'htmlparser2';
 import unicodeMapping from './mapping';
 
 import type { Node as CheerioNode } from 'cheerio';
-import type { Emoji as EmojiMart, CustomEmoji } from 'emoji-mart';
+import type { Emoji as EmojiMart, CustomEmoji as EmojiMartCustom } from 'emoji-mart';
 
-// export interface Emoji {
-//   id: string,
-//   custom: boolean,
-//   imageUrl: string,
-//   native: string,
-//   colons: string,
-// }
+export interface Emoji {
+  id: string,
+  colons: string,
+  custom?: boolean,
+}
 
-export type Emoji = any;
+export interface CustomEmoji extends Emoji {
+  custom: true,
+  imageUrl: string, 
+}
+
+export interface NativeEmoji extends Emoji {
+  unified: string,
+  native: string,
+}
+
+export function isCustomEmoji(emoji: Emoji): emoji is CustomEmoji {
+  return (emoji as CustomEmoji).imageUrl !== undefined;
+}
+
+export function isNativeEmoji(emoji: Emoji): emoji is NativeEmoji {
+  return (emoji as NativeEmoji).native !== undefined;
+}
+
+// export type Emoji = any;
 
 const isAlphaNumeric = (c: string) => {
   const code = c.charCodeAt(0);
@@ -150,7 +166,7 @@ const emojify = (str: string, customEmojis = {}) => {
 export default emojify;
 
 export const buildCustomEmojis = (customEmojis: any) => {
-  const emojis: EmojiMart<CustomEmoji>[] = [];
+  const emojis: EmojiMart<EmojiMartCustom>[] = [];
 
   customEmojis.forEach((emoji: any) => {
     const shortcode = emoji.get('shortcode');

app/soapbox/features/emoji/search.ts

@@ -30,21 +30,20 @@ const search = (str: string, options: searchOptions, custom_emojis: any) => {
     .flatMap(id => {
       if (Number.isInteger(id)) {
         const { shortcode, static_url } = custom_emojis.get(id).toJS();
+
         return {
           id: shortcode,
           colons: ':' + shortcode + ':',
-          emoticons: [],
           custom: true,
           imageUrl: static_url,
         };
       }
 
-      const { name, skins } = data.emojis[id];
+      const { skins } = data.emojis[id];
 
       return {
-        id: name,
-        colons: ':' + name + ':',
-        emoticons: [],
+        id: id as string,
+        colons: ':' + id + ':',
         unified: skins[0].unified,
         native: skins[0].native,
       };

app/soapbox/reducers/compose.ts

@@ -1,6 +1,7 @@
 import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet, Record as ImmutableRecord, fromJS } from 'immutable';
 import { v4 as uuid } from 'uuid';
 
+import { isNativeEmoji } from 'soapbox/features/emoji';
 import { tagHistory } from 'soapbox/settings';
 import { PLEROMA } from 'soapbox/utils/features';
 import { hasIntegerMediaIds } from 'soapbox/utils/status';
@@ -220,7 +221,8 @@ const updateSuggestionTags = (state: State, token: string) => {
 
 const insertEmoji = (state: State, position: number, emojiData: Emoji, needsSpace: boolean) => {
   const oldText = state.text;
-  const emoji = needsSpace ? ' ' + emojiData.native : emojiData.native;
+  const emojiText = isNativeEmoji(emojiData) ? emojiData.native : emojiData.colons;
+  const emoji = needsSpace ? ' ' + emojiText : emojiText;
 
   return state.merge({
     text: `${oldText.slice(0, position)}${emoji} ${oldText.slice(position)}`,