mastodon/app/javascript/mastodon/features/follow_requests/components/account_authorize.js

123 lines
4.0 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Permalink from '../../../components/permalink';
import Avatar from '../../../components/avatar';
import DisplayName from '../../../components/display_name';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import { shortNumberFormat } from 'mastodon/utils/numbers';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { NavLink } from 'react-router-dom';
const messages = defineMessages({
authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
reject : { id: 'follow_request.reject', defaultMessage: 'Reject' },
});
export default @injectIntl
class AccountAuthorize extends ImmutablePureComponent {
static propTypes = {
account : ImmutablePropTypes.map.isRequired,
onAuthorize: PropTypes.func.isRequired,
onReject : PropTypes.func.isRequired,
intl : PropTypes.object.isRequired,
};
render() {
const { intl, account, onAuthorize, onReject } = this.props;
const content = { __html: account.get('note_emojified') };
return (
<div className='account-authorize__wrapper'>
<div className='account-authorize'>
<Permalink
href={account.get('url')}
to={`/accounts/${account.get('id')}`}
className='detailed-status__display-name'
>
<div className='account-authorize__avatar'>
<Avatar
account={account}
size={100}
/>
</div >
<DisplayName account={account} />
</Permalink >
{/*count posts*/}
<span className='account-authorize--more-data'>
<NavLink
isActive={this.isStatusesPageActive}
activeClassName='active'
to={`/accounts/${account.get('id')}`}
title={intl.formatNumber(account.get('statuses_count'))}
>
<i className='fa fa-comment' />
<strong >{shortNumberFormat(account.get('statuses_count'))}</strong > <FormattedMessage
id='account.posts'
defaultMessage='Toots'
/>
</NavLink >
<NavLink
exact
activeClassName='active'
to={`/accounts/${account.get('id')}/following`}
title={intl.formatNumber(account.get('following_count'))}
>
<strong >{shortNumberFormat(account.get('following_count'))}</strong > <FormattedMessage
id='account.follows'
defaultMessage='Follows'
/>
</NavLink >
<NavLink
exact
activeClassName='active'
to={`/accounts/${account.get('id')}/followers`}
title={intl.formatNumber(account.get('followers_count'))}
>
<strong >{shortNumberFormat(account.get('followers_count'))}</strong > <FormattedMessage
id='account.followers'
defaultMessage='Followers'
/>
</NavLink >
</span >
<div
className='account__header__content'
dangerouslySetInnerHTML={content}
/>
</div >
<div className='account--panel'>
<div
className='account--panel__button account--panel__button__allow clickable'
onClick={onAuthorize}
>
<i
className='fa fa-check'
title={intl.formatMessage(messages.authorize)}
/>
{intl.formatMessage(messages.authorize)}
</div >
<div
className='account--panel__button account--panel__button__reject clickable'
onClick={onReject}
>
<i
className='fa fa-times'
title={intl.formatMessage(messages.reject)}
/>
{intl.formatMessage(messages.reject)}
</div >
</div >
</div >
);
}
}