Added GroupTimelineSortOptionsPopover, GroupTimelineSortTopOptionsPopover compnents

• Added:
- GroupTimelineSortOptionsPopover, GroupTimelineSortTopOptionsPopover components
- redux for sorting
- intl for sorting
- constants

app/javascript/gabsocial/actions/groups.js

@@ -63,13 +63,16 @@ export const GROUP_UPDATE_ROLE_REQUEST = 'GROUP_UPDATE_ROLE_REQUEST';
 export const GROUP_UPDATE_ROLE_SUCCESS = 'GROUP_UPDATE_ROLE_SUCCESS';
 export const GROUP_UPDATE_ROLE_FAIL    = 'GROUP_UPDATE_ROLE_FAIL';
 
+export const GROUP_TIMELINE_SORT = 'GROUP_TIMELINE_SORT'
+export const GROUP_TIMELINE_TOP_SORT = 'GROUP_TIMELINE_TOP_SORT'
+
 export const GROUP_SORT = 'GROUP_SORT'
 
 export const importGroup = (group) => (dispatch) => {
   dispatch(fetchGroupSuccess(group))
 }
 
-export const fetchGroup = id => (dispatch, getState) => {
+export const fetchGroup = (id) => (dispatch, getState) => {
   dispatch(fetchGroupRelationships([id]));
 
   if (getState().getIn(['groups', id])) {
@@ -614,4 +617,18 @@ export function groupsSort(tab, groupIds) {
     tab,
     groupIds,
   }
+}
+
+export const setGroupTimelineSort = (sortValue) => (dispatch) => {
+  dispatch({
+    type: GROUP_TIMELINE_SORT,
+    sortValue,
+  })
+}
+
+export const setGroupTimelineTopSort = (sortValue) => (dispatch) => {
+  dispatch({
+    type: GROUP_TIMELINE_TOP_SORT,
+    sortValue,
+  })
 }

app/javascript/gabsocial/components/popover/group_timeline_sort_options_popover.js

@@ -0,0 +1,99 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import { closePopover } from '../../actions/popover'
+import { setGroupTimelineSort } from '../../actions/groups'
+import {
+  GROUP_TIMELINE_SORTING_TYPE_NEWEST,
+  GROUP_TIMELINE_SORTING_TYPE_RECENT_ACTIVITY,
+  GROUP_TIMELINE_SORTING_TYPE_TOP,
+} from '../../constants'
+import PopoverLayout from './popover_layout'
+import List from '../list'
+
+const messages = defineMessages({
+  topTitle: { id: 'group_timeline_sorting.top_title', defaultMessage: 'Top Posts' },
+  topSubtitle: { id: 'group_timeline_sorting.top_subtitle', defaultMessage: 'See gabs with most comments, likes and reposts first' },
+  recentTitle: { id: 'group_timeline_sorting.recent_title', defaultMessage: 'Recent Activity' },
+  recentSubtitle: { id: 'group_timeline_sorting.recent_subtitle', defaultMessage: 'See gabs with most recent comments first' },
+  newTitle: { id: 'group_timeline_sorting.new_title', defaultMessage: 'New Posts' },
+  newSubtitle: { id: 'group_timeline_sorting.new_subtitle', defaultMessage: 'See most recent gabs first' },
+})
+
+const mapStateToProps = (state) => ({
+  sorting: state.getIn(['group_lists', 'sortByValue']),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onSort(sort) {
+    dispatch(setGroupTimelineSort(sort))
+    dispatch(closePopover())
+  },
+  onClosePopover: () => dispatch(closePopover()),
+})
+
+export default
+@injectIntl
+@connect(mapStateToProps, mapDispatchToProps)
+class GroupTimelineSortOptionsPopover extends PureComponent {
+
+  static propTypes = {
+    sorting: PropTypes.string.isRequired,
+    intl: PropTypes.object.isRequired,
+    isXS: PropTypes.bool,
+    onClosePopover: PropTypes.func.isRequired,
+    onSort: PropTypes.func.isRequired,
+  }
+
+  handleOnClick = (type) => {
+    this.props.onSort(type)
+  }
+
+  handleOnClosePopover = () => {
+    this.props.onClosePopover()
+  }
+
+  render() {
+    const {
+      sorting,
+      intl,
+      isXS,
+    } = this.props
+    
+    const items = [
+      {
+        hideArrow: true,
+        isActive: sorting === GROUP_TIMELINE_SORTING_TYPE_TOP,
+        title: intl.formatMessage(messages.topTitle),
+        subtitle: intl.formatMessage(messages.topSubtitle),
+        onClick: () => this.handleOnClick(GROUP_TIMELINE_SORTING_TYPE_TOP),
+      },
+      {
+        hideArrow: true,
+        isActive: sorting === GROUP_TIMELINE_SORTING_TYPE_NEWEST,
+        title: intl.formatMessage(messages.newTitle),
+        subtitle: intl.formatMessage(messages.newSubtitle),
+        onClick: () => this.handleOnClick(GROUP_TIMELINE_SORTING_TYPE_NEWEST),
+      },
+      {
+        hideArrow: true,
+        isActive: sorting === GROUP_TIMELINE_SORTING_TYPE_RECENT_ACTIVITY,
+        title: intl.formatMessage(messages.recentTitle),
+        subtitle: intl.formatMessage(messages.recentSubtitle),
+        onClick: () => this.handleOnClick(GROUP_TIMELINE_SORTING_TYPE_RECENT_ACTIVITY),
+      },
+    ]
+
+    return (
+      <PopoverLayout
+        width={280}
+        isXS={isXS}
+        onClose={this.handleOnClosePopover}
+      >
+        <List
+          size={isXS ? 'large' : 'small'}
+          scrollKey='group_timeline_sorting_options'
+          items={items}
+        />
+      </PopoverLayout>
+    )
+  }
+}

app/javascript/gabsocial/components/popover/group_timeline_sort_top_options_popover.js

@@ -0,0 +1,109 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import { closePopover } from '../../actions/popover'
+import { setGroupTimelineTopSort } from '../../actions/groups'
+import {
+  GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_TODAY,
+  GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_WEEKLY,
+  GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_MONTHLY,
+  GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_YEARLY,
+  GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_ALL_TIME,
+} from '../../constants'
+import PopoverLayout from './popover_layout'
+import List from '../list'
+
+const messages = defineMessages({
+  topTodayTitle: { id: 'group_timeline_sorting.top_today_title', defaultMessage: 'Today' },
+	topWeekTitle: { id: 'group_timeline_sorting.top_week_title', defaultMessage: 'This Week' },
+	topMonthTitle: { id: 'group_timeline_sorting.top_month_title', defaultMessage: 'This Month' },
+	topYearTitle: { id: 'group_timeline_sorting.top_year_title', defaultMessage: 'This Year' },
+	topAllTitle: { id: 'group_timeline_sorting.top_all_title', defaultMessage: 'All Time' },
+})
+
+const mapStateToProps = (state) => ({
+  sortByTopValue: state.getIn(['group_lists', 'sortByTopValue']),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onSort(sort) {
+    dispatch(setGroupTimelineTopSort(sort))
+    dispatch(closePopover())
+  },
+  onClosePopover: () => dispatch(closePopover()),
+})
+
+export default
+@injectIntl
+@connect(mapStateToProps, mapDispatchToProps)
+class GroupTimelineSortTopOptionsPopover extends PureComponent {
+
+  static propTypes = {
+    sortByTopValue: PropTypes.string.isRequired,
+    intl: PropTypes.object.isRequired,
+    isXS: PropTypes.bool,
+    onClosePopover: PropTypes.func.isRequired,
+    onSort: PropTypes.func.isRequired,
+  }
+
+  handleOnClick = (type) => {
+    this.props.onSort(type)
+  }
+
+  handleOnClosePopover = () => {
+    this.props.onClosePopover()
+  }
+
+  render() {
+    const {
+      sortByTopValue,
+      intl,
+      isXS,
+    } = this.props
+
+    const items = [
+      {
+        hideArrow: true,
+        isActive: sortByTopValue === GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_TODAY,
+        title: intl.formatMessage(messages.topTodayTitle),
+        onClick: () => this.handleOnClick(GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_TODAY),
+      },
+      {
+        hideArrow: true,
+        isActive: sortByTopValue === GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_WEEKLY,
+        title: intl.formatMessage(messages.topWeekTitle),
+        onClick: () => this.handleOnClick(GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_WEEKLY),
+      },
+      {
+        hideArrow: true,
+        isActive: sortByTopValue === GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_MONTHLY,
+        title: intl.formatMessage(messages.topMonthTitle),
+        onClick: () => this.handleOnClick(GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_MONTHLY),
+      },
+      {
+        hideArrow: true,
+        isActive: sortByTopValue === GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_YEARLY,
+        title: intl.formatMessage(messages.topYearTitle),
+        onClick: () => this.handleOnClick(GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_YEARLY),
+      },
+      {
+        hideArrow: true,
+        isActive: sortByTopValue === GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_ALL_TIME,
+        title: intl.formatMessage(messages.topAllTitle),
+        onClick: () => this.handleOnClick(GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_ALL_TIME),
+      },
+    ]
+
+    return (
+      <PopoverLayout
+        width={160}
+        isXS={isXS}
+        onClose={this.handleOnClosePopover}
+      >
+        <List
+          size={isXS ? 'large' : 'small'}
+          scrollKey='group_timeline_sorting_top_options'
+          items={items}
+        />
+      </PopoverLayout>
+    )
+  }
+}

app/javascript/gabsocial/components/popover/popover_root.js

@@ -6,6 +6,8 @@ import {
   POPOVER_GROUP_LIST_SORT_OPTIONS,
   POPOVER_GROUP_MEMBER_OPTIONS,
   POPOVER_GROUP_OPTIONS,
+  POPOVER_GROUP_TIMELINE_SORT_OPTIONS,
+  POPOVER_GROUP_TIMELINE_SORT_TOP_OPTIONS,
   POPOVER_NAV_SETTINGS,
   POPOVER_PROFILE_OPTIONS,
   POPOVER_SEARCH,
@@ -23,6 +25,8 @@ import {
   GroupListSortOptionsPopover,
   GroupMemberOptionsPopover,
   GroupOptionsPopover,
+  GroupTimelineSortOptionsPopover,
+  GroupTimelineSortTopOptionsPopover,
   NavSettingsPopover,
   ProfileOptionsPopover,
   SearchPopover,
@@ -51,6 +55,8 @@ POPOVER_COMPONENTS[POPOVER_EMOJI_PICKER] = EmojiPickerPopover
 POPOVER_COMPONENTS[POPOVER_GROUP_LIST_SORT_OPTIONS] = GroupListSortOptionsPopover
 POPOVER_COMPONENTS[POPOVER_GROUP_MEMBER_OPTIONS] = GroupMemberOptionsPopover
 POPOVER_COMPONENTS[POPOVER_GROUP_OPTIONS] = GroupOptionsPopover
+POPOVER_COMPONENTS[POPOVER_GROUP_TIMELINE_SORT_OPTIONS] = GroupTimelineSortOptionsPopover
+POPOVER_COMPONENTS[POPOVER_GROUP_TIMELINE_SORT_TOP_OPTIONS] = GroupTimelineSortTopOptionsPopover
 POPOVER_COMPONENTS[POPOVER_NAV_SETTINGS] = NavSettingsPopover
 POPOVER_COMPONENTS[POPOVER_PROFILE_OPTIONS] = ProfileOptionsPopover
 POPOVER_COMPONENTS[POPOVER_SEARCH] = SearchPopover

app/javascript/gabsocial/constants.js

@@ -26,6 +26,8 @@ export const POPOVER_EMOJI_PICKER = 'EMOJI_PICKER'
 export const POPOVER_GROUP_LIST_SORT_OPTIONS = 'GROUP_LIST_SORT_OPTIONS'
 export const POPOVER_GROUP_MEMBER_OPTIONS = 'GROUP_MEMBER_OPTIONS'
 export const POPOVER_GROUP_OPTIONS = 'GROUP_OPTIONS'
+export const POPOVER_GROUP_TIMELINE_SORT_OPTIONS = 'GROUP_TIMELINE_SORT_OPTIONS'
+export const POPOVER_GROUP_TIMELINE_SORT_TOP_OPTIONS = 'GROUP_TIMELINE_SORT_TOP_OPTIONS'
 export const POPOVER_NAV_SETTINGS = 'NAV_SETTINGS'
 export const POPOVER_PROFILE_OPTIONS = 'PROFILE_OPTIONS'
 export const POPOVER_SEARCH = 'SEARCH'
@@ -123,4 +125,14 @@ export const STATUS_EXPIRATION_OPTION_60_MINUTES = '60-minutes'
 export const STATUS_EXPIRATION_OPTION_6_HOURS = '6-hours'
 export const STATUS_EXPIRATION_OPTION_24_HOURS = '24-hours'
 export const STATUS_EXPIRATION_OPTION_3_DAYS = '3-days'
-export const STATUS_EXPIRATION_OPTION_7_DAYS = '7-days'
+export const STATUS_EXPIRATION_OPTION_7_DAYS = '7-days'
+
+export const GROUP_TIMELINE_SORTING_TYPE_NEWEST = 'newest'
+export const GROUP_TIMELINE_SORTING_TYPE_RECENT_ACTIVITY = 'recent'
+export const GROUP_TIMELINE_SORTING_TYPE_TOP = 'top'
+
+export const GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_TODAY = 'today'
+export const GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_WEEKLY = 'weekly'
+export const GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_MONTHLY = 'monthly'
+export const GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_YEARLY = 'yearly'
+export const GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_ALL_TIME = 'all-time'

app/javascript/gabsocial/reducers/group_lists.js

@@ -4,11 +4,19 @@ import {
   GROUPS_FETCH_SUCCESS,
   GROUPS_FETCH_FAIL,
   GROUP_SORT,
+  GROUP_TIMELINE_SORT,
+  GROUP_TIMELINE_TOP_SORT,
 } from '../actions/groups'
+import {
+  GROUP_TIMELINE_SORTING_TYPE_TOP,
+  GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_TODAY,
+} from '../constants'
 
 const tabs = ['new', 'featured', 'member', 'admin']
 
 const initialState = ImmutableMap({
+  sortByValue: GROUP_TIMELINE_SORTING_TYPE_TOP,
+  sortByTopValue: GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_TODAY,
   new: ImmutableMap({
     isFetched: false,
     isLoading: false,
@@ -57,6 +65,20 @@ export default function groupLists(state = initialState, action) {
     return state.withMutations((mutable) => {
       mutable.setIn([action.tab, 'items'], ImmutableList(action.groupIds))
     })
+  case GROUP_TIMELINE_SORT:
+    return state.withMutations((mutable) => {
+      mutable.set('sortByValue', action.sortValue)
+      if (action.sortValue === GROUP_TIMELINE_SORTING_TYPE_TOP) {
+        mutable.set('sortByTopValue', GROUP_TIMELINE_SORTING_TYPE_TOP_OPTION_TODAY)
+      } else {
+        mutable.set('sortByTopValue', '')
+      }
+    })
+  case GROUP_TIMELINE_TOP_SORT:
+    return state.withMutations((mutable) => {
+      mutable.set('sortByValue', GROUP_TIMELINE_SORTING_TYPE_TOP)
+      mutable.set('sortByTopValue', action.sortValue)
+    })
   default:
     return state
   }