Change header of hashtag timelines in web UI (#26362)
parent
79936c584f
commit
e325443b02
4 changed files with 118 additions and 28 deletions
@ -0,0 +1,79 @@ |
|||||||
|
import PropTypes from 'prop-types'; |
||||||
|
|
||||||
|
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; |
||||||
|
|
||||||
|
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||||
|
|
||||||
|
import Button from 'mastodon/components/button'; |
||||||
|
import { ShortNumber } from 'mastodon/components/short_number'; |
||||||
|
|
||||||
|
const messages = defineMessages({ |
||||||
|
followHashtag: { id: 'hashtag.follow', defaultMessage: 'Follow hashtag' }, |
||||||
|
unfollowHashtag: { id: 'hashtag.unfollow', defaultMessage: 'Unfollow hashtag' }, |
||||||
|
}); |
||||||
|
|
||||||
|
const usesRenderer = (displayNumber, pluralReady) => ( |
||||||
|
<FormattedMessage |
||||||
|
id='hashtag.counter_by_uses' |
||||||
|
defaultMessage='{count, plural, one {{counter} post} other {{counter} posts}}' |
||||||
|
values={{ |
||||||
|
count: pluralReady, |
||||||
|
counter: <strong>{displayNumber}</strong>, |
||||||
|
}} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
const peopleRenderer = (displayNumber, pluralReady) => ( |
||||||
|
<FormattedMessage |
||||||
|
id='hashtag.counter_by_accounts' |
||||||
|
defaultMessage='{count, plural, one {{counter} participant} other {{counter} participants}}' |
||||||
|
values={{ |
||||||
|
count: pluralReady, |
||||||
|
counter: <strong>{displayNumber}</strong>, |
||||||
|
}} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
const usesTodayRenderer = (displayNumber, pluralReady) => ( |
||||||
|
<FormattedMessage |
||||||
|
id='hashtag.counter_by_uses_today' |
||||||
|
defaultMessage='{count, plural, one {{counter} post} other {{counter} posts}} today' |
||||||
|
values={{ |
||||||
|
count: pluralReady, |
||||||
|
counter: <strong>{displayNumber}</strong>, |
||||||
|
}} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
export const HashtagHeader = injectIntl(({ tag, intl, disabled, onClick }) => { |
||||||
|
if (!tag) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const [uses, people] = tag.get('history').reduce((arr, day) => [arr[0] + day.get('uses') * 1, arr[1] + day.get('accounts') * 1], [0, 0]); |
||||||
|
const dividingCircle = <span aria-hidden>{' · '}</span>; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className='hashtag-header'> |
||||||
|
<div className='hashtag-header__header'> |
||||||
|
<h1>#{tag.get('name')}</h1> |
||||||
|
<Button onClick={onClick} text={intl.formatMessage(tag.get('following') ? messages.unfollowHashtag : messages.followHashtag)} disabled={disabled} /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
<ShortNumber value={uses} renderer={usesRenderer} /> |
||||||
|
{dividingCircle} |
||||||
|
<ShortNumber value={people} renderer={peopleRenderer} /> |
||||||
|
{dividingCircle} |
||||||
|
<ShortNumber value={tag.getIn(['history', 0, 'uses']) * 1} renderer={usesTodayRenderer} /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
HashtagHeader.propTypes = { |
||||||
|
tag: ImmutablePropTypes.map, |
||||||
|
disabled: PropTypes.bool, |
||||||
|
onClick: PropTypes.func, |
||||||
|
intl: PropTypes.object, |
||||||
|
}; |
Loading…
Reference in new issue