From e0d230fb37848efd788eea54a83869a63ff0fb39 Mon Sep 17 00:00:00 2001
From: fusagiko / takayamaki <24884114+takayamaki@users.noreply.github.com>
Date: Sat, 8 Jul 2023 18:11:22 +0900
Subject: [PATCH] simplify counters (#25541)
---
.../mastodon/components/account.jsx | 4 +-
.../mastodon/components/common_counter.jsx | 60 -------------------
.../mastodon/components/counters.tsx | 45 ++++++++++++++
.../features/account/components/header.jsx | 8 +--
4 files changed, 51 insertions(+), 66 deletions(-)
delete mode 100644 app/javascript/mastodon/components/common_counter.jsx
create mode 100644 app/javascript/mastodon/components/counters.tsx
diff --git a/app/javascript/mastodon/components/account.jsx b/app/javascript/mastodon/components/account.jsx
index dd5aff1d8..fbcd4cfb3 100644
--- a/app/javascript/mastodon/components/account.jsx
+++ b/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>
diff --git a/app/javascript/mastodon/components/common_counter.jsx b/app/javascript/mastodon/components/common_counter.jsx
deleted file mode 100644
index 23e1f2263..000000000
--- a/app/javascript/mastodon/components/common_counter.jsx
+++ /dev/null
@@ -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`);
- }
-}
diff --git a/app/javascript/mastodon/components/counters.tsx b/app/javascript/mastodon/components/counters.tsx
new file mode 100644
index 000000000..e0c818f24
--- /dev/null
+++ b/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>,
+ }}
+ />
+);
diff --git a/app/javascript/mastodon/features/account/components/header.jsx b/app/javascript/mastodon/features/account/components/header.jsx
index b718e860d..f7ebc34bc 100644
--- a/app/javascript/mastodon/features/account/components/header.jsx
+++ b/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>