app/javascript/mastodon/components/hashtag.js

   1 // @ts-check
   2 import React from 'react';
   3 import { Sparklines, SparklinesCurve } from 'react-sparklines';
   4 import { FormattedMessage } from 'react-intl';
   5 import PropTypes from 'prop-types';
   6 import ImmutablePropTypes from 'react-immutable-proptypes';
   7 import Permalink from './permalink';
   8 import ShortNumber from 'mastodon/components/short_number';
   9
  10 class SilentErrorBoundary extends React.Component {
  11
  12   static propTypes = {
  13     children: PropTypes.node,
  14   };
  15
  16   state = {
  17     error: false,
  18   };
  19
  20   componentDidCatch () {
  21     this.setState({ error: true });
  22   }
  23
  24   render () {
  25     if (this.state.error) {
  26       return null;
  27     }
  28
  29     return this.props.children;
  30   }
  31
  32 }
  33
  34 /**
  35  * Used to render counter of how much people are talking about hashtag
  36  *
  37  * @type {(displayNumber: JSX.Element, pluralReady: number) => JSX.Element}
  38  */
  39 const accountsCountRenderer = (displayNumber, pluralReady) => (
  40   <FormattedMessage
  41     id='trends.counter_by_accounts'
  42     defaultMessage='{count, plural, one {{counter} person} other {{counter} people}} talking'
  43     values={{
  44       count: pluralReady,
  45       counter: <strong>{displayNumber}</strong>,
  46     }}
  47   />
  48 );
  49
  50 const Hashtag = ({ hashtag }) => (
  51   <div className='trends__item'>
  52     <div className='trends__item__name'>
  53       <Permalink
  54         href={hashtag.get('url')}
  55         to={`/tags/${hashtag.get('name')}`}
  56       >
  57         #<span>{hashtag.get('name')}</span>
  58       </Permalink>
  59
  60       <ShortNumber
  61         value={
  62           hashtag.getIn(['history', 0, 'accounts']) * 1 +
  63           hashtag.getIn(['history', 1, 'accounts']) * 1
  64         }
  65         renderer={accountsCountRenderer}
  66       />
  67     </div>
  68
  69     <div className='trends__item__current'>
  70       <ShortNumber
  71         value={
  72           hashtag.getIn(['history', 0, 'uses']) * 1 +
  73           hashtag.getIn(['history', 1, 'uses']) * 1
  74         }
  75       />
  76     </div>
  77
  78     <div className='trends__item__sparkline'>
  79       <SilentErrorBoundary>
  80         <Sparklines
  81           width={50}
  82           height={28}
  83           data={hashtag
  84             .get('history')
  85             .reverse()
  86             .map((day) => day.get('uses'))
  87             .toArray()}
  88         >
  89           <SparklinesCurve style={{ fill: 'none' }} />
  90         </Sparklines>
  91       </SilentErrorBoundary>
  92     </div>
  93   </div>
  94 );
  95
  96 Hashtag.propTypes = {
  97   hashtag: ImmutablePropTypes.map.isRequired,
  98 };
  99
 100 export default Hashtag;