gab-social/app/javascript/gabsocial/components/popover/profile_options_popover.js

288 lines
8.1 KiB
JavaScript
Raw Normal View History

2020-03-25 03:08:43 +00:00
import { defineMessages, injectIntl } from 'react-intl'
2020-03-14 17:31:29 +00:00
import {
followAccount,
unfollowAccount,
blockAccount,
unblockAccount,
unmuteAccount,
pinAccount,
unpinAccount,
} from '../../actions/accounts'
import {
mentionCompose,
} from '../../actions/compose'
2020-03-24 04:39:12 +00:00
import { muteAccount } from '../../actions/accounts'
2020-03-14 17:31:29 +00:00
import { initReport } from '../../actions/reports'
import { openModal } from '../../actions/modal'
2020-05-14 21:45:39 +01:00
import { closePopover } from '../../actions/popover'
2020-03-14 17:31:29 +00:00
import { unfollowModal, autoPlayGif, me, isStaff } from '../../initial_state'
import { makeGetAccount } from '../../selectors'
2020-02-28 15:20:47 +00:00
import PopoverLayout from './popover_layout'
import Text from '../text'
2020-03-14 17:31:29 +00:00
import List from '../list'
const messages = defineMessages({
blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
follow: { id: 'account.follow', defaultMessage: 'Follow' },
requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
mention: { id: 'account.mention', defaultMessage: 'Mention' },
unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
block: { id: 'account.block', defaultMessage: 'Block @{name}' },
mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
report: { id: 'account.report', defaultMessage: 'Report @{name}' },
share: { id: 'account.share', defaultMessage: 'Share @{name}\'s profile' },
media: { id: 'account.media', defaultMessage: 'Media' },
hideReposts: { id: 'account.hide_reblogs', defaultMessage: 'Hide reposts from @{name}' },
showReposts: { id: 'account.show_reblogs', defaultMessage: 'Show reposts from @{name}' },
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
2020-03-24 04:39:12 +00:00
admin_account: { id: 'admin_account', defaultMessage: 'Open moderation interface' },
add_to_list: { id: 'lists.account.add', defaultMessage: 'Add to list' },
2020-03-24 04:39:12 +00:00
add_or_remove_from_shortcuts: { id: 'account.add_or_remove_from_shortcuts', defaultMessage: 'Add or Remove from shortcuts' },
2020-03-14 17:31:29 +00:00
accountBlocked: { id: 'account.blocked', defaultMessage: 'Blocked' },
accountMuted: { id: 'account.muted', defaultMessage: 'Muted' },
});
const makeMapStateToProps = () => {
const getAccount = makeGetAccount();
const mapStateToProps = (state, { account }) => ({
account: getAccount(state, !!account ? account.get('id') : -1),
});
return mapStateToProps;
};
const mapDispatchToProps = (dispatch, { intl }) => ({
2020-03-24 04:39:12 +00:00
onFollow(account) {
2020-03-14 17:31:29 +00:00
if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
if (unfollowModal) {
2020-03-24 04:39:12 +00:00
dispatch(openModal('UNFOLLOW', {
account,
2020-03-24 04:39:12 +00:00
}))
2020-03-14 17:31:29 +00:00
} else {
2020-03-24 04:39:12 +00:00
dispatch(unfollowAccount(account.get('id')))
2020-03-14 17:31:29 +00:00
}
} else {
2020-03-24 04:39:12 +00:00
dispatch(followAccount(account.get('id')))
2020-03-14 17:31:29 +00:00
}
},
2020-03-24 04:39:12 +00:00
onBlock(account) {
2020-05-14 21:45:39 +01:00
dispatch(closePopover())
2020-03-14 17:31:29 +00:00
if (account.getIn(['relationship', 'blocking'])) {
dispatch(unblockAccount(account.get('id')));
} else {
2020-03-24 04:39:12 +00:00
dispatch(openModal('BLOCK_ACCOUNT', {
accountId: account.get('id'),
2020-03-14 17:31:29 +00:00
}));
}
},
2020-03-24 04:39:12 +00:00
onMention(account) {
2020-05-14 21:45:39 +01:00
dispatch(closePopover())
2020-03-24 04:39:12 +00:00
dispatch(mentionCompose(account));
2020-03-14 17:31:29 +00:00
},
2020-03-24 04:39:12 +00:00
onRepostToggle(account) {
2020-05-14 21:45:39 +01:00
dispatch(closePopover())
2020-03-14 17:31:29 +00:00
if (account.getIn(['relationship', 'showing_reblogs'])) {
dispatch(followAccount(account.get('id'), false));
} else {
dispatch(followAccount(account.get('id'), true));
}
},
2020-03-24 04:39:12 +00:00
onReport(account) {
2020-05-14 21:45:39 +01:00
dispatch(closePopover())
2020-03-14 17:31:29 +00:00
dispatch(initReport(account));
},
2020-03-24 04:39:12 +00:00
onMute(account) {
2020-05-14 21:45:39 +01:00
dispatch(closePopover())
2020-03-14 17:31:29 +00:00
if (account.getIn(['relationship', 'muting'])) {
dispatch(unmuteAccount(account.get('id')));
} else {
2020-03-24 04:39:12 +00:00
dispatch(openModal('MUTE', {
accountId: account.get('id'),
}))
2020-03-14 17:31:29 +00:00
}
},
2020-03-24 04:39:12 +00:00
onAddToList(account) {
2020-05-14 21:45:39 +01:00
dispatch(closePopover())
dispatch(openModal('LIST_ADD_USER', {
2020-03-14 17:31:29 +00:00
accountId: account.get('id'),
}));
},
onClosePopover: () => dispatch(closePopover()),
2020-03-14 17:31:29 +00:00
});
export default
@injectIntl
@connect(makeMapStateToProps, mapDispatchToProps)
class ProfileOptionsPopover extends PureComponent {
static defaultProps = {
isXS: PropTypes.bool,
}
2020-03-14 17:31:29 +00:00
makeMenu() {
const { account, intl } = this.props;
2020-03-14 17:31:29 +00:00
let menu = [];
2020-03-24 04:39:12 +00:00
if (!account) return menu
if (account.get('id') === me) return menu
2020-03-14 17:31:29 +00:00
if ('share' in navigator) {
2020-03-24 04:39:12 +00:00
menu.push({
hideArrow: true,
icon: 'share',
title: intl.formatMessage(messages.share, { name: account.get('username') }),
onClick: this.handleShare
});
2020-03-14 17:31:29 +00:00
}
2020-03-24 04:39:12 +00:00
menu.push({
hideArrow: true,
icon: 'comment',
title: intl.formatMessage(messages.mention, { name: account.get('acct') }),
onClick: this.handleOnMention
});
if (account.getIn(['relationship', 'following'])) {
const showingReblogs = account.getIn(['relationship', 'showing_reblogs'])
menu.push({
hideArrow: true,
icon: 'repost',
title: intl.formatMessage(showingReblogs ? messages.hideReposts : messages.showReposts, {
name: account.get('username')
}),
onClick: this.handleRepostToggle,
})
2020-03-14 17:31:29 +00:00
}
2020-03-24 04:39:12 +00:00
const isMuting = account.getIn(['relationship', 'muting'])
menu.push({
hideArrow: true,
icon: 'audio-mute',
title: intl.formatMessage(isMuting ? messages.unmute : messages.mute, {
name: account.get('username')
}),
onClick: this.handleMute,
})
const isBlocking = account.getIn(['relationship', 'blocking'])
menu.push({
hideArrow: true,
icon: 'block',
title: intl.formatMessage(isBlocking ? messages.unblock : messages.block, {
name: account.get('username')
}),
onClick: this.handleBlock
})
menu.push({
hideArrow: true,
icon: 'report',
title: intl.formatMessage(messages.report, { name: account.get('username') }),
onClick: this.handleReport
})
// menu.push({
// hideArrow: true,
// icon: 'list',
// title: intl.formatMessage(messages.add_to_list),
// onClick: this.handleAddToList
// })
2020-03-24 04:39:12 +00:00
// menu.push({
// hideArrow: true,
// icon: 'circle',
// title: intl.formatMessage(messages.add_or_remove_from_shortcuts),
// onClick: this.handleAddToShortcuts
// })
2020-03-24 04:39:12 +00:00
if (isStaff) {
menu.push({
hideArrow: true,
icon: 'circle',
title: intl.formatMessage(messages.admin_account),
href: `/admin/accounts/${account.get('id')}`
})
2020-03-14 17:31:29 +00:00
}
2020-03-24 04:39:12 +00:00
return menu
2020-03-14 17:31:29 +00:00
}
2020-03-24 04:39:12 +00:00
handleShare = () => {
// : todo :
}
handleFollow = () => {
this.props.onFollow(this.props.account);
}
handleBlock = () => {
this.props.onBlock(this.props.account);
}
handleOnMention = () => {
this.props.onMention(this.props.account);
}
handleReport = () => {
this.props.onReport(this.props.account);
}
handleRepostToggle = () => {
this.props.onRepostToggle(this.props.account);
}
handleMute = () => {
this.props.onMute(this.props.account);
}
handleAddToList = () => {
this.props.onAddToList(this.props.account);
}
handleAddToShortcuts = () => {
// : todo :
}
2020-02-28 15:20:47 +00:00
handleOnClosePopover = () => {
this.props.onClosePopover()
}
2020-02-28 15:20:47 +00:00
render() {
const { isXS } = this.props
2020-03-14 17:31:29 +00:00
const listItems = this.makeMenu()
2020-02-28 15:20:47 +00:00
return (
<PopoverLayout
width={250}
isXS={isXS}
onClose={this.handleOnClosePopover}
>
2020-03-14 17:31:29 +00:00
<List
scrollKey='profile_options'
items={listItems}
2020-04-07 02:53:23 +01:00
size='large'
2020-03-14 17:31:29 +00:00
/>
2020-02-28 15:20:47 +00:00
</PopoverLayout>
)
}
}