74 lines
1.9 KiB
JavaScript
74 lines
1.9 KiB
JavaScript
// @ts-check
|
|
import React from 'react';
|
|
import { Sparklines, SparklinesCurve } from 'react-sparklines';
|
|
import { FormattedMessage } from 'react-intl';
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
import Permalink from './permalink';
|
|
import ShortNumber from 'flavours/glitch/components/short_number';
|
|
|
|
/**
|
|
* Used to render counter of how much people are talking about hashtag
|
|
*
|
|
* @type {(displayNumber: JSX.Element, pluralReady: number) => JSX.Element}
|
|
*/
|
|
const accountsCountRenderer = (displayNumber, pluralReady) => (
|
|
<FormattedMessage
|
|
id='trends.counter_by_accounts'
|
|
defaultMessage='{count, plural, one {{counter} person} other {{counter} people}} talking'
|
|
values={{
|
|
count: pluralReady,
|
|
counter: <strong>{displayNumber}</strong>,
|
|
}}
|
|
/>
|
|
);
|
|
|
|
const Hashtag = ({ hashtag }) => (
|
|
<div className='trends__item'>
|
|
<div className='trends__item__name'>
|
|
<Permalink
|
|
href={hashtag.get('url')}
|
|
to={`/timelines/tag/${hashtag.get('name')}`}
|
|
>
|
|
#<span>{hashtag.get('name')}</span>
|
|
</Permalink>
|
|
|
|
<ShortNumber
|
|
value={
|
|
hashtag.getIn(['history', 0, 'accounts']) * 1 +
|
|
hashtag.getIn(['history', 1, 'accounts']) * 1
|
|
}
|
|
renderer={accountsCountRenderer}
|
|
/>
|
|
</div>
|
|
|
|
<div className='trends__item__current'>
|
|
<ShortNumber
|
|
value={
|
|
hashtag.getIn(['history', 0, 'uses']) * 1 +
|
|
hashtag.getIn(['history', 1, 'uses']) * 1
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<div className='trends__item__sparkline'>
|
|
<Sparklines
|
|
width={50}
|
|
height={28}
|
|
data={hashtag
|
|
.get('history')
|
|
.reverse()
|
|
.map((day) => day.get('uses'))
|
|
.toArray()}
|
|
>
|
|
<SparklinesCurve style={{ fill: 'none' }} />
|
|
</Sparklines>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
Hashtag.propTypes = {
|
|
hashtag: ImmutablePropTypes.map.isRequired,
|
|
};
|
|
|
|
export default Hashtag;
|