Fix preview in reactions modal

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/features/notifications/components/notification.tsx

@@ -269,6 +269,7 @@ const Notification: React.FC<INotificaton> = (props) => {
       return (
         <Emoji
           emoji={notification.emoji}
+          src={notification.emoji_url || undefined}
           className='h-4 w-4 flex-none'
         />
       );

app/soapbox/features/ui/components/modals/reactions-modal.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { fetchFavourites, fetchReactions } from 'soapbox/actions/interactions';
@@ -17,6 +17,12 @@ const messages = defineMessages({
   all: { id: 'reactions.all', defaultMessage: 'All' },
 });
 
+interface IAccountWithReaction {
+  id: string
+  reaction: string
+  reactionUrl?: string
+}
+
 interface IReactionsModal {
   onClose: (string: string) => void
   statusId: string
@@ -65,17 +71,25 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
     return <Tabs items={items} activeItem={reaction || 'all'} />;
   };
 
+  const accounts = useMemo((): ImmutableList<IAccountWithReaction> | undefined  => {
+    if (!reactions) return;
+
+    if (reaction) {
+      const reactionRecord = reactions.find(({ name }) => name === reaction);
+
+      if (reactionRecord) return reactionRecord.accounts.map(account => ({ id: account, reaction: reaction, reactionUrl: reactionRecord.url || undefined })).toList();
+    } else {
+      return reactions.map(({ accounts, name, url }) => accounts.map(account => ({ id: account, reaction: name, reactionUrl: url }))).flatten() as ImmutableList<IAccountWithReaction>;
+    }
+  }, [reactions, reaction]);
+
   useEffect(() => {
     fetchData();
   }, []);
 
-  const accounts = reactions && (reaction
-    ? reactions.find(({ name }) => name === reaction)?.accounts.map(account => ({ id: account, reaction: reaction }))
-    : reactions.map(({ accounts, name, url }) => accounts.map(account => ({ id: account, reaction: name, reactionUrl: url }))).flatten()) as ImmutableList<{ id: string, reaction: string, reactionUrl?: string }>;
-
   let body;
 
-  if (!accounts) {
+  if (!accounts || !reactions) {
     body = <Spinner />;
   } else {
     const emptyMessage = <FormattedMessage id='status.reactions.empty' defaultMessage='No one has reacted to this post yet. When someone does, they will show up here.' />;

app/soapbox/normalizers/notification.ts

@@ -17,6 +17,7 @@ export const NotificationRecord = ImmutableRecord({
   chat_message: null as ImmutableMap<string, any> | string | null, // pleroma:chat_mention
   created_at: new Date(),
   emoji: null as string | null, // pleroma:emoji_reaction
+  emoji_url: null as string | null, // pleroma:emoji_reaction
   id: '',
   status: null as EmbeddedEntity<Status>,
   target: null as EmbeddedEntity<Account>, // move