2022-02-24 23:34:33 +00:00
import PropTypes from 'prop-types' ;
2023-05-23 15:15:17 +00:00
import { PureComponent } from 'react' ;
import { FormattedMessage } from 'react-intl' ;
2022-02-24 23:34:33 +00:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import { connect } from 'react-redux' ;
2023-05-23 15:15:17 +00:00
2022-02-24 23:34:33 +00:00
import { fetchTrendingHashtags } from 'mastodon/actions/trends' ;
2023-07-08 09:12:20 +00:00
import { DismissableBanner } from 'mastodon/components/dismissable_banner' ;
2023-05-23 15:15:17 +00:00
import { ImmutableHashtag as Hashtag } from 'mastodon/components/hashtag' ;
2023-06-13 17:26:25 +00:00
import { LoadingIndicator } from 'mastodon/components/loading_indicator' ;
2022-02-24 23:34:33 +00:00
const mapStateToProps = state => ( {
hashtags : state . getIn ( [ 'trends' , 'tags' , 'items' ] ) ,
isLoadingHashtags : state . getIn ( [ 'trends' , 'tags' , 'isLoading' ] ) ,
} ) ;
2023-05-23 08:52:27 +00:00
class Tags extends PureComponent {
2022-02-24 23:34:33 +00:00
static propTypes = {
hashtags : ImmutablePropTypes . list ,
isLoading : PropTypes . bool ,
dispatch : PropTypes . func . isRequired ,
} ;
componentDidMount ( ) {
const { dispatch } = this . props ;
dispatch ( fetchTrendingHashtags ( ) ) ;
}
render ( ) {
const { isLoading , hashtags } = this . props ;
2022-10-09 04:08:37 +00:00
const banner = (
< DismissableBanner id = 'explore/tags' >
2023-06-22 21:48:40 +00:00
< FormattedMessage id = 'dismissable_banner.explore_tags' defaultMessage = 'These are hashtags that are gaining traction on the social web today. Hashtags that are used by more different people are ranked higher.' / >
2022-10-09 04:08:37 +00:00
< / DismissableBanner >
) ;
2022-09-29 02:39:33 +00:00
if ( ! isLoading && hashtags . isEmpty ( ) ) {
return (
< div className = 'explore__links scrollable scrollable--flex' >
2022-10-09 04:08:37 +00:00
{ banner }
2022-09-29 02:39:33 +00:00
< div className = 'empty-column-indicator' >
< FormattedMessage id = 'empty_column.explore_statuses' defaultMessage = 'Nothing is trending right now. Check back later!' / >
< / div >
< / div >
) ;
}
2022-02-24 23:34:33 +00:00
return (
< div className = 'explore__links' >
2022-10-09 04:08:37 +00:00
{ banner }
2022-02-24 23:34:33 +00:00
{ isLoading ? ( < LoadingIndicator / > ) : hashtags . map ( hashtag => (
< Hashtag key = { hashtag . get ( 'name' ) } hashtag = { hashtag } / >
) ) }
< / div >
) ;
}
}
2023-03-24 02:17:53 +00:00
export default connect ( mapStateToProps ) ( Tags ) ;