diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx index 9dd8a8bd0..b3453dde1 100644 --- a/app/soapbox/features/notifications/components/notification.tsx +++ b/app/soapbox/features/notifications/components/notification.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { HotKeys } from 'react-hotkeys'; -import { FormattedMessage, useIntl } from 'react-intl'; +import { defineMessages, IntlShape, MessageDescriptor } from 'react-intl'; +import { useIntl } from 'react-intl'; import { useHistory } from 'react-router-dom'; import { useAppSelector } from 'soapbox/hooks'; @@ -24,11 +25,6 @@ const notificationForScreenReader = (intl: ReturnType, message: return output.join(', '); }; -// Workaround for dynamic messages (https://github.com/formatjs/babel-plugin-react-intl/issues/119#issuecomment-326202499) -function FormattedMessageFixed(props: any) { - return ; -} - const buildLink = (account: Account): JSX.Element => ( = { user_approved: require('@tabler/icons/icons/user-plus.svg'), }; -const messages: Record = { +const messages: Record = defineMessages({ follow: { id: 'notification.follow', defaultMessage: '{name} followed you', @@ -100,18 +96,22 @@ const messages: Record id: 'notification.user_approved', defaultMessage: 'Welcome to {instance}!', }, -}; +}); -const buildMessage = (type: NotificationType, account: Account, targetName: string, instanceTitle: string): JSX.Element => { +const buildMessage = ( + intl: IntlShape, + type: NotificationType, + account: Account, + targetName: string, + instanceTitle: string, +): React.ReactNode => { const link = buildLink(account); - return ( - - ); + return intl.formatMessage(messages[type], { + name: link, + targetName, + instance: instanceTitle, + }); }; interface INotificaton { @@ -268,7 +268,7 @@ const Notification: React.FC = (props) => { const targetName = notification.target && typeof notification.target === 'object' ? notification.target.acct : ''; - const message: React.ReactNode = type && account && typeof account === 'object' ? buildMessage(type, account, targetName, instance.title) : null; + const message: React.ReactNode = type && account && typeof account === 'object' ? buildMessage(intl, type, account, targetName, instance.title) : null; return (