0
0
Fork 0

Improve how the list entry Account component looks when target is blocked/follow is requested

This commit is contained in:
Eugen Rochko 2017-01-16 19:36:32 +01:00
parent 99fe89026c
commit 6cf44ca92c
4 changed files with 43 additions and 7 deletions

View file

@ -8,7 +8,9 @@ import { defineMessages, injectIntl } from 'react-intl';
const messages = defineMessages({
follow: { id: 'account.follow', defaultMessage: 'Follow' },
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
unblock: { id: 'account.unblock', defaultMessage: 'Unblock' }
});
const outerStyle = {
@ -42,7 +44,9 @@ const Account = React.createClass({
account: ImmutablePropTypes.map.isRequired,
me: React.PropTypes.number.isRequired,
onFollow: React.PropTypes.func.isRequired,
withNote: React.PropTypes.bool
onBlock: React.PropTypes.func.isRequired,
withNote: React.PropTypes.bool,
intl: React.PropTypes.object.isRequired
},
getDefaultProps () {
@ -57,6 +61,10 @@ const Account = React.createClass({
this.props.onFollow(this.props.account);
},
handleBlock () {
this.props.onBlock(this.props.account);
},
render () {
const { account, me, withNote, intl } = this.props;
@ -70,10 +78,18 @@ const Account = React.createClass({
note = <div style={noteStyle}>{account.get('note')}</div>;
}
if (account.get('id') !== me && account.get('relationship', null) != null) {
if (account.get('id') !== me && account.get('relationship', null) !== null) {
const following = account.getIn(['relationship', 'following']);
const requested = account.getIn(['relationship', 'requested']);
const blocking = account.getIn(['relationship', 'blocking']);
buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />;
if (requested) {
buttons = <IconButton disabled={true} icon='hourglass' title={intl.formatMessage(messages.requested)} />
} else if (blocking) {
buttons = <IconButton active={true} icon='unlock-alt' title={intl.formatMessage(messages.unblock)} onClick={this.handleBlock} />;
} else {
buttons = <IconButton icon={following ? 'user-times' : 'user-plus'} title={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={this.handleFollow} active={following} />;
}
}
return (