simplify counters (#25541)
parent
3f04f0c37b
commit
4106a801a0
|
@ -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>
|
||||
|
|
|
@ -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`);
|
||||
}
|
||||
}
|
|
@ -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>,
|
||||
}}
|
||||
/>
|
||||
);
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue