Updated Explore feature
• Updated: - Explore feature
This commit is contained in:
mgabdev
parent
0ad00a481e
commit
bf3b0554dd
@ -1,230 +1,99 @@
|
||||
import { defineMessages, injectIntl } from 'react-intl'
|
||||
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'
|
||||
import throttle from 'lodash.throttle'
|
||||
import {
|
||||
expandHomeTimeline,
|
||||
forceDequeueTimeline,
|
||||
} from '../actions/timelines'
|
||||
import StatusList from '../components/status_list'
|
||||
|
||||
// const messages = defineMessages({
|
||||
// title: { id: 'trends.title', defaultMessage: 'Trending right now' },
|
||||
// })
|
||||
const messages = defineMessages({
|
||||
title: { id: 'column.home', defaultMessage: 'Home' },
|
||||
empty: { id: 'empty_timeline.home', defaultMessage: 'Your home timeline is empty. Start following other users to receive their content here.' },
|
||||
})
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
isError: state.getIn(['gab_trends', 'partner', 'isError']),
|
||||
isLoading: state.getIn(['gab_trends', 'partner', 'isLoading']),
|
||||
items: state.getIn(['gab_trends', 'partner', 'items']),
|
||||
isPartial: state.getIn(['timelines', 'home', 'isPartial']),
|
||||
})
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
onfetchGabTrends: () => dispatch(fetchGabTrends('partner')),
|
||||
onExpandHomeTimeline(options) {
|
||||
if (!options) dispatch(forceDequeueTimeline('home'))
|
||||
dispatch(expandHomeTimeline(options))
|
||||
},
|
||||
})
|
||||
|
||||
export default
|
||||
@injectIntl
|
||||
@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,
|
||||
isPartial: PropTypes.bool,
|
||||
onExpandHomeTimeline: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
state = {
|
||||
activeDomain: null,
|
||||
componentDidMount () {
|
||||
this._checkIfReloadNeeded(false, this.props.isPartial)
|
||||
}
|
||||
|
||||
updateOnProps = [
|
||||
'items',
|
||||
'isLoading',
|
||||
'isError',
|
||||
]
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.location !== prevProps.location) {
|
||||
this.setActiveDomain(this.props.location)
|
||||
componentDidUpdate (prevProps) {
|
||||
this._checkIfReloadNeeded(prevProps.isPartial, this.props.isPartial)
|
||||
|
||||
//Check if clicked on "home" button, if so, reload
|
||||
if (prevProps.location.key !== this.props.location.key &&
|
||||
prevProps.location.pathname === '/home' &&
|
||||
this.props.location.pathname === '/home') {
|
||||
this.handleReload()
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.props.onfetchGabTrends()
|
||||
this.setActiveDomain(this.props.location)
|
||||
componentWillUnmount () {
|
||||
this._stopPolling()
|
||||
}
|
||||
|
||||
setActiveDomain(location) {
|
||||
const { search } = location
|
||||
const qp = queryString.parse(search)
|
||||
const domain = qp.domain ? `${qp.domain}`.toLowerCase() : undefined
|
||||
handleLoadMore = (maxId) => {
|
||||
this.props.onExpandHomeTimeline({ maxId })
|
||||
}
|
||||
|
||||
if (!!domain) {
|
||||
this.setState({ activeDomain: domain })
|
||||
} else {
|
||||
this.setState({ activeDomain: null })
|
||||
handleReload = throttle(() => {
|
||||
this.props.onExpandHomeTimeline()
|
||||
}, 5000)
|
||||
|
||||
_checkIfReloadNeeded (wasPartial, isPartial) {
|
||||
const { onExpandHomeTimeline } = this.props
|
||||
|
||||
if (!wasPartial && isPartial) {
|
||||
this.polling = setInterval(() => {
|
||||
onExpandHomeTimeline()
|
||||
}, 3000)
|
||||
} else if (wasPartial && !isPartial) {
|
||||
this._stopPolling()
|
||||
}
|
||||
}
|
||||
|
||||
_stopPolling () {
|
||||
if (this.polling) {
|
||||
clearInterval(this.polling)
|
||||
this.polling = null
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const {
|
||||
intl,
|
||||
isError,
|
||||
isLoading,
|
||||
items,
|
||||
} = this.props
|
||||
const { activeDomain } = this.state
|
||||
const { intl } = this.props
|
||||
|
||||
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>
|
||||
}
|
||||
const emptyMessage = intl.formatMessage(messages.empty)
|
||||
|
||||
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>
|
||||
<StatusList
|
||||
scrollKey='home_timeline'
|
||||
onLoadMore={this.handleLoadMore}
|
||||
timelineId='home'
|
||||
emptyMessage={emptyMessage}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user