Commit 86ac15ce authored by mgabdev's avatar mgabdev

Added group sorting to GroupCollection

• Added:
- group sorting to GroupCollection
- constants for group sorting
- GroupListSortOptionsPopover
parent e9fbccaa
......@@ -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';
......@@ -578,4 +582,38 @@ export function updateRoleFail(groupId, id, error) {
id,
error,
};
};
\ No newline at end of file
};
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,
}
}
\ No newline at end of file
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>
)
}
}
\ No newline at end of file
......@@ -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
......
......@@ -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'
......
......@@ -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,
}
state = {
isSearchVisible: false,
searchText: '',
onFetchGroups: PropTypes.func.isRequired,
onOpenSortPopover: PropTypes.func.isRequired,
}
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({
isSearchVisible: false,
searchText: '',
})
this.props.dispatch(fetchGroups(this.props.activeTab))
this.props.onFetchGroups(this.props.activeTab)
}
}
handleToggleSearch = () => {
this.setState({ isSearchVisible: !this.state.isSearchVisible })
handleOnOpenSortPopover = () => {
this.props.onOpenSortPopover(this.props.activeTab, this.sortBtn)
}
handleOnChangeSearch = (value) => {
this.setState({ searchText: value })
setSortBtn = (n) => {
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'
/>
*/
}
</div>
</div>
{
isSearchVisible &&
<div className={[_s.default, _s.px10, _s.my10].join(' ')}>
<Input
onChange={this.handleOnChangeSearch}
value={searchText}
prependIcon='search'
<Button
icon='sort'
className={_s.px10}
color='primary'
backgroundColor='none'
iconSize='14px'
onClick={this.handleOnOpenSortPopover}
buttonRef={this.setSortBtn}
/>
</div>
}
</div>
<div className={[_s.default, _s.py10, _s.width100PC].join(' ')}>
{
groupIds.map((groupId, i) => (
......
......@@ -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') }
......
......@@ -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
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment