Updated News feature, NewsPage with new design, features

• Updated:
- News feature, NewsPage with new design, features

• Todo:
- Complete functionality in both News, NewsView for mobile and expanding rss feeds, lazy loading
This commit is contained in:
mgabdev 2020-11-06 23:34:23 -06:00
parent e3388749f4
commit 64ea4c5675
3 changed files with 96 additions and 215 deletions

View File

@ -1,222 +1,97 @@
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import isObject from 'lodash.isobject'
import queryString from 'query-string'
import { fetchGabTrends } from '../actions/gab'
import throttle from 'lodash.throttle'
import { fetchPopularLinks } from '../actions/links'
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 PreviewCardItem from '../components/preview_card_item'
import ResponsiveClassesComponent from './ui/util/responsive_classes_component'
import WrappedBundle from './ui/util/wrapped_bundle'
import {
GabNewsPanel,
LatestFromGabPanel,
PopularLinksPanel,
TrendsBreakingPanel,
TrendsFeedsPanel,
TrendsHeadlinesPanel,
TrendsRSSPanel,
} from './ui/util/async_components'
class News extends React.PureComponent {
static contextTypes = {
router: PropTypes.object.isRequired,
}
state = {
activeDomain: null,
}
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
this.setActiveDomain(this.props.location)
}
lazyLoaded: false,
}
componentDidMount() {
this.props.onfetchGabTrends()
this.setActiveDomain(this.props.location)
this.window = window
this.documentElement = document.scrollingElement || document.documentElement
this.window.addEventListener('scroll', this.handleScroll)
}
setActiveDomain(location) {
const { search } = location
const qp = queryString.parse(search)
const domain = qp.domain ? `${qp.domain}`.toLowerCase() : undefined
componentWillUnmount() {
this.detachScrollListener()
}
if (!!domain) {
this.setState({ activeDomain: domain })
} else {
this.setState({ activeDomain: null })
detachScrollListener = () => {
this.window.removeEventListener('scroll', this.handleScroll)
}
handleScroll = throttle(() => {
if (this.window) {
const { scrollTop } = this.documentElement
if (scrollTop > 25 && !this.state.lazyLoaded) {
this.setState({ lazyLoaded: true })
this.detachScrollListener()
}
}
}
}, 150, {
trailing: true,
})
render() {
const {
intl,
isError,
isLoading,
items,
} = this.props
const { activeDomain } = this.state
const { children } = this.props
const { lazyLoaded } = 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: `/news?domain=${block.domain}`,
onClick: () => { },
active: activeDomain === `${block.domain}`.toLowerCase(),
}))
domainTabs = [
{
title: "Today's Top",
to: `/news`,
onClick: () => { },
active: !activeDomain,
},
...domainTabs,
]
} catch (error) {
return (
<div className={[_s.d, _s.w100PC].join(' ')}>
<Block>
<ColumnIndicator type='loading' />
</Block>
</div>
)
}
if (!domainExists) {
return <div>error</div>
}
// const orderXS = ['headlines', 'trending_links', 'breaking', 'latest_from_gab', 'gab_news', '...']
return (
<div className={[_s.d, _s.w100PC].join(' ')}>
<Block>
<div className={[_s.d, _s.w100PC, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
<TabBar tabs={domainTabs} />
</Responsive>
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.d, _s.w100PC, _s.pt10, _s.pb5].join(' ')}>
<Pills pills={domainTabs} />
</div>
</Responsive>
</div>
<div className={[_s.d, _s.px15].join(' ')}>
{
!activeDomain &&
<div className={[_s.d, _s.py15, _s.mt15, _s.mb15].join(' ')}>
<Heading size='h1'>
<a href={`https://trends.gab.com/trend?url=${headlineLink}`} className={[_s.noUnderline, _s.cPrimary].join(' ')}>
{headline}
</a>
</Heading>
</div>
}
<ResponsiveClassesComponent
classNames={[_s.d, _s.flexRow, _s.w100PC, _s.overflowHidden].join(' ')}
classNamesXS={[_s.d, _s.pt15].join(' ')}
>
<ResponsiveClassesComponent
classNames={[_s.d, _s.pr15, _s.w50PC].join(' ')}
classNamesXS={[_s.d, _s.w100PC].join(' ')}
>
<WrappedBundle component={TrendsHeadlinesPanel} />
<WrappedBundle component={TrendsBreakingPanel} componentParams={{ hideReadMore: 1 }} />
<WrappedBundle component={LatestFromGabPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />
</ResponsiveClassesComponent>
<ResponsiveClassesComponent
classNames={[_s.d, _s.w50PC].join(' ')}
classNamesXS={[_s.d, _s.w100PC].join(' ')}
>
<WrappedBundle component={PopularLinksPanel} />
<WrappedBundle component={TrendsFeedsPanel} />
<WrappedBundle component={GabNewsPanel} componentParams={{ isLazy: true, shouldLoad: lazyLoaded }} />
</ResponsiveClassesComponent>
{
!activeDomain && leadHeadlines.length > 0 &&
<div className={[_s.d, _s.mb15].join(' ')}>
<div className={[_s.d, _s.px15, _s.py10, _s.borderBottom1PX, _s.bgSubtle, _s.borderColorSecondary, _s.jcCenter].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.d, _s.py7].join(' ')}
href={`https://trends.gab.com/trend?url=${lead.href}`}
>
<Text>
{lead.title}
</Text>
</Button>
))
}
</div>
}
</ResponsiveClassesComponent>
<div>
<div className={[_s.d, _s.px15, _s.mt15, _s.py10, _s.borderBottom1PX, _s.bgSubtle, _s.borderColorSecondary, _s.jcCenter].join(' ')}>
<Heading size='h2'>
<Icon id='trends' className={[_s.mr10].join(' ')} size='18px' />
{todaysTopTitle}
</Heading>
</div>
<div className={[_s.d, _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>
)
}
}
const mapStateToProps = (state) => ({
isError: state.getIn(['gab', 'partner', 'isError']),
isLoading: state.getIn(['gab', 'partner', 'isLoading']),
items: state.getIn(['gab', 'partner', 'items']),
})
const mapDispatchToProps = (dispatch) => ({
onfetchGabTrends: () => dispatch(fetchGabTrends('partner')),
})
News.propTypes = {
intl: PropTypes.object.isRequired,
isError: PropTypes.bool,
isLoading: PropTypes.bool,
items: PropTypes.object,
onfetchGabTrends: PropTypes.func.isRequired,
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(News))
export default News

