simplify counters (#25541)

app/javascript/mastodon/components/account.jsx

@@ -8,7 +8,6 @@ import { Link } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { counterRenderer } from 'mastodon/components/common_counter';
 import { EmptyAccount } from 'mastodon/components/empty_account';
 import ShortNumber from 'mastodon/components/short_number';
 import { VerifiedBadge } from 'mastodon/components/verified_badge';
@@ -17,6 +16,7 @@ import { me } from '../initial_state';
 
 import { Avatar } from './avatar';
 import Button from './button';
+import { FollowersCounter } from './counters';
 import { DisplayName } from './display_name';
 import { IconButton } from './icon_button';
 import { RelativeTimestamp } from './relative_timestamp';
@@ -160,7 +160,7 @@ class Account extends ImmutablePureComponent {
               <DisplayName account={account} />
               {!minimal && (
                 <div className='account__details'>
-                  <ShortNumber value={account.get('followers_count')} renderer={counterRenderer('followers')} /> {verification} {muteTimeRemaining}
+                  <ShortNumber value={account.get('followers_count')} renderer={FollowersCounter} /> {verification} {muteTimeRemaining}
                 </div>
               )}
             </div>

app/javascript/mastodon/components/common_counter.jsx

@@ -1,60 +0,0 @@
-// @ts-check
-import { FormattedMessage } from 'react-intl';
-
-/**
- * Returns custom renderer for one of the common counter types
- * @param {"statuses" | "following" | "followers"} counterType
- * Type of the counter
- * @param {boolean} isBold Whether display number must be displayed in bold
- * @returns {(displayNumber: JSX.Element, pluralReady: number) => JSX.Element}
- * Renderer function
- * @throws If counterType is not covered by this function
- */
-export function counterRenderer(counterType, isBold = true) {
-  /**
-   * @type {(displayNumber: JSX.Element) => JSX.Element}
-   */
-  const renderCounter = isBold
-    ? (displayNumber) => <strong>{displayNumber}</strong>
-    : (displayNumber) => displayNumber;
-
-  switch (counterType) {
-  case 'statuses': {
-    return (displayNumber, pluralReady) => (
-      <FormattedMessage
-        id='account.statuses_counter'
-        defaultMessage='{count, plural, one {{counter} Post} other {{counter} Posts}}'
-        values={{
-          count: pluralReady,
-          counter: renderCounter(displayNumber),
-        }}
-      />
-    );
-  }
-  case 'following': {
-    return (displayNumber, pluralReady) => (
-      <FormattedMessage
-        id='account.following_counter'
-        defaultMessage='{count, plural, one {{counter} Following} other {{counter} Following}}'
-        values={{
-          count: pluralReady,
-          counter: renderCounter(displayNumber),
-        }}
-      />
-    );
-  }
-  case 'followers': {
-    return (displayNumber, pluralReady) => (
-      <FormattedMessage
-        id='account.followers_counter'
-        defaultMessage='{count, plural, one {{counter} Follower} other {{counter} Followers}}'
-        values={{
-          count: pluralReady,
-          counter: renderCounter(displayNumber),
-        }}
-      />
-    );
-  }
-  default: throw Error(`Incorrect counter name: ${counterType}. Ensure it accepted by commonCounter function`);
-  }
-}

app/javascript/mastodon/components/counters.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+export const StatusesCounter = (
+  displayNumber: React.ReactNode,
+  pluralReady: number
+) => (
+  <FormattedMessage
+    id='account.statuses_counter'
+    defaultMessage='{count, plural, one {{counter} Post} other {{counter} Posts}}'
+    values={{
+      count: pluralReady,
+      counter: <strong>{displayNumber}</strong>,
+    }}
+  />
+);
+
+export const FollowingCounter = (
+  displayNumber: React.ReactNode,
+  pluralReady: number
+) => (
+  <FormattedMessage
+    id='account.following_counter'
+    defaultMessage='{count, plural, one {{counter} Following} other {{counter} Following}}'
+    values={{
+      count: pluralReady,
+      counter: <strong>{displayNumber}</strong>,
+    }}
+  />
+);
+
+export const FollowersCounter = (
+  displayNumber: React.ReactNode,
+  pluralReady: number
+) => (
+  <FormattedMessage
+    id='account.followers_counter'
+    defaultMessage='{count, plural, one {{counter} Follower} other {{counter} Followers}}'
+    values={{
+      count: pluralReady,
+      counter: <strong>{displayNumber}</strong>,
+    }}
+  />
+);

app/javascript/mastodon/features/account/components/header.jsx

@@ -11,7 +11,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import { Avatar } from 'mastodon/components/avatar';
 import Button from 'mastodon/components/button';
-import { counterRenderer } from 'mastodon/components/common_counter';
+import { FollowersCounter, FollowingCounter, StatusesCounter } from 'mastodon/components/counters';
 import { Icon }  from 'mastodon/components/icon';
 import { IconButton } from 'mastodon/components/icon_button';
 import ShortNumber from 'mastodon/components/short_number';
@@ -451,21 +451,21 @@ class Header extends ImmutablePureComponent {
                 <NavLink isActive={this.isStatusesPageActive} activeClassName='active' to={`/@${account.get('acct')}`} title={intl.formatNumber(account.get('statuses_count'))}>
                   <ShortNumber
                     value={account.get('statuses_count')}
-                    renderer={counterRenderer('statuses')}
+                    renderer={StatusesCounter}
                   />
                 </NavLink>
 
                 <NavLink exact activeClassName='active' to={`/@${account.get('acct')}/following`} title={intl.formatNumber(account.get('following_count'))}>
                   <ShortNumber
                     value={account.get('following_count')}
-                    renderer={counterRenderer('following')}
+                    renderer={FollowingCounter}
                   />
                 </NavLink>
 
                 <NavLink exact activeClassName='active' to={`/@${account.get('acct')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
                   <ShortNumber
                     value={account.get('followers_count')}
-                    renderer={counterRenderer('followers')}
+                    renderer={FollowersCounter}
                   />
                 </NavLink>
               </div>