gab-social/app/javascript/gabsocial/components/account.js

200 lines
5.2 KiB
JavaScript
Raw Normal View History

2020-03-02 22:26:25 +00:00
import { Fragment } from 'react'
import { NavLink } from 'react-router-dom'
import ImmutablePropTypes from 'react-immutable-proptypes'
import { defineMessages, injectIntl } from 'react-intl'
import ImmutablePureComponent from 'react-immutable-pure-component'
import { me } from '../initial_state'
2020-04-11 23:29:19 +01:00
import {
followAccount,
unfollowAccount,
blockAccount,
unblockAccount,
muteAccount,
unmuteAccount,
} from '../actions/accounts'
import { openModal } from '../actions/modal'
import { initMuteModal } from '../actions/mutes'
import { unfollowModal } from '../initial_state'
import { makeGetAccount } from '../selectors'
2020-04-23 07:13:29 +01:00
import AccountActionButton from './account_action_button'
2020-03-02 22:26:25 +00:00
import Avatar from './avatar'
import DisplayName from './display_name'
import Button from './button'
2020-04-11 23:29:19 +01:00
2020-04-23 07:13:29 +01:00
const makeMapStateToProps = (state, props) => ({
account: makeGetAccount()(state, props.id),
})
2020-04-11 23:29:19 +01:00
2020-04-23 07:13:29 +01:00
const mapDispatchToProps = (dispatch) => ({
2020-04-11 23:29:19 +01:00
onFollow (account) {
if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
if (unfollowModal) {
dispatch(openModal('UNFOLLOW', {
account,
2020-04-11 23:29:19 +01:00
}))
} else {
dispatch(unfollowAccount(account.get('id')))
}
} else {
dispatch(followAccount(account.get('id')))
}
},
onBlock (account) {
if (account.getIn(['relationship', 'blocking'])) {
dispatch(unblockAccount(account.get('id')))
} else {
dispatch(blockAccount(account.get('id')))
}
},
onMute (account) {
if (account.getIn(['relationship', 'muting'])) {
dispatch(unmuteAccount(account.get('id')))
} else {
dispatch(initMuteModal(account))
}
},
onMuteNotifications (account, notifications) {
dispatch(muteAccount(account.get('id'), notifications))
},
2020-03-02 22:26:25 +00:00
})
export default
@injectIntl
2020-04-11 23:29:19 +01:00
@connect(makeMapStateToProps, mapDispatchToProps)
2020-03-02 22:26:25 +00:00
class Account extends ImmutablePureComponent {
static propTypes = {
account: ImmutablePropTypes.map.isRequired,
onFollow: PropTypes.func.isRequired,
onBlock: PropTypes.func.isRequired,
onMute: PropTypes.func.isRequired,
onMuteNotifications: PropTypes.func,
intl: PropTypes.object.isRequired,
2020-04-22 06:00:11 +01:00
isHidden: PropTypes.bool,
2020-03-02 22:26:25 +00:00
actionIcon: PropTypes.string,
actionTitle: PropTypes.string,
onActionClick: PropTypes.func,
compact: PropTypes.bool,
2020-03-14 17:31:29 +00:00
expanded: PropTypes.bool,
2020-03-02 22:26:25 +00:00
showDismiss: PropTypes.bool,
dismissAction: PropTypes.func,
2020-04-29 03:24:35 +01:00
withBio: PropTypes.bool,
2020-03-02 22:26:25 +00:00
}
2020-04-23 07:13:29 +01:00
updateOnProps = [
'account',
'isHidden',
'compact',
'expanded',
'showDismiss',
2020-04-29 03:24:35 +01:00
'withBio',
2020-04-23 07:13:29 +01:00
]
2020-03-02 22:26:25 +00:00
handleAction = (e) => {
this.props.onActionClick(this.props.account, e)
2020-03-02 22:26:25 +00:00
}
handleUnrequest = () => {
//
}
render() {
const {
account,
intl,
2020-04-22 06:00:11 +01:00
isHidden,
2020-03-02 22:26:25 +00:00
onActionClick,
actionIcon,
actionTitle,
compact,
2020-03-14 17:31:29 +00:00
expanded,
2020-03-02 22:26:25 +00:00
dismissAction,
showDismiss,
2020-04-29 23:32:49 +01:00
withBio,
2020-03-02 22:26:25 +00:00
} = this.props
if (!account) return null
2020-04-22 06:00:11 +01:00
if (isHidden) {
2020-03-02 22:26:25 +00:00
return (
<Fragment>
{account.get('display_name')}
2020-04-24 04:17:27 +01:00
{`@${account.get('username')}`}
2020-03-02 22:26:25 +00:00
</Fragment>
)
}
2020-04-23 07:13:29 +01:00
const actionButton = (onActionClick && actionIcon) ? (
<Button
onClick={this.handleAction}
isOutline={true}
color='brand'
backgroundColor='none'
2020-05-03 06:22:49 +01:00
icon={actionIcon}
iconSize='10px'
2020-04-23 07:13:29 +01:00
>
{actionTitle}
2020-03-02 22:26:25 +00:00
</Button>
2020-04-23 07:13:29 +01:00
) : <AccountActionButton account={account} isSmall />
2020-03-02 22:26:25 +00:00
const avatarSize = compact ? 42 : 52
2020-04-23 07:13:29 +01:00
const dismissBtn = !showDismiss ? null : (
2020-03-02 22:26:25 +00:00
<Button
2020-04-23 07:13:29 +01:00
isNarrow
2020-03-02 22:26:25 +00:00
backgroundColor='none'
2020-03-11 23:56:18 +00:00
className={_s.px5}
2020-03-02 22:26:25 +00:00
onClick={dismissAction}
icon='close'
2020-04-23 07:13:29 +01:00
iconSize='8px'
2020-04-29 23:32:49 +01:00
iconClassName={_s.fillSecondary}
2020-03-02 22:26:25 +00:00
/>
)
2020-04-29 23:32:49 +01:00
const content = { __html: account.get('note_emojified') }
2020-03-02 22:26:25 +00:00
return (
2020-04-29 23:32:49 +01:00
<div className={[_s.default, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary, _s.bgSubtle_onHover].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsStart].join(' ')}>
2020-03-02 22:26:25 +00:00
<NavLink
className={[_s.default, _s.noUnderline].join(' ')}
title={account.get('acct')}
to={`/${account.get('acct')}`}
>
<Avatar account={account} size={avatarSize} />
</NavLink>
2020-04-29 23:32:49 +01:00
<div className={[_s.default, _s.px10, _s.overflowHidden, _s.flexNormal].join(' ')}>
<div className={[_s.default, _s.flexRow].join(' ')}>
<NavLink
title={account.get('acct')}
to={`/${account.get('acct')}`}
className={[_s.default, _s.alignItemsStart, _s.noUnderline, _s.overflowHidden, _s.flexNormal].join(' ')}
>
<DisplayName account={account} isMultiline={compact} />
{!compact && actionButton}
</NavLink>
<div className={[_s.default].join(' ')}>
{dismissBtn}
{compact && actionButton}
</div>
</div>
{
withBio &&
<div className={[_s.py5, _s.dangerousContent].join(' ')} dangerouslySetInnerHTML={content} />
}
2020-03-02 22:26:25 +00:00
</div>
</div>
</div>
)
}
}