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

100 lines
2.9 KiB
JavaScript

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import ImmutablePureComponent from 'react-immutable-pure-component'
import ImmutablePropTypes from 'react-immutable-proptypes'
import { CX } from '../../constants'
import PanelLayout from './panel_layout'
import Button from '../button'
import Text from '../text'
import Image from '../image'
// depends on TrendsBreakingPanel atm.
class TrendsHeadlinesPanel extends ImmutablePureComponent {
render() {
const {
isFetched,
isLoading,
items,
trendsLeadline,
} = this.props
const count = !!items ? items.count() : 0
const trendsLeadlineTitle = trendsLeadline ? trendsLeadline.get('title') : null
const trendsLeadlineImage = trendsLeadline ? trendsLeadline.get('image') : null
const trendsLeadlineUrl = trendsLeadline ? trendsLeadline.get('trends_url') : null
if ((count === 0 && isFetched) && (!trendsLeadlineImage || !trendsLeadlineTitle || !trendsLeadlineTitle)) return null
const leadlineButtonClasses = CX({
d: 1,
cursorPointer: 1,
noUnderline: 1,
bgPrimary: 1,
w100PC: 1,
border1PX: 1,
borderColorSecondary: 1,
radiusSmall: 1,
overflowHidden: 1,
bgSubtle_onHover: 1,
mb5: 1,
mt10: count > 0,
})
return (
<PanelLayout
title='Headlines'
subtitle='Breaking headlines from Gab Trends'
>
{
count > 0 &&
items.slice(0, 5).map((headline, i) => (
<Button
isText
backgroundColor='none'
color='primary'
className={[_s.d, _s.pb15].join(' ')}
href={headline.get('trends_url')}
key={`headline-news-item-${i}`}
>
<Text color='inherit' size='small'>
{headline.get('title')}
</Text>
</Button>
))
}
{
!!trendsLeadlineImage && !!trendsLeadlineTitle && trendsLeadlineUrl &&
<Button
noClasses
href={trendsLeadlineUrl}
className={leadlineButtonClasses}
>
<Image
src={trendsLeadlineImage}
/>
<Text className={[_s.px15, _s.py15, _s.w100PC, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
{trendsLeadlineTitle}
</Text>
</Button>
}
</PanelLayout>
)
}
}
const mapStateToProps = (state) => ({
isLoading: state.getIn(['news', 'trends_headlines', 'isLoading']),
isFetched: state.getIn(['news', 'trends_headlines', 'isFetched']),
items: state.getIn(['news', 'trends_headlines', 'items']),
trendsLeadline: state.getIn(['news', 'trends_leadline', 'items']),
})
TrendsHeadlinesPanel.propTypes = {
isLoading: PropTypes.bool,
isFetched: PropTypes.bool,
items: ImmutablePropTypes.list.isRequired,
}
export default connect(mapStateToProps)(TrendsHeadlinesPanel)