Use FormattedList for 'Replying to'

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2022-05-16 20:30:42 +02:00
parent 008b51eef1
commit eecbbb839a
67 changed files with 56 additions and 152 deletions

View File

@ -1,5 +1,5 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { FormattedList, FormattedMessage } from 'react-intl';
import { useDispatch } from 'react-redux';
import { openModal } from 'soapbox/actions/modals';
@ -47,14 +47,23 @@ const ReplyMentions: React.FC = () => {
);
}
const accounts = to.slice(0, 2).map((acct: string) => (
<span className='reply-mentions__account'>@{acct.split('@')[0]}</span>
)).toArray();
if (to.size > 2) {
accounts.push(
<FormattedMessage id='reply_mentions.more' defaultMessage='{count} more' values={{ count: to.size - 2 }} />,
);
}
return (
<a href='#' className='reply-mentions' onClick={handleClick}>
<FormattedMessage
id='reply_mentions.reply'
defaultMessage='Replying to {accounts}{more}'
defaultMessage='Replying to {accounts}'
values={{
accounts: to.slice(0, 2).map((acct: string) => <><span className='reply-mentions__account'>@{acct.split('@')[0]}</span>{' '}</>),
more: to.size > 2 && <FormattedMessage id='reply_mentions.more' defaultMessage='and {count} more' values={{ count: to.size - 2 }} />,
accounts: <FormattedList type='conjunction' value={accounts} />,
}}
/>
</a>