gab-social/app/javascript/gabsocial/components/panel/trends_panel.js

116 lines
3.1 KiB
JavaScript
Raw Normal View History

2020-02-19 23:57:07 +00:00
import { injectIntl, defineMessages } from 'react-intl'
import ImmutablePureComponent from 'react-immutable-pure-component'
import ImmutablePropTypes from 'react-immutable-proptypes'
2020-04-04 00:18:26 +01:00
import { fetchGabTrends } from '../../actions/gab_trends'
2020-02-19 23:57:07 +00:00
import PanelLayout from './panel_layout'
2020-04-28 06:33:58 +01:00
import ScrollableList from '../scrollable_list'
2020-04-29 23:32:49 +01:00
import TrendsItem from '../trends_item'
import TrendsItemPlaceholder from '../placeholder/trends_item_placeholder'
const messages = defineMessages({
2020-04-07 02:53:23 +01:00
title: { id: 'trends.title', defaultMessage: 'Trending right now' },
readMore: { id: 'status.read_more', defaultMessage: 'Read more' },
2020-02-19 23:57:07 +00:00
})
2020-04-11 23:29:19 +01:00
const mapStateToProps = (state) => ({
isError: state.getIn(['gab_trends', 'feed', 'isError']),
isLoading: state.getIn(['gab_trends', 'feed', 'isLoading']),
items: state.getIn(['gab_trends', 'feed', 'items']),
2020-04-04 00:18:26 +01:00
})
2020-04-11 23:29:19 +01:00
const mapDispatchToProps = (dispatch) => ({
onfetchGabTrends: () => dispatch(fetchGabTrends('feed')),
2020-04-11 23:29:19 +01:00
})
2020-02-19 23:57:07 +00:00
export default
@injectIntl
@connect(mapStateToProps, mapDispatchToProps)
class TrendsPanel extends ImmutablePureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
isError: PropTypes.bool,
isLazy: PropTypes.bool,
isLoading: PropTypes.bool,
items: ImmutablePropTypes.list.isRequired,
onfetchGabTrends: PropTypes.func.isRequired,
2020-02-19 23:57:07 +00:00
}
2020-04-29 23:32:49 +01:00
updateOnProps = [
'items',
'isLazy',
'isLoading',
'isError',
2020-04-29 23:32:49 +01:00
]
state = {
fetched: false,
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.shouldLoad && !prevState.fetched) {
return { fetched: true }
}
return null
}
componentDidUpdate(prevProps, prevState) {
if (!prevState.fetched && this.state.fetched) {
this.props.onfetchGabTrends()
}
}
2020-04-28 06:33:58 +01:00
componentDidMount() {
if (!this.props.isLazy) {
this.props.onfetchGabTrends()
this.setState({ fetched: true })
}
}
render() {
const {
intl,
isError,
isLoading,
items,
} = this.props
const { fetched } = this.state
const count = !!items ? items.count() : 0
if (isError || (count === 0 && fetched)) return null
return (
2020-02-21 00:57:29 +00:00
<PanelLayout
noPadding
title={intl.formatMessage(messages.title)}
headerButtonTitle={intl.formatMessage(messages.readMore)}
headerButtonTo='/news'
footerButtonTitle={intl.formatMessage(messages.readMore)}
footerButtonTo='/news'
2020-02-21 00:57:29 +00:00
>
2020-04-29 23:32:49 +01:00
<ScrollableList
showLoading={isLoading}
placeholderComponent={TrendsItemPlaceholder}
placeholderCount={8}
2020-04-29 23:32:49 +01:00
scrollKey='trending-items'
>
2020-04-04 00:18:26 +01:00
{
items.slice(0, 8).map((trend, i) => (
2020-04-29 23:32:49 +01:00
<TrendsItem
key={`gab-trend-${i}`}
index={i + 1}
isLast={i === 7}
title={trend.get('title')}
description={trend.get('description')}
url={trend.get('url')}
author={trend.getIn(['author', 'name'], '')}
date={trend.get('date_published')}
2020-04-29 23:32:49 +01:00
/>
))
2020-04-04 00:18:26 +01:00
}
2020-04-29 23:32:49 +01:00
</ScrollableList>
</PanelLayout>
2020-02-19 23:57:07 +00:00
)
}
2020-02-19 23:57:07 +00:00
}