View File

@ -0,0 +1,27 @@
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { TRENDS_RSS_SOURCES } from '../constants'
import WrappedBundle from './ui/util/wrapped_bundle'
import { TrendsRSSPanel } from './ui/util/async_components'
import ColumnIndicator from '../components/column_indicator'
class NewsView extends React.PureComponent {
render() {
const { params: { trendsRSSId } } = this.props
console.log("trendsRSSId:", trendsRSSId)
const exists = !!TRENDS_RSS_SOURCES.find((block) => block.id === trendsRSSId)
if (!exists) return <ColumnIndicator type='missing' />
return (
<div className={[_s.d, _s.w100PC].join(' ')}>
<WrappedBundle component={TrendsRSSPanel} />
</div>
)
}
}
export default NewsView

View File

@ -1,39 +1,18 @@
import React from 'react'
import PropTypes from 'prop-types'
import PageTitle from '../features/ui/util/page_title'
import DefaultLayout from '../layouts/default_layout'
import WrappedBundle from '../features/ui/util/wrapped_bundle'
import {
LinkFooter,
ProgressPanel,
ShopPanel,
SignUpPanel,
UserSuggestionsPanel,
} from '../features/ui/util/async_components'
import NewsLayout from '../layouts/news_layout'
class NewsPage extends React.PureComponent {
render() {
const { children, title } = this.props
const { children } = this.props
return (
<DefaultLayout
page='news'
title={title}
noComposeButton
showBackBtn
noRightSidebar
layout={[
SignUpPanel,
ProgressPanel,
<WrappedBundle component={UserSuggestionsPanel} componentParams={{ suggestionType: 'verified' }} />,
ShopPanel,
LinkFooter,
]}
>
<PageTitle path={title} />
<NewsLayout>
<PageTitle path='News' />
{children}
</DefaultLayout>
</NewsLayout>
)
}