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 { withRouter } from 'react-router-dom'
|
||||||
import isObject from 'lodash.isobject'
|
import throttle from 'lodash.throttle'
|
||||||
import queryString from 'query-string'
|
import {
|
||||||
import { fetchGabTrends } from '../actions/gab_trends'
|
expandHomeTimeline,
|
||||||
import { BREAKPOINT_EXTRA_SMALL } from '../constants'
|
forceDequeueTimeline,
|
||||||
import Block from '../components/block'
|
} from '../actions/timelines'
|
||||||
import Button from '../components/button'
|
import StatusList from '../components/status_list'
|
||||||
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({
|
const messages = defineMessages({
|
||||||
// title: { id: 'trends.title', defaultMessage: 'Trending right now' },
|
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) => ({
|
const mapStateToProps = (state) => ({
|
||||||
isError: state.getIn(['gab_trends', 'partner', 'isError']),
|
isPartial: state.getIn(['timelines', 'home', 'isPartial']),
|
||||||
isLoading: state.getIn(['gab_trends', 'partner', 'isLoading']),
|
|
||||||
items: state.getIn(['gab_trends', 'partner', 'items']),
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const mapDispatchToProps = (dispatch) => ({
|
const mapDispatchToProps = (dispatch) => ({
|
||||||
onfetchGabTrends: () => dispatch(fetchGabTrends('partner')),
|
onExpandHomeTimeline(options) {
|
||||||
|
if (!options) dispatch(forceDequeueTimeline('home'))
|
||||||
|
dispatch(expandHomeTimeline(options))
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
export default
|
export default
|
||||||
|
@injectIntl
|
||||||
@withRouter
|
@withRouter
|
||||||
@connect(mapStateToProps, mapDispatchToProps)
|
@connect(mapStateToProps, mapDispatchToProps)
|
||||||
class Explore extends PureComponent {
|
class Explore extends PureComponent {
|
||||||
|
|
||||||
static contextTypes = {
|
|
||||||
router: PropTypes.object.isRequired,
|
|
||||||
}
|
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
isError: PropTypes.bool,
|
isPartial: PropTypes.bool,
|
||||||
isLoading: PropTypes.bool,
|
onExpandHomeTimeline: PropTypes.func.isRequired,
|
||||||
items: PropTypes.object,
|
|
||||||
onfetchGabTrends: PropTypes.func.isRequired,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
state = {
|
componentDidMount () {
|
||||||
activeDomain: null,
|
this._checkIfReloadNeeded(false, this.props.isPartial)
|
||||||
}
|
}
|
||||||
|
|
||||||
updateOnProps = [
|
componentDidUpdate (prevProps) {
|
||||||
'items',
|
this._checkIfReloadNeeded(prevProps.isPartial, this.props.isPartial)
|
||||||
'isLoading',
|
|
||||||
'isError',
|
//Check if clicked on "home" button, if so, reload
|
||||||
]
|
if (prevProps.location.key !== this.props.location.key &&
|
||||||
|
prevProps.location.pathname === '/home' &&
|
||||||
componentDidUpdate(prevProps) {
|
this.props.location.pathname === '/home') {
|
||||||
if (this.props.location !== prevProps.location) {
|
this.handleReload()
|
||||||
this.setActiveDomain(this.props.location)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentWillUnmount () {
|
||||||
this.props.onfetchGabTrends()
|
this._stopPolling()
|
||||||
this.setActiveDomain(this.props.location)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
setActiveDomain(location) {
|
handleLoadMore = (maxId) => {
|
||||||
const { search } = location
|
this.props.onExpandHomeTimeline({ maxId })
|
||||||
const qp = queryString.parse(search)
|
}
|
||||||
const domain = qp.domain ? `${qp.domain}`.toLowerCase() : undefined
|
|
||||||
|
|
||||||
if (!!domain) {
|
handleReload = throttle(() => {
|
||||||
this.setState({ activeDomain: domain })
|
this.props.onExpandHomeTimeline()
|
||||||
} else {
|
}, 5000)
|
||||||
this.setState({ activeDomain: null })
|
|
||||||
|
_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 () {
|
render () {
|
||||||
const {
|
const { intl } = this.props
|
||||||
intl,
|
|
||||||
isError,
|
|
||||||
isLoading,
|
|
||||||
items,
|
|
||||||
} = this.props
|
|
||||||
const { activeDomain } = this.state
|
|
||||||
|
|
||||||
if (isError || !isObject(items)) {
|
const emptyMessage = intl.formatMessage(messages.empty)
|
||||||
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 (
|
return (
|
||||||
<div className={[_s.default, _s.width100PC].join(' ')}>
|
<StatusList
|
||||||
<Block>
|
scrollKey='home_timeline'
|
||||||
<div className={[_s.default, _s.width100PC, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
|
onLoadMore={this.handleLoadMore}
|
||||||
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
|
timelineId='home'
|
||||||
<TabBar tabs={domainTabs} />
|
emptyMessage={emptyMessage}
|
||||||
</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>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user