Updated explore page functionality

• Updated:
- explore page functionality

app/javascript/gabsocial/actions/timelines.js

@@ -166,6 +166,7 @@ export function expandTimeline(timelineId, path, params = {}, done = noOp) {
 };
 
 export const expandHomeTimeline = ({ maxId } = {}, done = noOp) => expandTimeline('home', '/api/v1/timelines/home', { max_id: maxId }, done);
+export const expandExploreTimeline = ({ maxId, sortBy } = {}, done = noOp) => expandTimeline('explore', '/api/v1/timelines/explore', { max_id: maxId, sort_by: sortBy }, done);
 export const expandProTimeline = ({ maxId } = {}, done = noOp) => expandTimeline('pro', '/api/v1/timelines/pro', { max_id: maxId }, done);
 export const expandCommunityTimeline = ({ maxId, onlyMedia } = {}, done = noOp) => expandTimeline(`community${onlyMedia ? ':media' : ''}`, '/api/v1/timelines/public', { max_id: maxId, only_media: !!onlyMedia }, done);
 export const expandAccountTimeline = (accountId, { maxId, withReplies, commentsOnly } = {}) => expandTimeline(`account:${accountId}${withReplies ? ':with_replies' : ''}${commentsOnly ? ':comments_only' : ''}`, `/api/v1/accounts/${accountId}/statuses`, { only_comments: commentsOnly, exclude_replies: (!withReplies && !commentsOnly), max_id: maxId });

app/javascript/gabsocial/features/explore_timeline.js

@@ -0,0 +1,130 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { injectIntl, defineMessages } from 'react-intl'
+import { List as ImmutableList } from 'immutable'
+import { me } from '../initial_state'
+import {
+	clearTimeline,
+	expandExploreTimeline,
+} from '../actions/timelines'
+import {
+	setGroupTimelineSort,
+} from '../actions/groups'
+import {
+	GROUP_TIMELINE_SORTING_TYPE_HOT,
+	GROUP_TIMELINE_SORTING_TYPE_NEWEST,
+} from '../constants'
+import getSortBy from '../utils/group_sort_by'
+import Text from '../components/text'
+import StatusList from '../components/status_list'
+import GroupSortBlock from '../components/group_sort_block'
+
+class ExploreTimeline extends React.PureComponent {
+
+	state = {
+		//keep track of loads for if no user, 
+		//only allow 2 loads before showing sign up msg
+		loadCount: 0,
+	}
+
+	componentDidMount() {
+		const {
+			sortByValue,
+			sortByTopValue,
+		} = this.props
+
+		if (sortByValue !== GROUP_TIMELINE_SORTING_TYPE_HOT) {
+			this.props.setFeaturedTop()
+		} else {
+			const sortBy = getSortBy(sortByValue, sortByTopValue)
+			this.props.onExpandExploreTimeline({ sortBy })
+		}
+	}
+
+	componentDidUpdate(prevProps) {
+		if (prevProps.sortByValue !== this.props.sortByValue || 
+				prevProps.sortByTopValue !== this.props.sortByTopValue) {
+				this.props.onClearTimeline('explore')
+				this.handleLoadMore()
+    }
+  }
+
+	handleLoadMore = (maxId) => {
+		const {
+			sortByValue,
+			sortByTopValue,
+		} = this.props
+		const { loadCount } = this.state
+
+		if (!!maxId && !me) {
+			this.setState({ loadCount: this.state.loadCount + 1 })
+			if (loadCount >= 2) return false
+		} else if (!maxId && loadCount !== 0) {
+			this.setState({ loadCount: 0 })
+		}
+
+		const sortBy = getSortBy(sortByValue, sortByTopValue)
+		const options = { sortBy, maxId }
+
+		this.props.onExpandExploreTimeline(options)
+	}
+ 
+	render() {
+		const { intl } = this.props
+		const { loadCount } = this.state
+
+		const canLoadMore = loadCount < 2 && !me || !!me
+
+		return (
+			<React.Fragment>
+				<GroupSortBlock collectionType='featured' />
+				<StatusList
+					scrollKey='explore-timeline'
+					timelineId='explore'
+					onLoadMore={canLoadMore ? this.handleLoadMore : undefined}
+					emptyMessage={intl.formatMessage(messages.empty)}
+				/>
+			</React.Fragment>
+		)
+	}
+
+}
+
+const messages = defineMessages({
+	empty: { id: 'empty_column.group_collection_timeline', defaultMessage: 'There are no gabs to display.' },
+})
+
+const mapStateToProps = (state) => ({
+	sortByValue: state.getIn(['group_lists', 'sortByValue']),
+	sortByTopValue: state.getIn(['group_lists', 'sortByTopValue']),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+	onClearTimeline(timeline) {
+		dispatch(clearTimeline(timeline))
+	},
+	onExpandExploreTimeline(options) {
+		dispatch(expandExploreTimeline(options))
+	},
+	setFeaturedTop() {
+		dispatch(setGroupTimelineSort(GROUP_TIMELINE_SORTING_TYPE_HOT))
+	},
+	setMemberNewest() {
+		dispatch(setGroupTimelineSort(GROUP_TIMELINE_SORTING_TYPE_NEWEST))
+	},
+})
+
+ExploreTimeline.propTypes = {
+	params: PropTypes.object.isRequired,
+	onClearTimeline: PropTypes.func.isRequired,
+	onExpandExploreTimeline: PropTypes.func.isRequired,
+	setFeaturedTop: PropTypes.func.isRequired,
+	setMemberNewest: PropTypes.func.isRequired,
+	intl: PropTypes.object.isRequired,
+	sortByValue: PropTypes.string.isRequired,
+	sortByTopValue: PropTypes.string,
+	hasStatuses: PropTypes.bool.isRequired,
+}
+
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ExploreTimeline))

app/javascript/gabsocial/features/ui/ui.js

@@ -56,6 +56,7 @@ import {
   CommunityTimeline,
   Compose,
   DMCA,
+  ExploreTimeline,
   // Filters,
   Followers,
   Following,
@@ -170,7 +171,7 @@ class SwitchingArea extends React.PureComponent {
         }
         {
           !me &&
-          <WrappedRoute path='/' exact publicRoute page={ExplorePage} component={GroupCollectionTimeline} content={children} componentParams={{ title: 'Gab.com', collectionType: 'featured' }} />
+          <WrappedRoute path='/' exact publicRoute page={ExplorePage} component={ExploreTimeline} content={children} componentParams={{ title: 'Gab.com' }} />
         }
 
         <WrappedRoute path='/home' exact page={HomePage} component={HomeTimeline} content={children} />
@@ -184,7 +185,7 @@ class SwitchingArea extends React.PureComponent {
         <WrappedRoute path='/about/sales' publicRoute exact page={AboutPage} component={TermsOfSale} content={children} componentParams={{ title: 'Terms of Sale' }} />
         <WrappedRoute path='/about/tos' publicRoute exact page={AboutPage} component={TermsOfService} content={children} componentParams={{ title: 'Terms of Service' }} />
 
-        <WrappedRoute path='/explore' publicRoute page={ExplorePage} component={GroupCollectionTimeline} content={children} componentParams={{ title: 'Explore', collectionType: 'featured' }} />
+        <WrappedRoute path='/explore' publicRoute page={ExplorePage} component={ExploreTimeline} content={children} componentParams={{ title: 'Explore' }} />
         <WrappedRoute path='/news' publicRoute page={NewsPage} component={News} content={children} componentParams={{ title: 'News' }} />
         <WrappedRoute path='/suggestions' exact page={BasicPage} component={Suggestions} content={children} componentParams={{ title: 'Suggestions' }} />
 

app/javascript/gabsocial/features/ui/util/async_components.js

@@ -22,6 +22,7 @@ export function EditShortcutsModal() { return import(/* webpackChunkName: "compo
 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 ExploreTimeline() { return import(/* webpackChunkName: "features/explore_timeline" */'../../explore_timeline') }
 export function FeaturedGroupsInjection() { return import(/* webpackChunkName: "components/featured_groups_injection" */'../../../components/timeline_injections/featured_groups_injection') }
 export function Followers() { return import(/* webpackChunkName: "features/followers" */'../../followers') }
 export function Following() { return import(/* webpackChunkName: "features/following" */'../../following') }