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

97 lines
2.8 KiB
JavaScript
Raw Normal View History

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.get('title')
const trendsLeadlineImage = trendsLeadline.get('image')
const trendsLeadlineUrl = trendsLeadline.get('trends_url')
if ((count === 0 && isFetched) && (!trendsLeadlineTitle || !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='Headlines about yadda'
>
{
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>
))
}
<Button
noClasses
href={''}
className={leadlineButtonClasses}
>
<Image
src='https://trends.gab.com/image/5fa5d8badf30e602384b08ed'
/>
<Text className={[_s.px15, _s.py15, _s.w100PC, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
Lawsuit: At Least 21K Dead People on Pennsylvania Voter Rolls
</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']),
})
TrendsHeadlinesPanel.propTypes = {
isLoading: PropTypes.bool,
isFetched: PropTypes.bool,
items: ImmutablePropTypes.list.isRequired,
}
export default connect(mapStateToProps)(TrendsHeadlinesPanel)