random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated name of TrendsPanel to TrendsBreakingPanel

Browse Source 
• Updated:
- name of TrendsPanel to TrendsBreakingPanel
- removed ScrollableList from TrendsPanel
This commit is contained in:
mgabdev
2020-11-06 23:19:04 -06:00
parent c1cc0e6355
commit 34f1f778cd
12 changed files with 122 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
app/javascript/gabsocial/components/panel/trends_breaking_panel.js Normal file
View File

@@ -0,0 +1,102 @@
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { injectIntl, defineMessages } from 'react-intl'
import ImmutablePureComponent from 'react-immutable-pure-component'
import ImmutablePropTypes from 'react-immutable-proptypes'
import { fetchGabTrends } from '../../actions/news'
import PanelLayout from './panel_layout'
import TrendsItem from '../trends_item'
import TrendsItemPlaceholder from '../placeholder/trends_item_placeholder'
class TrendsBreakingPanel extends ImmutablePureComponent {
state = {
fetched: false,
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.shouldLoad && !prevState.fetched) {
return { fetched: true }
}
return null
}
componentDidUpdate(prevProps, prevState) {
if (!prevState.fetched && this.state.fetched && this.props.isLazy) {
this.props.dispatch(fetchGabTrends())
}
}
componentDidMount() {
if (!this.props.isLazy) {
this.props.dispatch(fetchGabTrends())
this.setState({ fetched: true })
}
}
render() {
const {
intl,
isLoading,
items,
hideReadMore,
} = this.props
const { fetched } = this.state
const count = !!items ? items.count() : 0
if (count === 0 && fetched) return null
return (
<PanelLayout
noPadding
title={intl.formatMessage(messages.title)}
headerButtonTitle={!hideReadMore ? intl.formatMessage(messages.readMore) : undefined}
headerButtonTo='/news#breaking'
footerButtonTitle={!hideReadMore ? intl.formatMessage(messages.readMore) : undefined}
footerButtonTo='/news#breaking'
>
{
count > 0 &&
items.slice(0, 5).map((trend, i) => (
<TrendsItem key={`gab-trend-panel-${i}`} trend={trend} />
))
}
{
count === 0 &&
<React.Fragment>
<TrendsItemPlaceholder />
<TrendsItemPlaceholder />
<TrendsItemPlaceholder />
<TrendsItemPlaceholder />
<TrendsItemPlaceholder />
</React.Fragment>
}
</PanelLayout>
)
}
}
const messages = defineMessages({
title: { id: 'trends.breaking_title', defaultMessage: 'Breaking right now' },
readMore: { id: 'status.read_more', defaultMessage: 'Read more' },
})
const mapStateToProps = (state) => ({
isLoading: state.getIn(['news', 'trends_breaking', 'isLoading']),
isFetched: state.getIn(['news', 'trends_breaking', 'isFetched']),
items: state.getIn(['news', 'trends_breaking', 'items']),
})
TrendsBreakingPanel.propTypes = {
intl: PropTypes.object.isRequired,
isLazy: PropTypes.bool,
isLoading: PropTypes.bool,
isFetched: PropTypes.bool,
items: ImmutablePropTypes.list.isRequired,
hideReadMore: PropTypes.bool,
}
export default injectIntl(connect(mapStateToProps)(TrendsBreakingPanel))

118
app/javascript/gabsocial/components/panel/trends_panel.js
View File

@@ -1,118 +0,0 @@
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { injectIntl, defineMessages } from 'react-intl'
import ImmutablePureComponent from 'react-immutable-pure-component'
import ImmutablePropTypes from 'react-immutable-proptypes'
import { fetchGabTrends } from '../../actions/gab'
import PanelLayout from './panel_layout'
import ScrollableList from '../scrollable_list'
import TrendsItem from '../trends_item'
import TrendsItemPlaceholder from '../placeholder/trends_item_placeholder'
class TrendsPanel extends ImmutablePureComponent {
updateOnProps = [
'items',
'isLazy',
'isLoading',
'isError',
]
state = {
fetched: false,
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.shouldLoad && !prevState.fetched) {
return { fetched: true }
}
return null
}
componentDidUpdate(prevProps, prevState) {
if (!prevState.fetched && this.state.fetched) {
this.props.onfetchGabTrends()
}
}
componentDidMount() {
if (!this.props.isLazy) {
this.props.onfetchGabTrends()
this.setState({ fetched: true })
}
}
render() {
const {
intl,
isError,
isLoading,
items,
} = this.props
const { fetched } = this.state
const count = !!items ? items.count() : 0
if (isError || (count === 0 && fetched)) return null
return (
<PanelLayout
noPadding
title={intl.formatMessage(messages.title)}
headerButtonTitle={intl.formatMessage(messages.readMore)}
headerButtonTo='/news'
footerButtonTitle={intl.formatMessage(messages.readMore)}
footerButtonTo='/news'
>
<ScrollableList
showLoading={isLoading}
placeholderComponent={TrendsItemPlaceholder}
placeholderCount={8}
scrollKey='trending-items'
>
{
items.slice(0, 8).map((trend, i) => (
<TrendsItem
key={`gab-trend-${i}`}
index={i + 1}
isLast={i === 7}
title={trend.get('title')}
description={trend.get('description')}
url={trend.get('url')}
author={trend.getIn(['author', 'name'], '')}
date={trend.get('date_published')}
/>
))
}
</ScrollableList>
</PanelLayout>
)
}
}
const messages = defineMessages({
title: { id: 'trends.title', defaultMessage: 'Trending right now' },
readMore: { id: 'status.read_more', defaultMessage: 'Read more' },
})
const mapStateToProps = (state) => ({
isError: state.getIn(['gab', 'feed', 'isError']),
isLoading: state.getIn(['gab', 'feed', 'isLoading']),
items: state.getIn(['gab', 'feed', 'items']),
})
const mapDispatchToProps = (dispatch) => ({
onfetchGabTrends: () => dispatch(fetchGabTrends('feed')),
})
TrendsPanel.propTypes = {
intl: PropTypes.object.isRequired,
isError: PropTypes.bool,
isLazy: PropTypes.bool,
isLoading: PropTypes.bool,
items: ImmutablePropTypes.list.isRequired,
onfetchGabTrends: PropTypes.func.isRequired,
}
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TrendsPanel))