From 98b2fdf9a4659e11ce1a548573e6a3a9584665f5 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Wed, 9 Nov 2022 13:17:10 -0500
Subject: [PATCH] Improve emoji to support custom

---
 app/soapbox/actions/streaming.ts              |  5 ++--
 .../chats/components/chat-message-list.tsx    | 30 +++++++++++--------
 app/soapbox/normalizers/chat_message.ts       |  1 -
 app/soapbox/queries/chats.ts                  | 19 +++++++-----
 4 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/app/soapbox/actions/streaming.ts b/app/soapbox/actions/streaming.ts
index 1d0b5154b..016c76b95 100644
--- a/app/soapbox/actions/streaming.ts
+++ b/app/soapbox/actions/streaming.ts
@@ -2,6 +2,7 @@ import { InfiniteData } from '@tanstack/react-query';
 
 import { getSettings } from 'soapbox/actions/settings';
 import messages from 'soapbox/locales/messages';
+import { normalizeChatMessage } from 'soapbox/normalizers';
 import { ChatKeys, IChat, isLastMessage } from 'soapbox/queries/chats';
 import { queryClient } from 'soapbox/queries/client';
 import { updatePageItem, appendPageItem, removePageItem, flattenPages, PaginatedResult } from 'soapbox/utils/queries';
@@ -73,7 +74,7 @@ const updateChat = (payload: ChatPayload) => {
 
   if (lastMessage) {
     // Update the Chat Messages query data.
-    appendPageItem(ChatKeys.chatMessages(payload.id), lastMessage);
+    appendPageItem(ChatKeys.chatMessages(payload.id), normalizeChatMessage(lastMessage));
   }
 };
 
@@ -152,7 +153,7 @@ const connectTimelineStream = (
           break;
         case 'pleroma:chat_update':
         case 'chat_message.created': // TruthSocial
-          dispatch((dispatch: AppDispatch, getState: () => RootState) => {
+          dispatch((_dispatch: AppDispatch, getState: () => RootState) => {
             const chat = JSON.parse(data.payload);
             const me = getState().me;
             const messageOwned = chat.last_message?.account_id === me;
diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index 81e47c00b..bed6ed722 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list.tsx
@@ -1,10 +1,10 @@
 import { useMutation } from '@tanstack/react-query';
 import classNames from 'clsx';
-import { List as ImmutableList } from 'immutable';
+import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import escape from 'lodash/escape';
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
-import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { Components, Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
 import { openModal } from 'soapbox/actions/modals';
 import { initReport } from 'soapbox/actions/reports';
@@ -55,13 +55,22 @@ const timeChange = (prev: IChatMessage, curr: IChatMessage): TimeFormat | null =
   return null;
 };
 
+const makeEmojiMap = (record: any) => record.get('emojis', ImmutableList()).reduce((map: ImmutableMap<string, any>, emoji: ImmutableMap<string, any>) => {
+  return map.set(`:${emoji.get('shortcode')}:`, emoji);
+}, ImmutableMap());
+
+const START_INDEX = 10000;
+
+const List: Components['List'] = React.forwardRef((props, ref) => {
+  const { context, ...rest } = props;
+  return <div ref={ref} {...rest} className='mb-2' />;
+});
+
 interface IChatMessageList {
   /** Chat the messages are being rendered from. */
   chat: IChat,
 }
 
-const START_INDEX = 10000;
-
 /** Scrollable list of chat messages. */
 const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
   const intl = useIntl();
@@ -198,7 +207,8 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
     const pending = chatMessage.pending;
     const deleting = chatMessage.deleting;
     const formatted = (pending && !deleting) ? parsePendingContent(content) : content;
-    return emojify(formatted);
+    const emojiMap = makeEmojiMap(chatMessage);
+    return emojify(formatted, emojiMap.toJS());
   };
 
   const renderDivider = (key: React.Key, text: string) => <Divider key={key} text={text} textSize='sm' />;
@@ -455,20 +465,14 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
               return renderDivider(index, chatMessage.text);
             } else {
               return (
-                <div
-                  className={
-                    classNames('px-4', {
-                      'py-2': index !== START_INDEX,
-                      'pt-2 pb-4': index === START_INDEX || chatMessage.pending,
-                    })
-                  }
-                >
+                <div className='px-4 py-2'>
                   {renderMessage(chatMessage)}
                 </div>
               );
             }
           }}
           components={{
+            List,
             Header: () => {
               if (hasNextPage || isFetchingNextPage) {
                 return <Spinner withText={false} />;
diff --git a/app/soapbox/normalizers/chat_message.ts b/app/soapbox/normalizers/chat_message.ts
index 393f950af..af67f351e 100644
--- a/app/soapbox/normalizers/chat_message.ts
+++ b/app/soapbox/normalizers/chat_message.ts
@@ -19,7 +19,6 @@ export const ChatMessageRecord = ImmutableRecord({
   emojis: ImmutableList<Emoji>(),
   id: '',
   unread: false,
-
   deleting: false,
   pending: false as boolean | undefined,
 });
diff --git a/app/soapbox/queries/chats.ts b/app/soapbox/queries/chats.ts
index e51f2e4c9..1336f90ee 100644
--- a/app/soapbox/queries/chats.ts
+++ b/app/soapbox/queries/chats.ts
@@ -253,14 +253,17 @@ const useChatActions = (chatId: string) => {
             if (idx === 0) {
               return {
                 ...page,
-                result: [...page.result, {
-                  content: variables.content,
-                  id: String(Number(new Date())),
-                  created_at: new Date(),
-                  account_id: account?.id,
-                  pending: true,
-                  unread: true,
-                }],
+                result: [
+                  ...page.result,
+                  normalizeChatMessage({
+                    content: variables.content,
+                    id: String(Number(new Date())),
+                    created_at: new Date(),
+                    account_id: account?.id,
+                    pending: true,
+                    unread: true,
+                  }),
+                ],
               };
             }