Added group sorting to GroupCollection

• Added: - group sorting to GroupCollection - constants for group sorting - GroupListSortOptionsPopover
2020-07-24 21:41:05 -05:00
parent e9fbccaa12
commit 86ac15ce90
7 changed files with 152 additions and 55 deletions
--- a/app/javascript/gabsocial/features/groups_collection.js
+++ b/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,
-	}
-
-	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) => (
--- a/app/javascript/gabsocial/features/ui/util/async_components.js
+++ b/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') }