moon/soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add ProfileStats component

Browse Source
This commit is contained in:
Alex Gleason 2021-09-13 13:09:11 -05:00
parent b3fee28863
commit 5cbeaad97a
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 48 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/soapbox/features/ui/components/profile_info_panel.js
View File

@ -15,6 +15,7 @@ import { getAcct, isAdmin, isModerator, isLocal } from 'soapbox/utils/accounts';
import { displayFqn } from 'soapbox/utils/state';
import classNames from 'classnames';
import { CryptoAddress } from 'soapbox/features/ui/util/async-components';
import ProfileStats from './profile_stats';
const TICKER_REGEX = /\$([a-zA-Z]*)/i;
@ -143,6 +144,8 @@ class ProfileInfoPanel extends ImmutablePureComponent {
/>
</div>}
<ProfileStats account={account} />
{(fields.size > 0 || identity_proofs.size > 0) && (
<div className='profile-info-panel-content__fields'>
{identity_proofs.map((proof, i) => (

45
app/soapbox/features/ui/components/profile_stats.js Normal file
View File

@ -0,0 +1,45 @@
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { NavLink } from 'react-router-dom';
import { shortNumberFormat } from 'soapbox/utils/numbers';
import { injectIntl, defineMessages } from 'react-intl';
const messages = defineMessages({
followers: { id: 'account.followers', defaultMessage: 'Followers' },
follows: { id: 'account.follows', defaultMessage: 'Follows' },
});
export default @injectIntl
class ProfileStats extends React.PureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
account: ImmutablePropTypes.map.isRequired,
}
render() {
const { intl } = this.props;
const { account } = this.props;
if (!account) {
return null;
}
const acct = account.get('acct');
return (
<div className='sidebar-menu-profile__stats'>
<NavLink className='sidebar-menu-profile-stat' to={`/@${acct}/followers`} onClick={this.handleClose} title={intl.formatNumber(account.get('followers_count'))}>
<strong className='sidebar-menu-profile-stat__value'>{shortNumberFormat(account.get('followers_count'))}</strong>
<span className='sidebar-menu-profile-stat__label'>{intl.formatMessage(messages.followers)}</span>
</NavLink>
<NavLink className='sidebar-menu-profile-stat' to={`/@${acct}/following`} onClick={this.handleClose} title={intl.formatNumber(account.get('following_count'))}>
<strong className='sidebar-menu-profile-stat__value'>{shortNumberFormat(account.get('following_count'))}</strong>
<span className='sidebar-menu-profile-stat__label'>{intl.formatMessage(messages.follows)}</span>
</NavLink>
</div>
);
}
}