Updated explore page functionality

• Updated:
- explore page functionality

app/controllers/api/v1/timelines/explore_controller.rb

+# frozen_string_literal: true
+
+class Api::V1::Timelines::ExploreController < Api::BaseController
+ before_action :set_sort_type
+ before_action :set_statuses
+
+ after_action :insert_pagination_headers, unless: -> {
+ @statuses.empty?
+ }
+
+ def show
+ if current_user
+ render json: @statuses,
+ each_serializer: REST::StatusSerializer,
+ relationships: StatusRelationshipsPresenter.new(@statuses, current_user.account_id)
+ else
+ render json: @statuses, each_serializer: REST::StatusSerializer
+ end
+ end
+
+ private
+
+ def set_sort_type
+ @sort_type = 'newest'
+ @sort_type = params[:sort_by] if [
+ 'hot',
+ 'newest',
+ 'recent',
+ 'top_today',
+ 'top_weekly',
+ 'top_monthly',
+ 'top_yearly',
+ 'top_all_time',
+ ].include? params[:sort_by]
+
+ return @sort_type
+ end
+
+ def set_statuses
+ @statuses = cached_explore_statuses
+ end
+
+ def cached_explore_statuses
+ cache_collection explore_statuses, Status
+ end
+
+ def explore_statuses
+ statuses = nil
+
+ date_limit = 30.days.ago
+ top_order = 'status_stats.favourites_count DESC, status_stats.reblogs_count DESC, status_stats.replies_count DESC'
+
+ if @sort_type == 'hot'
+ # : todo :
+ # unique groups
+ # unique users
+ date_limit = 8.hours.ago
+ elsif @sort_type == 'top_today'
+ date_limit = 24.hours.ago
+ elsif @sort_type == 'top_weekly'
+ date_limit = 7.days.ago
+ elsif @sort_type == 'top_monthly'
+ date_limit = 30.days.ago
+ elsif @sort_type == 'top_yearly'
+ date_limit = 1.year.ago
+ end
+
+ if current_account
+ if @sort_type == 'newest'
+ statuses = Status.with_public_visibility.where(
+ reply: false
+ ).paginate_by_id(
+ limit_param(DEFAULT_STATUSES_LIMIT),
+ params_slice(:max_id, :since_id, :min_id)
+ ).reject { |status| FeedManager.instance.filter?(:home, status, current_account.id) }
+ elsif @sort_type == 'recent'
+ statuses = Status.with_public_visibility.where(
+ reply: false
+ ).joins(:status_stat).where(
+ 'status_stats.replies_count > 0 OR status_stats.reblogs_count > 0 OR status_stats.favourites_count > 0'
+ ).order('status_stats.updated_at DESC').paginate_by_id(
+ limit_param(DEFAULT_STATUSES_LIMIT),
+ params_slice(:max_id, :since_id, :min_id)
+ ).reject { |status| FeedManager.instance.filter?(:home, status, current_account.id) }
+ elsif ['top_today', 'top_weekly', 'top_monthly', 'top_yearly', 'top_all_time', 'hot'].include? @sort_type
+ if @sort_type == 'top_all_time'
+ statuses = Status.unscoped.with_public_visibility.where(
+ reply: false
+ ).joins(:status_stat).order(top_order)
+ .paginate_by_id(
+ limit_param(DEFAULT_STATUSES_LIMIT),
+ params_slice(:max_id, :since_id, :min_id)
+ ).reject { |status| FeedManager.instance.filter?(:home, status, current_account.id) }
+ elsif @sort_type == 'hot'
+ statuses = Status.unscoped.with_public_visibility.where(
+ reply: false
+ ).where(
+ 'statuses.created_at > ?', date_limit
+ ).joins(:status_stat).order(top_order).paginate_by_id(
+ limit_param(DEFAULT_STATUSES_LIMIT),
+ params_slice(:max_id, :since_id, :min_id)
+ ).reject { |status| FeedManager.instance.filter?(:home, status, current_account.id) }
+ else
+ statuses = Status.unscoped.with_public_visibility.where(
+ reply: false
+ ).where(
+ 'statuses.created_at > ?', date_limit
+ ).joins(:status_stat).order(top_order).paginate_by_id(
+ limit_param(DEFAULT_STATUSES_LIMIT),
+ params_slice(:max_id, :since_id, :min_id)
+ ).reject { |status| FeedManager.instance.filter?(:home, status, current_account.id) }
+ end
+ end
+ else
+ if @sort_type == 'newest'
+ statuses = Status.with_public_visibility.where(
+ reply: false
+ ).paginate_by_id(
+ limit_param(DEFAULT_STATUSES_LIMIT),
+ params_slice(:max_id, :since_id, :min_id)
+ )
+ elsif @sort_type == 'recent'
+ statuses = Status.with_public_visibility.where(
+ reply: false
+ ).joins(:status_stat).where(
+ 'status_stats.replies_count > 0 OR status_stats.reblogs_count > 0 OR status_stats.favourites_count > 0'
+ ).order('status_stats.updated_at DESC').paginate_by_id(
+ limit_param(DEFAULT_STATUSES_LIMIT),
+ params_slice(:max_id, :since_id, :min_id)
+ )
+ elsif ['top_today', 'top_weekly', 'top_monthly', 'top_yearly', 'top_all_time', 'hot'].include? @sort_type
+ if @sort_type == 'top_all_time'
+ statuses = Status.unscoped.with_public_visibility.where(
+ reply: false
+ ).joins(:status_stat).order(top_order)
+ .paginate_by_id(
+ limit_param(DEFAULT_STATUSES_LIMIT),
+ params_slice(:max_id, :since_id, :min_id)
+ )
+ else
+ statuses = Status.unscoped.with_public_visibility.where(
+ reply: false
+ ).where(
+ 'statuses.created_at > ?', date_limit
+ ).joins(:status_stat).order(top_order).paginate_by_id(
+ limit_param(DEFAULT_STATUSES_LIMIT),
+ params_slice(:max_id, :since_id, :min_id)
+ )
+ end
+ end
+ end
+
+ statuses
+ end
+
+ def insert_pagination_headers
+ set_pagination_headers(next_path, prev_path)
+ end
+
+ def pagination_params(core_params)
+ params.slice(:limit).permit(:limit).merge(core_params)
+ end
+
+ def next_path
+ api_v1_timelines_explore_url params[:id], pagination_params(max_id: pagination_max_id)
+ end
+
+ def prev_path
+ api_v1_timelines_explore_url params[:id], pagination_params(min_id: pagination_since_id)
+ end
+
+ def pagination_max_id
+ @statuses.last.id
+ end
+
+ def pagination_since_id
+ @statuses.first.id
+ end
+end

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

+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))
\ No newline at end of file

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') }

config/routes.rb

@@ -331,6 +331,7 @@ Rails.application.routes.draw do
  resources :group, only: :show
  resources :group_collection, only: :show
  resources :group_pins, only: :show
+ resource :explore, only: :show, controller: :explore
  end
 
  resources :gab_trends, only: [:index]