Added group sorting to GroupCollection

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

app/javascript/gabsocial/actions/groups.js

@@ -6,6 +6,10 @@ import api, { getLinks } from '../api';
 import { me } from '../initial_state';
 import { importFetchedAccounts } from './importer';
 import { fetchRelationships } from './accounts';
+import {
+  GROUP_LIST_SORTING_TYPE_ALPHABETICAL,
+  GROUP_LIST_SORTING_TYPE_MOST_POPULAR,
+} from '../constants'
 
 export const GROUP_FETCH_REQUEST = 'GROUP_FETCH_REQUEST';
 export const GROUP_FETCH_SUCCESS = 'GROUP_FETCH_SUCCESS';
@@ -579,3 +583,37 @@ export function updateRoleFail(groupId, id, error) {
     error,
   };
 };
+
+export const sortGroups = (tab, sortType) => (dispatch, getState) => {
+  if (!me) return
+
+  const groupIdsByTab = getState().getIn(['group_lists', tab, 'items'], ImmutableList()).toJS()
+  const allGroups = getState().get('groups', ImmutableMap()).toJS()
+
+  let groupsByTab = []
+  
+  for (const key in allGroups) {
+    const block = allGroups[key]
+    if (groupIdsByTab.indexOf(block.id > -1)) {
+      groupsByTab.push(block)
+    }
+  }
+
+  if (sortType === GROUP_LIST_SORTING_TYPE_ALPHABETICAL) {
+    groupsByTab.sort((a, b) => a.title.localeCompare(b.title))
+  } else if (sortType === GROUP_LIST_SORTING_TYPE_MOST_POPULAR) {
+    groupsByTab.sort((a, b) => (a.member_count < b.member_count) ? 1 : -1)
+  }
+
+  const sortedGroupsIdsByTab = groupsByTab.map((group) => group.id)
+
+  dispatch(groupsSort(tab, sortedGroupsIdsByTab))
+};
+
+export function groupsSort(tab, groupIds) {
+  return {
+    type: GROUP_SORT,
+    tab,
+    groupIds,
+  }
+}

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

app/javascript/gabsocial/constants.js

@@ -23,6 +23,7 @@ export const PLACEHOLDER_MISSING_HEADER_SRC = '/original/missing.png'
 export const POPOVER_COMMENT_SORTING_OPTIONS = 'COMMENT_SORTING_OPTIONS'
 export const POPOVER_DATE_PICKER = 'DATE_PICKER'
 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_NAV_SETTINGS = 'NAV_SETTINGS'
@@ -72,6 +73,9 @@ export const COMMENT_SORTING_TYPE_NEWEST = 'newest'
 export const COMMENT_SORTING_TYPE_OLDEST = 'oldest'
 export const COMMENT_SORTING_TYPE_TOP = 'most-liked'
 
+export const GROUP_LIST_SORTING_TYPE_ALPHABETICAL = 'abc'
+export const GROUP_LIST_SORTING_TYPE_MOST_POPULAR = 'member-desc'
+
 export const SUGGESTION_TYPE_VERIFIED = 'verified'
 export const SUGGESTION_TYPE_RELATED = 'related'
 

app/javascript/gabsocial/features/groups_collection.js

@@ -2,12 +2,13 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { injectIntl, defineMessages } from 'react-intl'
 import { fetchGroups } from '../actions/groups'
+import { openPopover } from '../actions/popover'
+import { POPOVER_GROUP_LIST_SORT_OPTIONS } from '../constants'
 import Block from '../components/block'
 import Button from '../components/button'
 import ColumnIndicator from '../components/column_indicator'
 import Heading from '../components/heading'
 import GroupListItem from '../components/group_list_item'
