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 dd5aff1d8e..fbcd4cfb3d 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 { {!minimal && (
- {verification} {muteTimeRemaining} + {verification} {muteTimeRemaining}
)} diff --git a/app/javascript/mastodon/components/common_counter.jsx b/app/javascript/mastodon/components/common_counter.jsx deleted file mode 100644 index 23e1f22638..0000000000 --- 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) => {displayNumber} - : (displayNumber) => displayNumber; - - switch (counterType) { - case 'statuses': { - return (displayNumber, pluralReady) => ( - - ); - } - case 'following': { - return (displayNumber, pluralReady) => ( - - ); - } - case 'followers': { - return (displayNumber, pluralReady) => ( - - ); - } - 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 0000000000..e0c818f247 --- /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 +) => ( + {displayNumber}, + }} + /> +); + +export const FollowingCounter = ( + displayNumber: React.ReactNode, + pluralReady: number +) => ( + {displayNumber}, + }} + /> +); + +export const FollowersCounter = ( + displayNumber: React.ReactNode, + pluralReady: number +) => ( + {displayNumber}, + }} + /> +); diff --git a/app/javascript/mastodon/features/account/components/header.jsx b/app/javascript/mastodon/features/account/components/header.jsx index b718e860d0..f7ebc34bca 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 {