2022-02-24 18:34:33 -05:00
import PropTypes from 'prop-types' ;
2023-05-23 11:15:17 -04:00
import { PureComponent } from 'react' ;
import { FormattedMessage } from 'react-intl' ;
2023-10-23 11:07:13 -04:00
import { withRouter } from 'react-router-dom' ;
2022-02-24 18:34:33 -05:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import { connect } from 'react-redux' ;
2023-05-23 11:15:17 -04:00
2022-02-24 18:34:33 -05:00
import { fetchTrendingHashtags } from 'mastodon/actions/trends' ;
2023-07-08 05:12:20 -04:00
import { DismissableBanner } from 'mastodon/components/dismissable_banner' ;
2023-05-23 11:15:17 -04:00
import { ImmutableHashtag as Hashtag } from 'mastodon/components/hashtag' ;
2023-06-13 13:26:25 -04:00
import { LoadingIndicator } from 'mastodon/components/loading_indicator' ;
2023-10-23 11:07:13 -04:00
import { WithRouterPropTypes } from 'mastodon/utils/react_router' ;
2022-02-24 18:34:33 -05:00
const mapStateToProps = state => ( {
hashtags : state . getIn ( [ 'trends' , 'tags' , 'items' ] ) ,
isLoadingHashtags : state . getIn ( [ 'trends' , 'tags' , 'isLoading' ] ) ,
} ) ;
2023-05-23 04:52:27 -04:00
class Tags extends PureComponent {
2022-02-24 18:34:33 -05:00
static propTypes = {
hashtags : ImmutablePropTypes . list ,
isLoading : PropTypes . bool ,
dispatch : PropTypes . func . isRequired ,
2023-10-23 11:07:13 -04:00
... WithRouterPropTypes ,
2022-02-24 18:34:33 -05:00
} ;
componentDidMount ( ) {
2023-10-23 11:07:13 -04:00
const { dispatch , history , hashtags } = this . props ;
// If we're navigating back to the screen, do not trigger a reload
if ( history . action === 'POP' && hashtags . size > 0 ) {
return ;
}
2022-02-24 18:34:33 -05:00
dispatch ( fetchTrendingHashtags ( ) ) ;
}
render ( ) {
const { isLoading , hashtags } = this . props ;
2022-10-09 00:08:37 -04:00
const banner = (
< DismissableBanner id = 'explore/tags' >
2023-06-22 17:48:40 -04: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 00:08:37 -04:00
< / DismissableBanner >
) ;
2022-09-28 22:39:33 -04:00
if ( ! isLoading && hashtags . isEmpty ( ) ) {
return (
< div className = 'explore__links scrollable scrollable--flex' >
2022-10-09 00:08:37 -04:00
{ banner }
2022-09-28 22:39:33 -04: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 18:34:33 -05:00
return (
2023-10-03 07:12:39 -04:00
< div className = 'scrollable explore__links' data - nosnippet >
2022-10-09 00:08:37 -04:00
{ banner }
2022-02-24 18:34:33 -05:00
{ isLoading ? ( < LoadingIndicator / > ) : hashtags . map ( hashtag => (
< Hashtag key = { hashtag . get ( 'name' ) } hashtag = { hashtag } / >
) ) }
< / div >
) ;
}
}
2023-03-23 22:17:53 -04:00
2023-10-23 11:07:13 -04:00
export default connect ( mapStateToProps ) ( withRouter ( Tags ) ) ;