From 2702f3fd70bf9e75721961c545c3d0bf7ebce5c8 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 29 Apr 2022 20:41:14 -0500
Subject: [PATCH] ProfileStats: convert to TSX

---
 .../features/ui/components/profile_stats.js   | Bin 2009 -> 0 bytes
 .../features/ui/components/profile_stats.tsx  |  56 ++++++++++++++++++
 2 files changed, 56 insertions(+)
 delete mode 100644 app/soapbox/features/ui/components/profile_stats.js
 create mode 100644 app/soapbox/features/ui/components/profile_stats.tsx

diff --git a/app/soapbox/features/ui/components/profile_stats.js b/app/soapbox/features/ui/components/profile_stats.js
deleted file mode 100644
index 325a9c72f9abfa01ad7bc195d0c1fd2008c61c0a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2009
zcmdT^U2EGw5PbKq*g`=v*b=30juirdkU$$kn)l``t?g@0ckbP)Nh<W;yLXZ-e~>27
zyfpYB_U+Ej&di-GH^vg&ShKl%-k^h}H6=tF{yruDLv%8dZOtu;oVs)C{~wO7%CaJ{
zP<V(F>ZY<ko_gE^*czn%fjM1iQWGd}DK&mY=fsNHG`sVrl1ql6HC&5dU!;CGsIsOa
zw9~?rT-%ec!L51G>#AI!y)d>Ev~6=nY!>Dztw<`D>QLhM9(pgok;oq=aEDJrTau*h
zCpRpRMoliQr0>g(b_8X=M0T)MT#o>jMk(`%*3EzwC}t3eJU5l5WP1_?IYgzX(}RmH
z`nCv~$rk1%5ce{K3jocS>Ect!088&@!P(%)C|ANcpN^$e$RdyfmH>6(AjBcLsVtuN
z`$IiqN{-894&LfEQW^ga{O9eP4N*(X!uy^`cZ)wOX|eDN0dzXd;5b!@#oXB9s3p+6
z7A5Y&JF-%*T1=zQmCPS5g)S7@-Ku4!b6?YV>XtV{8;?7}t&cvSq&O`Z&|130FXm1H
z)xMykJc0c=M?IlQE+PKVb@Y?`XsWCRT`ARK2SNbt2reg{-*qJ`q}b<$BJZCUt!t0N
z7l3)2SP)9C^c7+0vMA?-qK&|9M2=bgxjF5MxxBwgWU~4`J^NUD@Fv|x@xJL-%j*3d
z8z4!F@w`Z!U4OIMTNdxJ-9mj2DUZhEo%wGf{AsU&Tf%LmHI|t1gC$F0pCfogxmr^e
zEsQF7SNWR{T^S9#dbI%RqvzmNx?8n;|2*~6_fcCyZzZs!S9iVR{>2!cfN}H6)Op%E
zJusQ4otdX?G6LJb`pdWEz5HdU|H<Dyy00kR2k!m+b^qqBH`WJnHvs$`gr}?-{Q)d|
Bf`9-3

diff --git a/app/soapbox/features/ui/components/profile_stats.tsx b/app/soapbox/features/ui/components/profile_stats.tsx
new file mode 100644
index 0000000000..8ef98374f6
--- /dev/null
+++ b/app/soapbox/features/ui/components/profile_stats.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
+import { NavLink } from 'react-router-dom';
+
+import { shortNumberFormat } from 'soapbox/utils/numbers';
+
+import { HStack, Text } from '../../../components/ui';
+
+import type { Account } from 'soapbox/types/entities';
+
+const messages = defineMessages({
+  followers: { id: 'account.followers', defaultMessage: 'Followers' },
+  follows: { id: 'account.follows', defaultMessage: 'Follows' },
+});
+
+interface IProfileStats {
+  account: Account | undefined,
+  onClickHandler?: React.MouseEventHandler,
+}
+
+/** Display follower and following counts for an account. */
+const ProfileStats: React.FC<IProfileStats> = ({ account, onClickHandler }) => {
+  const intl = useIntl();
+
+  if (!account) {
+    return null;
+  }
+
+  return (
+    <HStack alignItems='center' space={3}>
+      <NavLink to={`/@${account.acct}/followers`} onClick={onClickHandler} title={intl.formatNumber(account.followers_count)}>
+        <HStack alignItems='center' space={1}>
+          <Text theme='primary' weight='bold' size='sm'>
+            {shortNumberFormat(account.followers_count)}
+          </Text>
+          <Text weight='bold' size='sm'>
+            {intl.formatMessage(messages.followers)}
+          </Text>
+        </HStack>
+      </NavLink>
+
+      <NavLink to={`/@${account.acct}/following`} onClick={onClickHandler} title={intl.formatNumber(account.following_count)}>
+        <HStack alignItems='center' space={1}>
+          <Text theme='primary' weight='bold' size='sm'>
+            {shortNumberFormat(account.following_count)}
+          </Text>
+          <Text weight='bold' size='sm'>
+            {intl.formatMessage(messages.follows)}
+          </Text>
+        </HStack>
+      </NavLink>
+    </HStack>
+  );
+};
+
+export default ProfileStats;