@ -1,28 +1,82 @@
import React from 'react' ;
import PropTypes from 'prop-types' ;
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import { FormattedMessage } from 'react-intl' ;
import { FormattedMessage , FormattedNumber } from 'react-intl' ;
import AccountContainer from '../../../containers/account_container' ;
import StatusContainer from '../../../containers/status_container' ;
import { Link } from 'react-router-dom' ;
import ImmutablePureComponent from 'react-immutable-pure-component' ;
import { Sparklines , SparklinesCurve } from 'react-sparklines' ;
const shortNumberFormat = number => {
if ( number < 1000 ) {
return < FormattedNumber value = { number } / > ;
} else {
return < React . Fragment > < FormattedNumber value = { number / 1000 } maximumFractionDigits = { 1 } / > K < / R e a c t . F r a g m e n t > ;
}
} ;
const renderHashtag = hashtag => (
< div className = 'trends__item' key = { hashtag . get ( 'name' ) } >
< div className = 'trends__item__name' >
< Link to = { ` /timelines/tag/ ${ hashtag . get ( 'name' ) } ` } >
# < span > { hashtag . get ( 'name' ) } < / s p a n >
< / L i n k >
< FormattedMessage id = 'trends.count_by_accounts' defaultMessage = '{count} {rawCount, plural, one {person} other {people}} talking' values = { { rawCount : hashtag . getIn ( [ 'history' , 0 , 'accounts' ] ) , count : < strong > { shortNumberFormat ( hashtag . getIn ( [ 'history' , 0 , 'accounts' ] ) ) } < /strong> }} / >
< / d i v >
< div className = 'trends__item__current' >
{ shortNumberFormat ( hashtag . getIn ( [ 'history' , 0 , 'uses' ] ) ) }
< / d i v >
< 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' } } / >
< / S p a r k l i n e s >
< / d i v >
< / d i v >
) ;
export default class SearchResults extends ImmutablePureComponent {
static propTypes = {
results : ImmutablePropTypes . map . isRequired ,
trends : ImmutablePropTypes . list ,
fetchTrends : PropTypes . func . isRequired ,
} ;
componentDidMount ( ) {
const { fetchTrends } = this . props ;
fetchTrends ( ) ;
}
render ( ) {
const { results } = this . props ;
const { results , trends } = this . props ;
let accounts , statuses , hashtags ;
let count = 0 ;
if ( results . isEmpty ( ) ) {
return (
< div className = 'search-results' >
< div className = 'trends' >
< div className = 'trends__header' >
< i className = 'fa fa-fire fa-fw' / >
< FormattedMessage id = 'trends.header' defaultMessage = 'Trending now' / >
< / d i v >
{ trends && trends . map ( hashtag => renderHashtag ( hashtag ) ) }
< / d i v >
< / d i v >
) ;
}
if ( results . get ( 'accounts' ) && results . get ( 'accounts' ) . size > 0 ) {
count += results . get ( 'accounts' ) . size ;
accounts = (
< div className = 'search-results__section' >
< h5 > < FormattedMessage id = 'search_results.accounts' defaultMessage = 'People' / > < / h 5 >
< h5 > < i className = 'fa fa-fw fa-users' / > < FormattedMessage id = 'search_results.accounts' defaultMessage = 'People' / > < / h 5 >
{ results . get ( 'accounts' ) . map ( accountId => < AccountContainer key = { accountId } id = { accountId } / > ) }
< / d i v >
@ -33,7 +87,7 @@ export default class SearchResults extends ImmutablePureComponent {
count += results . get ( 'statuses' ) . size ;
statuses = (
< div className = 'search-results__section' >
< h5 > < FormattedMessage id = 'search_results.statuses' defaultMessage = 'Toots' / > < / h 5 >
< h5 > < i className = 'fa fa-fw fa-quote-right' / > < FormattedMessage id = 'search_results.statuses' defaultMessage = 'Toots' / > < / h 5 >
{ results . get ( 'statuses' ) . map ( statusId => < StatusContainer key = { statusId } id = { statusId } / > ) }
< / d i v >
@ -44,13 +98,9 @@ export default class SearchResults extends ImmutablePureComponent {
count += results . get ( 'hashtags' ) . size ;
hashtags = (
< div className = 'search-results__section' >
< h5 > < FormattedMessage id = 'search_results.hashtags' defaultMessage = 'Hashtags' / > < / h 5 >
< h5 > < i className = 'fa fa-fw fa-hashtag' / > < FormattedMessage id = 'search_results.hashtags' defaultMessage = 'Hashtags' / > < / h 5 >
{ results . get ( 'hashtags' ) . map ( hashtag => (
< Link key = { hashtag } className = 'search-results__hashtag' to = { ` /timelines/tag/ ${ hashtag } ` } >
# { hashtag }
< / L i n k >
) ) }
{ results . get ( 'hashtags' ) . map ( hashtag => renderHashtag ( hashtag ) ) }
< / d i v >
) ;
}
@ -58,6 +108,7 @@ export default class SearchResults extends ImmutablePureComponent {
return (
< div className = 'search-results' >
< div className = 'search-results__header' >
< i className = 'fa fa-search fa-fw' / >
< FormattedMessage id = 'search_results.total' defaultMessage = '{count, number} {count, plural, one {result} other {results}}' values = { { count } } / >
< / d i v >