From f08d43ecb37f284921298787d2fd1901b67a977d Mon Sep 17 00:00:00 2001
From: ewwwwwwww <ew@cock.lu>
Date: Mon, 4 Jul 2022 20:45:01 -0700
Subject: [PATCH] small fixes

---
 .../components/emoji_picker_dropdown.tsx      | 23 ++++++++++++++++---
 app/soapbox/features/emoji/index.ts           | 14 +++++++++++
 app/soapbox/reducers/compose.ts               |  1 +
 types/emoji-mart/index.d.ts                   | 13 ++++++++++-
 4 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/emoji/components/emoji_picker_dropdown.tsx b/app/soapbox/features/emoji/components/emoji_picker_dropdown.tsx
index d91356231..489f845c6 100644
--- a/app/soapbox/features/emoji/components/emoji_picker_dropdown.tsx
+++ b/app/soapbox/features/emoji/components/emoji_picker_dropdown.tsx
@@ -13,7 +13,8 @@ import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components'
 // import { Picker as EmojiPicker } from '../../emoji/emoji_picker';
 
 import type { List } from 'immutable';
-import type { Emoji } from 'soapbox/features/emoji';
+import type { Emoji, CustomEmoji, NativeEmoji } from 'soapbox/features/emoji';
+import type { EmojiPick } from 'emoji-mart';
 
 let EmojiPicker: any; // load asynchronously
 
@@ -73,9 +74,25 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ custom_emojis, fr
     }
   };
 
-  const handlePick = (emoji: Emoji) => {
+  const handlePick = (emoji: EmojiPick) => {
     setVisible(false);
-    onPickEmoji(emoji);
+
+    if (emoji.native) {
+      onPickEmoji({
+        id: emoji.id,
+        colons: emoji.shortcodes,
+        custom: false,
+        native: emoji.native,
+        unified: emoji.unified,
+      } as NativeEmoji);
+    } else {
+      onPickEmoji({
+        id: emoji.id,
+        colons: emoji.shortcodes,
+        custom: true,
+        imageUrl: emoji.src,
+      } as CustomEmoji);
+    }
   };
 
   const getI18n = () => {
diff --git a/app/soapbox/features/emoji/index.ts b/app/soapbox/features/emoji/index.ts
index 314a39511..88420149c 100644
--- a/app/soapbox/features/emoji/index.ts
+++ b/app/soapbox/features/emoji/index.ts
@@ -7,6 +7,20 @@ import unicodeMapping from './mapping';
 import type { Node as CheerioNode } from 'cheerio';
 import type { Emoji as EmojiMart, CustomEmoji as EmojiMartCustom } from 'emoji-mart';
 
+/*
+ * TODO: Consolate emoji object types
+ *
+ * There are five different emoji objects currently
+ *  - emoji-mart's "onPickEmoji" handler
+ *  - emoji-mart's custom emoji types
+ *  - an Emoji type that is either NativeEmoji or CustomEmoji
+ *  - a type inside redux's `store.custom_emoji` immutablejs
+ *  
+ * there needs to be one type for the picker handler callback
+ * and one type for the emoji-mart data
+ * and one type that is used everywhere that the above two are converted into
+ */
+
 export interface Emoji {
   id: string,
   colons: string,
diff --git a/app/soapbox/reducers/compose.ts b/app/soapbox/reducers/compose.ts
index 4912fd03f..9bc87760d 100644
--- a/app/soapbox/reducers/compose.ts
+++ b/app/soapbox/reducers/compose.ts
@@ -221,6 +221,7 @@ const updateSuggestionTags = (state: State, token: string) => {
 
 const insertEmoji = (state: State, position: number, emojiData: Emoji, needsSpace: boolean) => {
   const oldText = state.text;
+  console.log(emojiData);
   const emojiText = isNativeEmoji(emojiData) ? emojiData.native : emojiData.colons;
   const emoji = needsSpace ? ' ' + emojiText : emojiText;
 
diff --git a/types/emoji-mart/index.d.ts b/types/emoji-mart/index.d.ts
index d7e809b35..19743c939 100644
--- a/types/emoji-mart/index.d.ts
+++ b/types/emoji-mart/index.d.ts
@@ -19,12 +19,23 @@ declare module 'emoji-mart' {
     version?: number,
   }
 
+  export interface EmojiPick {
+    id: string,
+    name: string,
+    native?: string,
+    unified?: string,
+    keywords: string[],
+    shortcodes: string,
+    emoticons: string[],
+    src?: string,
+  }
+
   export interface PickerProps {
     custom?: { emojis: Emoji<CustomEmoji> }[],
     set?: string,
     title?: string,
     theme?: string,
-    onEmojiSelect?: any,
+    onEmojiSelect?: (emoji: EmojiPick) => void,
     recent?: any,
     skin?: any,
     perLine?: number,