- {title}
+ {correctedTitle}
@@ -132,7 +127,7 @@ export default class TrendingItem extends ImmutablePureComponent {
-
+
{
hovering &&
diff --git a/app/javascript/gabsocial/features/explore.js b/app/javascript/gabsocial/features/explore.js
new file mode 100644
index 00000000..892222e1
--- /dev/null
+++ b/app/javascript/gabsocial/features/explore.js
@@ -0,0 +1,221 @@
+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 Heading from '../components/heading'
+import Text from '../components/text'
+import TrendsItem from '../components/trends_item'
+import TabBar from '../components/tab_bar'
+import Pills from '../components/pills'
+import ColumnIndicator from '../components/column_indicator'
+import Responsive from './ui/util/responsive_component';
+
+// 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 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,
+ }
+
+ 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
+
+ console.log("domain: ", qp, domain)
+
+ if (!!domain) {
+ this.setState({ activeDomain: domain })
+ } else {
+ this.setState({ activeDomain: null })
+ }
+ }
+
+ render () {
+ const {
+ intl,
+ isError,
+ isLoading,
+ items,
+ } = this.props
+ const { activeDomain } = this.state
+
+ console.log("activeDomain:", activeDomain)
+ console.log("items:", items)
+
+ if (isError || !isObject(items)) {
+ return
error
+ }
+
+ let domainExists = !activeDomain
+ let headline, headlineLink
+ let todaysTopTitle
+ let leadHeadlines = []
+ let todaysTop = []
+ let domainTabs = []
+ try {
+ console.log("items.headline:", items.headline)
+
+ 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
+ }
+
+ console.log("domainTabs:", domainTabs)
+
+ return (
+
+
+
+
+
+
+ {
+ !activeDomain &&
+ leadHeadlines.map((lead) => (
+
+
+ {lead.title}
+
+
+ ))
+ }
+
+
+ {
+ !activeDomain &&
+
+ }
+
+
+
+
+ {todaysTopTitle}
+
+
+
+ {
+ todaysTop.map((block, i) => (
+
+ ))
+ }
+
+
+
+
+
+
+ )
+ }
+
+}
diff --git a/app/javascript/gabsocial/features/ui/ui.js b/app/javascript/gabsocial/features/ui/ui.js
index 70f80d6f..c0fb09ca 100644
--- a/app/javascript/gabsocial/features/ui/ui.js
+++ b/app/javascript/gabsocial/features/ui/ui.js
@@ -37,6 +37,7 @@ import BasicPage from '../../pages/basic_page'
import ModalPage from '../../pages/modal_page'
import SettingsPage from '../../pages/settings_page'
import ProPage from '../../pages/pro_page'
+import ExplorePage from '../../pages/explore_page'
import {
AccountGallery,
@@ -45,6 +46,7 @@ import {
BlockedDomains,
CommunityTimeline,
Compose,
+ Explore,
// Filters,
Followers,
Following,
@@ -149,6 +151,8 @@ class SwitchingArea extends PureComponent {
+
+
diff --git a/app/javascript/gabsocial/features/ui/util/async_components.js b/app/javascript/gabsocial/features/ui/util/async_components.js
index e0c77b52..c62bf7f8 100644
--- a/app/javascript/gabsocial/features/ui/util/async_components.js
+++ b/app/javascript/gabsocial/features/ui/util/async_components.js
@@ -17,6 +17,7 @@ export function EditProfileModal() { return import(/* webpackChunkName: "compone
export function EmbedModal() { return import(/* webpackChunkName: "modals/embed_modal" */'../../../components/modal/embed_modal') }
export function EmojiPicker() { return import(/* webpackChunkName: "emoji_picker" */'../../../components/emoji/emoji_picker') }
export function EmojiPickerPopover() { return import(/* webpackChunkName: "components/emoji_picker_popover" */'../../../components/popover/emoji_picker_popover') }
+export function Explore() { return import(/* webpackChunkName: "features/explore" */'../../explore') }
export function Followers() { return import(/* webpackChunkName: "features/followers" */'../../followers') }
export function Following() { return import(/* webpackChunkName: "features/following" */'../../following') }
export function FollowRequests() { return import(/* webpackChunkName: "features/follow_requests" */'../../follow_requests') }
diff --git a/app/javascript/gabsocial/pages/explore_page.js b/app/javascript/gabsocial/pages/explore_page.js
new file mode 100644
index 00000000..49923ec0
--- /dev/null
+++ b/app/javascript/gabsocial/pages/explore_page.js
@@ -0,0 +1,39 @@
+import { Fragment } from 'react'
+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 LinkFooter from '../components/link_footer'
+
+export default class ExplorePage extends PureComponent {
+
+ static propTypes = {
+ title: PropTypes.string.isRequired,
+ children: PropTypes.node.isRequired,
+ }
+
+ render() {
+ const { children, title } = this.props
+
+ return (
+
+
+
+
+
+
+ )}
+ >
+
+ {children}
+
+ )
+ }
+
+}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/reducers/gab_trends.js b/app/javascript/gabsocial/reducers/gab_trends.js
index c6523a45..58275d27 100644
--- a/app/javascript/gabsocial/reducers/gab_trends.js
+++ b/app/javascript/gabsocial/reducers/gab_trends.js
@@ -15,6 +15,11 @@ const initialState = ImmutableMap({
isLoading: false,
isError: false,
}),
+ partner: ImmutableMap({
+ items: {},
+ isLoading: false,
+ isError: false,
+ }),
})
const normalizeList = (state, type, items) => {
@@ -38,7 +43,17 @@ export default function (state = initialState, action) {
case GAB_TRENDS_RESULTS_FETCH_REQUEST:
return state.setIn([action.feedType, 'isLoading'], true);
case GAB_TRENDS_RESULTS_FETCH_SUCCESS:
- return normalizeList(state, action.feedType, action.items)
+ if (action.feedType === 'feed') {
+ return normalizeList(state, action.feedType, action.items.items)
+ } else if (action.feedType === 'partner') {
+ return state.set('partner', ImmutableMap({
+ items: action.items['trends'] || {},
+ isLoading: false,
+ isError: false,
+ }))
+ }
+
+ return state
case GAB_TRENDS_RESULTS_FETCH_FAIL:
return setListFailed(state, action.feedType)
default: