From 5cbeaad97a2729ab8d5c2962102059c287f6e069 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 13 Sep 2021 13:09:11 -0500
Subject: [PATCH] Add ProfileStats component

---
 .../ui/components/profile_info_panel.js       |  3 ++
 .../features/ui/components/profile_stats.js   | 45 +++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 app/soapbox/features/ui/components/profile_stats.js

diff --git a/app/soapbox/features/ui/components/profile_info_panel.js b/app/soapbox/features/ui/components/profile_info_panel.js
index dee534127..64e25ad4c 100644
--- a/app/soapbox/features/ui/components/profile_info_panel.js
+++ b/app/soapbox/features/ui/components/profile_info_panel.js
@@ -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) => (
diff --git a/app/soapbox/features/ui/components/profile_stats.js b/app/soapbox/features/ui/components/profile_stats.js
new file mode 100644
index 000000000..2533c581d
--- /dev/null
+++ b/app/soapbox/features/ui/components/profile_stats.js
@@ -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>
+    );
+  }
+
+}