Updated GroupMembers functionality

• Updated:
- GroupMembers functionality to include actions for admin to remove account and make account admin

• Added:
- GroupMemberOptionsPopover

app/javascript/gabsocial/features/group_members.js

@@ -1,13 +1,12 @@
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import debounce from 'lodash.debounce'
+import { FormattedMessage } from 'react-intl'
 import {
 	fetchMembers,
 	expandMembers,
-	updateRole,
-	createRemovedAccount,
 } from '../actions/groups'
-import { FormattedMessage } from 'react-intl'
+import { openPopover } from '../actions/popover'
 import Account from '../components/account'
 import ScrollableList from '../components/scrollable_list'
 
@@ -25,6 +24,14 @@ const mapDispatchToProps = (dispatch) => ({
 	onExpandMembers(groupId) {
 		dispatch(expandMembers(groupId))
 	},
+	onOpenGroupMemberOptions(targetRef, accountId, groupId) {
+		dispatch(openPopover('GROUP_MEMBER_OPTIONS', {
+			targetRef,
+			accountId,
+			groupId,
+			position: 'top',
+		}))
+	},
 })
 
 export default
@@ -37,6 +44,7 @@ class GroupMembers extends ImmutablePureComponent {
 		hasMore: PropTypes.bool,
 		onExpandMembers: PropTypes.func.isRequired,
 		onFetchMembers: PropTypes.func.isRequired,
+		onOpenGroupMemberOptions: PropTypes.func.isRequired,
 	}
 
 	componentWillMount() {
@@ -51,6 +59,10 @@ class GroupMembers extends ImmutablePureComponent {
 		}
 	}
 
+	handleOpenGroupMemberOptions = (e, accountId) => {
+		this.props.onOpenGroupMemberOptions(e.currentTarget, accountId, this.props.groupId)
+	}
+
 	handleLoadMore = debounce(() => {
 		this.props.onExpandMembers(this.props.groupId)
 	}, 300, { leading: true })
@@ -61,9 +73,10 @@ class GroupMembers extends ImmutablePureComponent {
 			hasMore,
 			group,
 			relationships,
-			dispatch,
 		} = this.props
 
+		const isAdmin = relationships.get('admin')
+
 		return (
 			<ScrollableList
 				scrollKey='group-members'
@@ -73,26 +86,17 @@ class GroupMembers extends ImmutablePureComponent {
 				emptyMessage={<FormattedMessage id='group.members.empty' defaultMessage='This group does not has any members.' />}
 			>
 				{
-					accountIds && accountIds.map((id) => {
-						let menu = []
-
-						if (relationships.get('admin')) {
-							menu = [
-								{ text: 'Remove from group', action: () => dispatch(createRemovedAccount(group.get('id'), id)) },
-								{ text: 'Make administrator', action: () => dispatch(updateRole(group.get('id'), id, 'admin')) },
-							]
-						}
-
-						return (
-							<Account
-								compact
-								key={id}
-								id={id}
-								actionIcon='ellipsis'
-								onActionClick={() => true}
-							/>
-						)
-					})
+					accountIds && accountIds.map((id) => (
+						<Account
+							compact
+							key={id}
+							id={id}
+							actionIcon={!isAdmin ? undefined : 'ellipsis'}
+							onActionClick={(data, event) => {
+								return !isAdmin ? false : this.handleOpenGroupMemberOptions(event, id)
+							}}
+						/>
+					))
 				}
 			</ScrollableList>
 		)

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

@@ -29,6 +29,7 @@ export function GroupCreateModal() { return import(/* webpackChunkName: "compone
 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 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 GroupRemovedAccounts() { return import(/* webpackChunkName: "features/group_removed_accounts" */'../../group_removed_accounts') }