gab-social/app/javascript/gabsocial/components/panel/profile_stats_panel.js
2020-05-08 22:17:19 -04:00

80 lines
2.5 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'
import Dummy from '../dummy'
import ResponsiveClassesComponent from '../../features/ui/util/responsive_classes_component'
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,
noPanel: PropTypes.bool,
}
render() {
const {
intl,
account,
noPanel
} = this.props
if (!account) return null
const Wrapper = noPanel ? Dummy : PanelLayout
return (
<Wrapper>
{
!!account &&
<ResponsiveClassesComponent
classNames={[_s.default, _s.flexRow].join(' ')}
classNamesXS={[_s.default, _s.flexRow, _s.mt15, _s.pt10].join(' ')}
>
<UserStat
title={intl.formatMessage(messages.gabs)}
value={shortNumberFormat(account.get('statuses_count'))}
to={`/${account.get('acct')}`}
isCentered={noPanel}
/>
<UserStat
title={intl.formatMessage(messages.follows)}
value={shortNumberFormat(account.get('following_count'))}
to={`/${account.get('acct')}/following`}
isCentered={noPanel}
/>
<UserStat
title={intl.formatMessage(messages.followers)}
value={shortNumberFormat(account.get('followers_count'))}
to={`/${account.get('acct')}/followers`}
isCentered={noPanel}
/>
{
account.get('id') === me &&
<UserStat
title={intl.formatMessage(messages.likes)}
value={shortNumberFormat(favouritesCount)}
to={`/${account.get('acct')}/likes`}
isCentered={noPanel}
/>
}
</ResponsiveClassesComponent>
}
</Wrapper>
)
}
}