-import Input from '../components/input'
 
 const messages = defineMessages({
 	empty: { id: 'groups.empty', defaultMessage: 'There are no groups to display' },
@@ -23,45 +24,48 @@ const mapStateToProps = (state, { activeTab }) => ({
 	isLoading: state.getIn(['group_lists', activeTab, 'isLoading']),
 })
 
+const mapDispatchToProps = (dispatch) => ({
+	onFetchGroups: (tab) => dispatch(fetchGroups(tab)),
+	onOpenSortPopover(tab, targetRef) {
+		dispatch(openPopover(POPOVER_GROUP_LIST_SORT_OPTIONS, {
+			targetRef,
+			tab,
+			position: 'bottom',
+		}))
+	}
+})
+
 export default
 @injectIntl
-@connect(mapStateToProps)
+@connect(mapStateToProps, mapDispatchToProps)
 class GroupsCollection extends ImmutablePureComponent {
 
 	static propTypes = {
 		activeTab: PropTypes.string.isRequired,
-		dispatch: PropTypes.func.isRequired,
 		groupIds: ImmutablePropTypes.list,
 		intl: PropTypes.object.isRequired,
 		isFetched: PropTypes.bool.isRequired,
 		isLoading: PropTypes.bool.isRequired,
-	}
+		onFetchGroups: PropTypes.func.isRequired,
-
+		onOpenSortPopover: PropTypes.func.isRequired,
-	state = {
-		isSearchVisible: false,
-		searchText: '',
 	}
 
 	componentWillMount() {
-		this.props.dispatch(fetchGroups(this.props.activeTab))
+		this.props.onFetchGroups(this.props.activeTab)
 	}
 
 	componentDidUpdate(oldProps) {
 		if (this.props.activeTab && this.props.activeTab !== oldProps.activeTab) {
-			this.setState({
+			this.props.onFetchGroups(this.props.activeTab)
-				isSearchVisible: false,
-				searchText: '',
-			})
-			this.props.dispatch(fetchGroups(this.props.activeTab))
 		}
 	}
 
-	handleToggleSearch = () => {
+	handleOnOpenSortPopover = () => {
-		this.setState({ isSearchVisible: !this.state.isSearchVisible })
+		this.props.onOpenSortPopover(this.props.activeTab, this.sortBtn)
 	}
 
-	handleOnChangeSearch = (value) => {
+	setSortBtn = (n) => {
-		this.setState({ searchText: value })
+		this.sortBtn = n
 	}
 
 	render() {
@@ -72,10 +76,6 @@ class GroupsCollection extends ImmutablePureComponent {
 			isLoading,
 			isFetched,
 		} = this.props
-		const {
-			isSearchVisible,
-			searchText,
-		} = this.state
 
 		if (isLoading && groupIds.size === 0) {
 			return <ColumnIndicator type='loading' />
@@ -94,37 +94,17 @@ class GroupsCollection extends ImmutablePureComponent {
 						</Heading>
 					</div>
 					<div className={[_s.default, _s.flexRow, _s.mlAuto].join(' ')}>
-						{
-							/*
-							<Button
-								icon='search'
-								className={_s.px10}
-								color={isSearchVisible ? 'white' : 'primary'}
-								backgroundColor={isSearchVisible ? 'brand' : 'none'}
-								iconSize='14px'
-								onClick={this.handleToggleSearch}
-							/>
 						<Button
 							icon='sort'
 							className={_s.px10}
 							color='primary'
 							backgroundColor='none'
 							iconSize='14px'
-							/>
+							onClick={this.handleOnOpenSortPopover}
-							*/
+							buttonRef={this.setSortBtn}
-						}
-					</div>
-				</div>
-				{
-					isSearchVisible &&
-					<div className={[_s.default, _s.px10, _s.my10].join(' ')}>
-						<Input
-							onChange={this.handleOnChangeSearch}
-							value={searchText}
-							prependIcon='search'
 						/>
 					</div>
-				}
+				</div>
 				<div className={[_s.default, _s.py10, _s.width100PC].join(' ')}>
 					{
 						groupIds.map((groupId, i) => (

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

@@ -31,12 +31,13 @@ export function GroupsCollection() { return import(/* webpackChunkName: "feature
 export function GroupCreate() { return import(/* webpackChunkName: "features/group_create" */'../../group_create') }
 export function GroupCreateModal() { return import(/* webpackChunkName: "components/group_create_modal" */'../../../components/modal/group_create_modal') }
 export function GroupDeleteModal() { return import(/* webpackChunkName: "components/group_delete_modal" */'../../../components/modal/group_delete_modal') }
-export function GroupRemovedAccountsModal() { return import(/* webpackChunkName: "components/group_removed_accounts_modal" */'../../../components/modal/group_removed_accounts_modal') }
+export function GroupListSortOptionsPopover() { return import(/* webpackChunkName: "components/group_list_sort_options_popover" */'../../../components/popover/group_list_sort_options_popover') }
 export function GroupMembersModal() { return import(/* webpackChunkName: "components/group_members_modal" */'../../../components/modal/group_members_modal') }
 export function GroupMemberOptionsPopover() { return import(/* webpackChunkName: "components/group_member_options_popover" */'../../../components/popover/group_member_options_popover') }
-export function GroupOptionsPopover() { return import(/* webpackChunkName: "components/group_options_popover" */'../../../components/popover/group_options_popover') }
 export function GroupMembers() { return import(/* webpackChunkName: "features/group_members" */'../../group_members') }
+export function GroupOptionsPopover() { return import(/* webpackChunkName: "components/group_options_popover" */'../../../components/popover/group_options_popover') }
 export function GroupRemovedAccounts() { return import(/* webpackChunkName: "features/group_removed_accounts" */'../../group_removed_accounts') }
+export function GroupRemovedAccountsModal() { return import(/* webpackChunkName: "components/group_removed_accounts_modal" */'../../../components/modal/group_removed_accounts_modal') }
 export function GroupTimeline() { return import(/* webpackChunkName: "features/group_timeline" */'../../group_timeline') }
 export function HashtagTimeline() { return import(/* webpackChunkName: "features/hashtag_timeline" */'../../hashtag_timeline') }
 export function HashtagTimelineSettingsModal() { return import(/* webpackChunkName: "components/hashtag_timeline_settings_modal" */'../../../components/modal/hashtag_timeline_settings_modal') }

app/javascript/gabsocial/reducers/group_lists.js

@@ -3,6 +3,7 @@ import {
   GROUPS_FETCH_REQUEST,
   GROUPS_FETCH_SUCCESS,
   GROUPS_FETCH_FAIL,
+  GROUP_SORT,
 } from '../actions/groups'
 
 const tabs = ['new', 'featured', 'member', 'admin']
@@ -42,7 +43,6 @@ export default function groupLists(state = initialState, action) {
     return state.withMutations((mutable) => {
       let list = ImmutableList(action.groups.map(item => item.id))
       if (action.tab === 'featured') list = list.sortBy(Math.random)
-
       mutable.setIn([action.tab, 'items'], list)
       mutable.setIn([action.tab, 'isLoading'], false)
       mutable.setIn([action.tab, 'isFetched'], true)
@@ -53,6 +53,10 @@ export default function groupLists(state = initialState, action) {
       mutable.setIn([action.tab, 'isLoading'], false)
       mutable.setIn([action.tab, 'isFetched'], true)
     })
+  case GROUP_SORT:
+    return state.withMutations((mutable) => {
+      mutable.setIn([action.tab, 'items'], ImmutableList(action.groupIds))
+    })
   default:
     return state
   }