gab-social/app/javascript/gabsocial/features/explore.js

231 lines
7.0 KiB
JavaScript

import { withRouter } from 'react-router-dom'
import isObject from 'lodash.isobject'
import queryString from 'query-string'
import { fetchGabTrends } from '../actions/gab_trends'
import { BREAKPOINT_EXTRA_SMALL } from '../constants'
import Block from '../components/block'
import Button from '../components/button'
import ColumnIndicator from '../components/column_indicator'
import Heading from '../components/heading'
import Icon from '../components/icon'
import Pills from '../components/pills'
import Responsive from './ui/util/responsive_component';
import TabBar from '../components/tab_bar'
import Text from '../components/text'
import TrendsItem from '../components/trends_item'
// const messages = defineMessages({
// title: { id: 'trends.title', defaultMessage: 'Trending right now' },
// })
const mapStateToProps = (state) => ({
isError: state.getIn(['gab_trends', 'partner', 'isError']),
isLoading: state.getIn(['gab_trends', 'partner', 'isLoading']),
items: state.getIn(['gab_trends', 'partner', 'items']),
})
const mapDispatchToProps = (dispatch) => ({
onfetchGabTrends: () => dispatch(fetchGabTrends('partner')),
})
export default
@withRouter
@connect(mapStateToProps, mapDispatchToProps)
class Explore extends PureComponent {
static contextTypes = {
router: PropTypes.object.isRequired,
}
static propTypes = {
intl: PropTypes.object.isRequired,
isError: PropTypes.bool,
isLoading: PropTypes.bool,
items: PropTypes.object,
onfetchGabTrends: PropTypes.func.isRequired,
}
state = {
activeDomain: null,
}
updateOnProps = [
'items',
'isLoading',
'isError',
]
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
this.setActiveDomain(this.props.location)
}
}
componentDidMount() {
this.props.onfetchGabTrends()
this.setActiveDomain(this.props.location)
}
setActiveDomain(location) {
const { search } = location
const qp = queryString.parse(search)
const domain = qp.domain ? `${qp.domain}`.toLowerCase() : undefined
if (!!domain) {
this.setState({ activeDomain: domain })
} else {
this.setState({ activeDomain: null })
}
}
render () {
const {
intl,
isError,
isLoading,
items,
} = this.props
const { activeDomain } = this.state
if (isError || !isObject(items)) {
return <div>error</div>
}
let domainExists = !activeDomain
let headline, headlineLink
let todaysTopTitle
let leadHeadlines = []
let todaysTop = []
let domainTabs = []
try {
headline = items.headline.title
headlineLink = items.headline.href
leadHeadlines = items.leadHeadlines
if (activeDomain) {
const domainBlock = items.trackedDomains.find((d) => `${d.domain}`.toLowerCase() === activeDomain)
if (domainBlock) domainExists = true
todaysTop = domainBlock.topUrls
todaysTopTitle = domainBlock.title
} else {
todaysTop = items.trending.topUrls
todaysTopTitle = "Today's Top"
}
const domains = items.trackedDomains
domainTabs = domains.map((block) => ({
title: block.title,
to: `/explore?domain=${block.domain}`,
onClick: () => {},
active: activeDomain === `${block.domain}`.toLowerCase(),
}))
domainTabs = [
{
title: "Today's Top",
to: `/explore`,
onClick: () => {},
active: !activeDomain,
},
...domainTabs,
]
} catch (error) {
return (
<div className={[_s.default, _s.width100PC].join(' ')}>
<Block>
<ColumnIndicator type='loading' />
</Block>
</div>
)
}
if (!domainExists) {
return <div>error</div>
}
return (
<div className={[_s.default, _s.width100PC].join(' ')}>
<Block>
<div className={[_s.default, _s.width100PC, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
<TabBar tabs={domainTabs} />
</Responsive>
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.default, _s.width100PC, _s.pt10, _s.pb5].join(' ')}>
<Pills pills={domainTabs} />
</div>
</Responsive>
</div>
<div className={[_s.default, _s.px15].join(' ')}>
{
!activeDomain &&
<div className={[_s.default, _s.py15, _s.mt15, _s.mb15].join(' ')}>
<Heading size='h1'>
<a href={`https://trends.gab.com/trend?url=${headlineLink}`} className={[_s.noUnderline, _s.colorPrimary].join(' ')}>
{headline}
</a>
</Heading>
</div>
}
{
!activeDomain && leadHeadlines.length > 0 &&
<div className={[_s.default, _s.mb15].join(' ')}>
<div className={[_s.default, _s.px15, _s.py10, _s.borderBottom1PX, _s.bgSubtle, _s.borderColorSecondary, _s.justifyContentCenter].join(' ')}>
<Heading size='h2'>
<Icon id='trends' className={[_s.mr10].join(' ')} size='18px' />
Headlines
</Heading>
</div>
{
leadHeadlines.map((lead) => (
<Button
isText
backgroundColor='none'
color='primary'
className={[_s.default, _s.py7].join(' ')}
href={`https://trends.gab.com/trend?url=${lead.href}`}
>
<Text>
{lead.title}
</Text>
</Button>
))
}
</div>
}
<div>
<div className={[_s.default, _s.px15, _s.mt15, _s.py10, _s.borderBottom1PX, _s.bgSubtle, _s.borderColorSecondary, _s.justifyContentCenter].join(' ')}>
<Heading size='h2'>
<Icon id='trends' className={[_s.mr10].join(' ')} size='18px' />
{todaysTopTitle}
</Heading>
</div>
<div className={[_s.default, _s.py10].join(' ')}>
{
todaysTop.map((block, i) => (
<TrendsItem
key={`explore-trending-item-${i}`}
index={i + 1}
title={block.pagePreview.title}
author={block.domain.domain}
description={block.pagePreview.description}
url={`https://trends.gab.com/trend?url=${block.pagePreview.url}`}
date={block.created}
isLast={todaysTop.length - 1 === i}
/>
))
}
</div>
</div>
</div>
</Block>
</div>
)
}
}