Added group sorting to GroupCollection

• Added:
- group sorting to GroupCollection
- constants for group sorting
- GroupListSortOptionsPopover

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

@@ -0,0 +1,67 @@
+import { closePopover } from '../../actions/popover'
+import { sortGroups } from '../../actions/groups'
+import {
+  GROUP_LIST_SORTING_TYPE_ALPHABETICAL,
+  GROUP_LIST_SORTING_TYPE_MOST_POPULAR,
+} from '../../constants'
+import PopoverLayout from './popover_layout'
+import List from '../list'
+
+const mapDispatchToProps = (dispatch) => ({
+  onSortGroups: (tab, sortType) => dispatch(sortGroups(tab, sortType)),
+  onClosePopover:() => dispatch(closePopover()),
+})
+
+export default
+@connect(null, mapDispatchToProps)
+class GroupListSortOptionsPopover extends PureComponent {
+
+  static defaultProps = {
+    tab: PropTypes.string.isRequired,
+    onClosePopover: PropTypes.func.isRequired,
+    onSortGroups: PropTypes.func.isRequired,
+  }
+
+  handleOnSortGroup = (sortType) => {
+    this.props.onSortGroups(this.props.tab, sortType)
+    this.handleOnClosePopover()
+  }
+
+  handleOnClosePopover = () => {
+    this.props.onClosePopover()
+  }
+
+  render() {
+    const { isXS } = this.props
+
+    const listItems = [
+      {
+        hideArrow: true,
+        title: 'Alphabetically',
+        onClick: () => this.handleOnSortGroup(GROUP_LIST_SORTING_TYPE_ALPHABETICAL),
+        isActive: false,
+      },
+      {
+        hideArrow: true,
+        title: 'Member Count',
+        onClick: () => this.handleOnSortGroup(GROUP_LIST_SORTING_TYPE_MOST_POPULAR),
+        isActive: false,
+      },
+    ]
+
+    return (
+      <PopoverLayout
+        width={210}
+        isXS={isXS}
+        onClose={this.handleOnClosePopover}
+      >
+        <List
+          scrollKey='group_list_sort_options'
+          items={listItems}
+          size={isXS ? 'large' : 'small'}
+        />
+      </PopoverLayout>
+    )
+  }
+
+}

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

@@ -3,6 +3,7 @@ import {
   POPOVER_COMMENT_SORTING_OPTIONS,
   POPOVER_DATE_PICKER,
   POPOVER_EMOJI_PICKER,
+  POPOVER_GROUP_LIST_SORT_OPTIONS,
   POPOVER_GROUP_MEMBER_OPTIONS,
   POPOVER_GROUP_OPTIONS,
   POPOVER_NAV_SETTINGS,
@@ -19,6 +20,7 @@ import {
   CommentSortingOptionsPopover,
   DatePickerPopover,
   EmojiPickerPopover,
+  GroupListSortOptionsPopover,
   GroupMemberOptionsPopover,
   GroupOptionsPopover,
   NavSettingsPopover,
@@ -46,6 +48,7 @@ const POPOVER_COMPONENTS = {}
 POPOVER_COMPONENTS[POPOVER_COMMENT_SORTING_OPTIONS] = CommentSortingOptionsPopover
 POPOVER_COMPONENTS[POPOVER_DATE_PICKER] = DatePickerPopover
 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_NAV_SETTINGS] = NavSettingsPopover