diff --git a/app/javascript/gabsocial/components/account.js b/app/javascript/gabsocial/components/account.js index 25c103f5..64fc7a59 100644 --- a/app/javascript/gabsocial/components/account.js +++ b/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 = () => { diff --git a/app/javascript/gabsocial/components/popover/group_member_options_popover.js b/app/javascript/gabsocial/components/popover/group_member_options_popover.js new file mode 100644 index 00000000..46969d2f --- /dev/null +++ b/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 ( + + + + ) + } + +} \ No newline at end of file diff --git a/app/javascript/gabsocial/components/popover/popover_root.js b/app/javascript/gabsocial/components/popover/popover_root.js index 04141892..0010958e 100644 --- a/app/javascript/gabsocial/components/popover/popover_root.js +++ b/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 diff --git a/app/javascript/gabsocial/constants.js b/app/javascript/gabsocial/constants.js index 2ae0f39c..ec83144d 100644 --- a/app/javascript/gabsocial/constants.js +++ b/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' diff --git a/app/javascript/gabsocial/features/group_members.js b/app/javascript/gabsocial/features/group_members.js index e7c035a5..9781150a 100644 --- a/app/javascript/gabsocial/features/group_members.js +++ b/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 ( } > { - 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 ( - true} - /> - ) - }) + accountIds && accountIds.map((id) => ( + { + return !isAdmin ? false : this.handleOpenGroupMemberOptions(event, id) + }} + /> + )) } ) diff --git a/app/javascript/gabsocial/features/ui/util/async_components.js b/app/javascript/gabsocial/features/ui/util/async_components.js index db3d63f2..8b4762f7 100644 --- a/app/javascript/gabsocial/features/ui/util/async_components.js +++ b/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') }