diff --git a/app/javascript/gabsocial/features/news.js b/app/javascript/gabsocial/features/news.js new file mode 100644 index 00000000..b7afb488 --- /dev/null +++ b/app/javascript/gabsocial/features/news.js @@ -0,0 +1,230 @@ +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 News 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
error
+ } + + 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 ( +
+ + + +
+ ) + } + + if (!domainExists) { + return
error
+ } + + return ( +
+ +
+ + + + +
+ +
+ +
+ +
+ { + !activeDomain && +
+ + + {headline} + + +
+ } + + { + !activeDomain && leadHeadlines.length > 0 && +
+
+ + + Headlines + +
+ { + leadHeadlines.map((lead) => ( + + )) + } +
+ } + +
+
+ + + {todaysTopTitle} + +
+
+ { + todaysTop.map((block, i) => ( + + )) + } +
+
+ +
+ +
+ ) + } + +} \ No newline at end of file diff --git a/app/javascript/gabsocial/pages/news_page.js b/app/javascript/gabsocial/pages/news_page.js new file mode 100644 index 00000000..48e6d7c8 --- /dev/null +++ b/app/javascript/gabsocial/pages/news_page.js @@ -0,0 +1,39 @@ +import PageTitle from '../features/ui/util/page_title' +import DefaultLayout from '../layouts/default_layout' +import ProgressPanel from '../components/panel/progress_panel' +import VerifiedAccountsPanel from '../components/panel/verified_accounts_panel' +import ShopPanel from '../components/panel/shop_panel' +import SignupPanel from '../components/panel/sign_up_panel' +import LinkFooter from '../components/link_footer' + +export default class NewsPage extends PureComponent { + + static propTypes = { + title: PropTypes.string.isRequired, + children: PropTypes.node.isRequired, + } + + render() { + const { children, title } = this.props + + return ( + , + , + , + , + , + ]} + > + + {children} + + ) + } + +}