diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx index 5df21c647..6812cdeb8 100644 --- a/app/soapbox/features/notifications/components/notification.tsx +++ b/app/soapbox/features/notifications/components/notification.tsx @@ -269,6 +269,7 @@ const Notification: React.FC = (props) => { return ( ); diff --git a/app/soapbox/features/ui/components/modals/reactions-modal.tsx b/app/soapbox/features/ui/components/modals/reactions-modal.tsx index e5fbca99f..08e4afa43 100644 --- a/app/soapbox/features/ui/components/modals/reactions-modal.tsx +++ b/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 = ({ onClose, statusId, reaction return ; }; + const accounts = useMemo((): ImmutableList | 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; + } + }, [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 = ; } else { const emptyMessage = ; diff --git a/app/soapbox/normalizers/notification.ts b/app/soapbox/normalizers/notification.ts index 9b34278b6..2412db05d 100644 --- a/app/soapbox/normalizers/notification.ts +++ b/app/soapbox/normalizers/notification.ts @@ -17,6 +17,7 @@ export const NotificationRecord = ImmutableRecord({ chat_message: null as ImmutableMap | 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, target: null as EmbeddedEntity, // move