2022-02-25 08:34:33 +09:00
import PropTypes from 'prop-types' ;
2023-05-28 23:38:10 +09:00
import { PureComponent } from 'react' ;
import { FormattedMessage } from 'react-intl' ;
2022-02-25 08:34:33 +09:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import { connect } from 'react-redux' ;
2023-05-28 23:38:10 +09:00
2022-02-25 08:34:33 +09:00
import { fetchTrendingLinks } from 'flavours/glitch/actions/trends' ;
2023-07-08 18:12:20 +09:00
import { DismissableBanner } from 'flavours/glitch/components/dismissable_banner' ;
2023-06-14 02:26:25 +09:00
import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator' ;
2023-05-28 23:38:10 +09:00
import Story from './components/story' ;
2022-02-25 08:34:33 +09:00
const mapStateToProps = state => ( {
links : state . getIn ( [ 'trends' , 'links' , 'items' ] ) ,
isLoading : state . getIn ( [ 'trends' , 'links' , 'isLoading' ] ) ,
} ) ;
2023-05-28 21:18:23 +09:00
class Links extends PureComponent {
2022-02-25 08:34:33 +09:00
static propTypes = {
links : ImmutablePropTypes . list ,
isLoading : PropTypes . bool ,
dispatch : PropTypes . func . isRequired ,
} ;
componentDidMount ( ) {
const { dispatch } = this . props ;
dispatch ( fetchTrendingLinks ( ) ) ;
}
render ( ) {
const { isLoading , links } = this . props ;
2022-10-09 13:08:37 +09:00
const banner = (
< DismissableBanner id = 'explore/links' >
2023-06-23 06:48:40 +09: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 13:08:37 +09:00
< / DismissableBanner >
) ;
2022-09-29 11:39:33 +09:00
if ( ! isLoading && links . isEmpty ( ) ) {
return (
< div className = 'explore__links scrollable scrollable--flex' >
2022-10-09 13:08:37 +09:00
{ banner }
2022-09-29 11:39:33 +09: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 08:34:33 +09:00
return (
< div className = 'explore__links' >
2022-10-09 13:08:37 +09:00
{ banner }
2023-07-25 07:57:15 +09:00
{ isLoading ? ( < LoadingIndicator / > ) : links . map ( ( link , i ) => (
2022-02-25 08:34:33 +09:00
< Story
key = { link . get ( 'id' ) }
2023-07-25 07:57:15 +09:00
expanded = { i === 0 }
2023-07-24 20:48:23 +09:00
lang = { link . get ( 'language' ) }
2022-02-25 08:34:33 +09:00
url = { link . get ( 'url' ) }
title = { link . get ( 'title' ) }
publisher = { link . get ( 'provider_name' ) }
2023-07-25 07:57:15 +09:00
publishedAt = { link . get ( 'published_at' ) }
author = { link . get ( 'author_name' ) }
2022-02-25 08:34:33 +09:00
sharedTimes = { link . getIn ( [ 'history' , 0 , 'accounts' ] ) * 1 + link . getIn ( [ 'history' , 1 , 'accounts' ] ) * 1 }
thumbnail = { link . get ( 'image' ) }
2023-08-03 22:41:51 +09:00
thumbnailDescription = { link . get ( 'image_description' ) }
2022-02-25 08:34:33 +09:00
blurhash = { link . get ( 'blurhash' ) }
/ >
) ) }
< / div >
) ;
}
}
2023-03-25 07:15:25 +09:00
export default connect ( mapStateToProps ) ( Links ) ;