From 001234dae17f74fcd090baf3f5c762873948d9b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 5 May 2024 14:48:57 +0200
Subject: [PATCH] Use animated number for counters
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/components/animated-number.tsx    | 11 ++++++++---
 src/components/ui/counter/counter.tsx |  4 ++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/animated-number.tsx b/src/components/animated-number.tsx
index 90672e65e..2c49dee9e 100644
--- a/src/components/animated-number.tsx
+++ b/src/components/animated-number.tsx
@@ -15,7 +15,7 @@ const obfuscatedCount = (count: number): string => {
   }
 };
 
-const shortNumberFormat = (number: any, intl: IntlShape) => {
+const shortNumberFormat = (number: any, intl: IntlShape, max?: number) => {
   if (!isNumber(number)) return '•';
 
   let value = number;
@@ -28,6 +28,10 @@ const shortNumberFormat = (number: any, intl: IntlShape) => {
     value = roundDown(value / 1000000);
   }
 
+  if (max && value > max) {
+    return `${max}+`;
+  }
+
   return intl.formatNumber(value, {
     maximumFractionDigits: 0,
     minimumFractionDigits: 0,
@@ -41,9 +45,10 @@ interface IAnimatedNumber {
   value: number;
   obfuscate?: boolean;
   short?: boolean;
+  max?: number;
 }
 
-const AnimatedNumber: React.FC<IAnimatedNumber> = ({ value, obfuscate, short }) => {
+const AnimatedNumber: React.FC<IAnimatedNumber> = ({ value, obfuscate, short, max }) => {
   const intl = useIntl();
   const { reduceMotion } = useSettings();
 
@@ -61,7 +66,7 @@ const AnimatedNumber: React.FC<IAnimatedNumber> = ({ value, obfuscate, short })
     setFormattedValue(obfuscate
       ? obfuscatedCount(value)
       : short
-        ? shortNumberFormat(value, intl)
+        ? shortNumberFormat(value, intl, max)
         : intl.formatNumber(value, { numberingSystem: 'latn' }));
   }, [value]);
 
diff --git a/src/components/ui/counter/counter.tsx b/src/components/ui/counter/counter.tsx
index 8f350f675..bb7277a29 100644
--- a/src/components/ui/counter/counter.tsx
+++ b/src/components/ui/counter/counter.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import AnimatedNumber from 'soapbox/components/animated-number';
 
 interface ICounter {
   /** Number this counter should display. */
@@ -13,7 +13,7 @@ interface ICounter {
 const Counter: React.FC<ICounter> = ({ count, countMax }) => {
   return (
     <span className='flex h-5 min-w-[20px] max-w-[26px] items-center justify-center rounded-full bg-secondary-500 text-xs font-medium text-white ring-2 ring-white black:ring-black dark:ring-gray-800'>
-      {shortNumberFormat(count, countMax)}
+      <AnimatedNumber value={count} max={countMax} />
     </span>
   );
 };