Updated GroupMembers functionality

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

• Added:
- GroupMemberOptionsPopover

app/javascript/gabsocial/components/account.js

@@ -95,8 +95,8 @@ class Account extends ImmutablePureComponent {
     'withBio',
   ]
 
-  handleAction = () => {
-    this.props.onActionClick(this.props.account)
+  handleAction = (e) => {
+    this.props.onActionClick(this.props.account, e)
   }
 
   handleUnrequest = () => {

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

@@ -0,0 +1,69 @@
+import { closePopover } from '../../actions/popover'
+import {
+	updateRole,
+	createRemovedAccount,
+} from '../../actions/groups'
+import PopoverLayout from './popover_layout'
+import List from '../list'
+
+const mapDispatchToProps = (dispatch) => ({
+  onUpdateRole(groupId, accountId, type) {
+    dispatch(closePopover())
+    dispatch(updateRole(groupId, accountId, type))
+  },
+  onCreateRemovedAccount(groupId, accountId) {
+    dispatch(closePopover())
+    dispatch(createRemovedAccount(groupId, accountId))
+  },
+})
+
+export default
+@connect(null, mapDispatchToProps)
+class GroupMemberOptionsPopover extends PureComponent {
+
+  static defaultProps = {
+    accountId: PropTypes.string.isRequired,
+    groupId: PropTypes.string.isRequired,
+    isXS: PropTypes.bool,
+    onUpdateRole: PropTypes.func.isRequired,
+    onCreateRemovedAccount: PropTypes.func.isRequired,
+  }
+
+  handleOnRemoveFromGroup = () => {
+	  this.props.onCreateRemovedAccount(this.props.groupId, this.props.accountId)
+  }
+
+  handleOnMakeAdmin = () => {
+	  this.props.onUpdateRole(this.props.groupId, this.props.accountId, 'admin')
+  }
+
+  render() {
+    const { isXS } = this.props
+
+    const listItems = [
+      {
+        hideArrow: true,
+        icon: 'block',
+        title: 'Remove from group',
+        onClick: this.handleOnRemoveFromGroup,
+      },
+      {
+        hideArrow: true,
+        icon: 'groups',
+        title: 'Make group admin',
+        onClick: this.handleOnMakeAdmin,
+      },
+    ]
+
+    return (
+      <PopoverLayout width={210} isXS={isXS}>
+        <List
+          scrollKey='group_options'
+          items={listItems}
+          size='large'
+        />
+      </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_MEMBER_OPTIONS,
   POPOVER_GROUP_OPTIONS,
   POPOVER_NAV_SETTINGS,
   POPOVER_PROFILE_OPTIONS,
@@ -17,6 +18,7 @@ import {
   CommentSortingOptionsPopover,
   DatePickerPopover,
   EmojiPickerPopover,
+  GroupMemberOptionsPopover,
   GroupOptionsPopover,
   NavSettingsPopover,
   ProfileOptionsPopover,
@@ -40,6 +42,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_MEMBER_OPTIONS] = GroupMemberOptionsPopover
 POPOVER_COMPONENTS[POPOVER_GROUP_OPTIONS] = GroupOptionsPopover
 POPOVER_COMPONENTS[POPOVER_NAV_SETTINGS] = NavSettingsPopover
 POPOVER_COMPONENTS[POPOVER_PROFILE_OPTIONS] = ProfileOptionsPopover

app/javascript/gabsocial/constants.js

@@ -22,6 +22,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_MEMBER_OPTIONS = 'GROUP_MEMBER_OPTIONS'
 export const POPOVER_GROUP_OPTIONS = 'GROUP_OPTIONS'
 export const POPOVER_NAV_SETTINGS = 'NAV_SETTINGS'
 export const POPOVER_PROFILE_OPTIONS = 'PROFILE_OPTIONS'

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 (
+					accountIds && accountIds.map((id) => (
 						<Account
 							compact
 							key={id}
 							id={id}
-								actionIcon='ellipsis'
-								onActionClick={() => true}
+							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') }