911cc14481
* Add follow_request notification type The notification type already existed in the backend but was never pushed to the front-end. This also means translation strings were also available for the backend, from the notification mailer. Unlike other notification types, these are off by default, to match what I remember of Gargron's view on the topic: that follow requests should not clutter notifications and should instead be reviewed at the user's own leisure in the dedicated column. Since follow requests have their own column, I've deemed it unnecessary to add a specific tab for them in the notification quick filter. * Show follow request link in single-column if there are pending requests, even if account isn't locked * Push follow requests from notifications to the follow_requests list * Offer to accept or reject follow request from the notification * Redesign follow request notification
60 lines
2 KiB
JavaScript
60 lines
2 KiB
JavaScript
import React, { Fragment } from 'react';
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
import PropTypes from 'prop-types';
|
|
import Avatar from 'mastodon/components/avatar';
|
|
import DisplayName from 'mastodon/components/display_name';
|
|
import Permalink from 'mastodon/components/permalink';
|
|
import IconButton from 'mastodon/components/icon_button';
|
|
import { defineMessages, injectIntl } from 'react-intl';
|
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
|
|
const messages = defineMessages({
|
|
authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
|
|
reject: { id: 'follow_request.reject', defaultMessage: 'Reject' },
|
|
});
|
|
|
|
export default @injectIntl
|
|
class FollowRequest extends ImmutablePureComponent {
|
|
|
|
static propTypes = {
|
|
account: ImmutablePropTypes.map.isRequired,
|
|
onAuthorize: PropTypes.func.isRequired,
|
|
onReject: PropTypes.func.isRequired,
|
|
intl: PropTypes.object.isRequired,
|
|
};
|
|
|
|
render () {
|
|
const { intl, hidden, account, onAuthorize, onReject } = this.props;
|
|
|
|
if (!account) {
|
|
return <div />;
|
|
}
|
|
|
|
if (hidden) {
|
|
return (
|
|
<Fragment>
|
|
{account.get('display_name')}
|
|
{account.get('username')}
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className='account'>
|
|
<div className='account__wrapper'>
|
|
<Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/accounts/${account.get('id')}`}>
|
|
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
|
|
<DisplayName account={account} />
|
|
</Permalink>
|
|
|
|
<div className='account__relationship'>
|
|
<IconButton title={intl.formatMessage(messages.authorize)} icon='check' onClick={onAuthorize} />
|
|
<IconButton title={intl.formatMessage(messages.reject)} icon='times' onClick={onReject} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
}
|