2022-02-25 01:34:33 +02:00
import PropTypes from 'prop-types' ;
2023-05-23 18:15:17 +03:00
import { PureComponent } from 'react' ;
import { FormattedMessage } from 'react-intl' ;
2023-10-23 18:07:13 +03:00
import { withRouter } from 'react-router-dom' ;
2022-02-25 01:34:33 +02:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import { connect } from 'react-redux' ;
2023-05-23 18:15:17 +03:00
2022-02-25 01:34:33 +02:00
import { fetchTrendingLinks } from 'mastodon/actions/trends' ;
2023-07-08 12:12:20 +03:00
import { DismissableBanner } from 'mastodon/components/dismissable_banner' ;
2023-06-13 20:26:25 +03:00
import { LoadingIndicator } from 'mastodon/components/loading_indicator' ;
2023-10-23 18:07:13 +03:00
import { WithRouterPropTypes } from 'mastodon/utils/react_router' ;
2023-05-23 18:15:17 +03:00
import Story from './components/story' ;
2022-02-25 01:34:33 +02:00
const mapStateToProps = state => ( {
links : state . getIn ( [ 'trends' , 'links' , 'items' ] ) ,
isLoading : state . getIn ( [ 'trends' , 'links' , 'isLoading' ] ) ,
} ) ;
2023-05-23 11:52:27 +03:00
class Links extends PureComponent {
2022-02-25 01:34:33 +02:00
static propTypes = {
links : ImmutablePropTypes . list ,
isLoading : PropTypes . bool ,
dispatch : PropTypes . func . isRequired ,
2023-10-23 18:07:13 +03:00
... WithRouterPropTypes ,
2022-02-25 01:34:33 +02:00
} ;
componentDidMount ( ) {
2023-10-23 18:07:13 +03:00
const { dispatch , links , history } = this . props ;
// If we're navigating back to the screen, do not trigger a reload
if ( history . action === 'POP' && links . size > 0 ) {
return ;
}
2022-02-25 01:34:33 +02:00
dispatch ( fetchTrendingLinks ( ) ) ;
}
render ( ) {
const { isLoading , links } = this . props ;
2022-10-09 07:08:37 +03:00
const banner = (
< DismissableBanner id = 'explore/links' >
2023-06-23 00:48:40 +03:00
< FormattedMessage id = 'dismissable_banner.explore_links' defaultMessage = 'These are news stories being shared the most on the social web today. Newer news stories posted by more different people are ranked higher.' / >
2022-10-09 07:08:37 +03:00
< / DismissableBanner >
) ;
2022-09-29 05:39:33 +03:00
if ( ! isLoading && links . isEmpty ( ) ) {
return (
< div className = 'explore__links scrollable scrollable--flex' >
2022-10-09 07:08:37 +03:00
{ banner }
2022-09-29 05:39:33 +03: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-25 01:34:33 +02:00
return (
2023-10-03 14:12:39 +03:00
< div className = 'explore__links scrollable' data - nosnippet >
2022-10-09 07:08:37 +03:00
{ banner }
2023-07-25 01:57:15 +03:00
{ isLoading ? ( < LoadingIndicator / > ) : links . map ( ( link , i ) => (
2022-02-25 01:34:33 +02:00
< Story
key = { link . get ( 'id' ) }
2023-07-25 01:57:15 +03:00
expanded = { i === 0 }
2023-07-24 14:48:23 +03:00
lang = { link . get ( 'language' ) }
2022-02-25 01:34:33 +02:00
url = { link . get ( 'url' ) }
title = { link . get ( 'title' ) }
publisher = { link . get ( 'provider_name' ) }
2023-07-25 01:57:15 +03:00
publishedAt = { link . get ( 'published_at' ) }
author = { link . get ( 'author_name' ) }
2022-02-25 01:34:33 +02:00
sharedTimes = { link . getIn ( [ 'history' , 0 , 'accounts' ] ) * 1 + link . getIn ( [ 'history' , 1 , 'accounts' ] ) * 1 }
thumbnail = { link . get ( 'image' ) }
2023-08-03 16:41:51 +03:00
thumbnailDescription = { link . get ( 'image_description' ) }
2022-02-25 01:34:33 +02:00
blurhash = { link . get ( 'blurhash' ) }
/ >
) ) }
< / div >
) ;
}
}
2023-03-24 04:17:53 +02:00
2023-10-23 18:07:13 +03:00
export default connect ( mapStateToProps ) ( withRouter ( Links ) ) ;