2022-02-24 23:34:33 +00:00
import React from 'react' ;
import PropTypes from 'prop-types' ;
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import { ImmutableHashtag as Hashtag } from 'mastodon/components/hashtag' ;
import LoadingIndicator from 'mastodon/components/loading_indicator' ;
import { connect } from 'react-redux' ;
import { fetchTrendingHashtags } from 'mastodon/actions/trends' ;
2022-09-29 02:39:33 +00:00
import { FormattedMessage } from 'react-intl' ;
2022-10-09 04:08:37 +00:00
import DismissableBanner from 'mastodon/components/dismissable_banner' ;
2022-02-24 23:34:33 +00:00
const mapStateToProps = state => ( {
hashtags : state . getIn ( [ 'trends' , 'tags' , 'items' ] ) ,
isLoadingHashtags : state . getIn ( [ 'trends' , 'tags' , 'isLoading' ] ) ,
} ) ;
class Tags extends React . PureComponent {
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' >
< FormattedMessage id = 'dismissable_banner.explore_tags' defaultMessage = 'These hashtags are gaining traction among people on this and other servers of the decentralized network right now.' / >
< / 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 ) ;