gab-social/app/javascript/gabsocial/components/panel/profile_stats_panel.js
2020-03-24 00:39:12 -04:00

64 lines
2.0 KiB
JavaScript

import { defineMessages, injectIntl } from 'react-intl'
import ImmutablePureComponent from 'react-immutable-pure-component'
import ImmutablePropTypes from 'react-immutable-proptypes'
import { me, favouritesCount } from '../../initial_state'
import { shortNumberFormat } from '../../utils/numbers'
import PanelLayout from './panel_layout'
import UserStat from '../user_stat'
const messages = defineMessages({
gabs: { id: 'account.gabs', defaultMessage: 'Gabs' },
followers: { id: 'account.followers', defaultMessage: 'Followers' },
follows: { id: 'account.follows', defaultMessage: 'Follows' },
likes: { id: 'likes', defaultMessage: 'Likes' },
})
export default
@injectIntl
class ProfileStatsPanel extends ImmutablePureComponent {
static propTypes = {
account: ImmutablePropTypes.map,
intl: PropTypes.object.isRequired,
}
render() {
const { intl, account } = this.props
if (!account) return null
return (
<PanelLayout>
{
!!account &&
<div className={[_s.default, _s.flexRow].join(' ')}>
<UserStat
title={intl.formatMessage(messages.gabs)}
value={shortNumberFormat(account.get('statuses_count'))}
to={`/${account.get('acct')}`}
/>
<UserStat
title={intl.formatMessage(messages.follows)}
value={shortNumberFormat(account.get('following_count'))}
to={`/${account.get('acct')}/following`}
/>
<UserStat
title={intl.formatMessage(messages.followers)}
value={shortNumberFormat(account.get('followers_count'))}
to={`/${account.get('acct')}/followers`}
/>
{
account.get('id') === me &&
<UserStat
title={intl.formatMessage(messages.likes)}
value={shortNumberFormat(favouritesCount)}
to={`/${account.get('acct')}/likes`}
/>
}
</div>
}
</PanelLayout>
)
}
}