Refactor NumberFields to standalone component (#38455)

This commit is contained in:
diondiondion
2026-03-27 17:13:07 +01:00
committed by GitHub
parent 098d698a7e
commit e303c89e4d
5 changed files with 120 additions and 81 deletions

View File

@@ -3,7 +3,6 @@ import type { FC } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import classNames from 'classnames';
import { NavLink } from 'react-router-dom';
import {
@@ -12,13 +11,15 @@ import {
StatusesCounter,
} from '@/mastodon/components/counters';
import { FormattedDateWrapper } from '@/mastodon/components/formatted_date';
import {
NumberFields,
NumberFieldsItem,
} from '@/mastodon/components/number_fields';
import { ShortNumber } from '@/mastodon/components/short_number';
import { useAccount } from '@/mastodon/hooks/useAccount';
import { isRedesignEnabled } from '../common';
import classes from './redesign.module.scss';
const LegacyNumberFields: FC<{ accountId: string }> = ({ accountId }) => {
const intl = useIntl();
const account = useAccount(accountId);
@@ -77,56 +78,51 @@ const RedesignNumberFields: FC<{ accountId: string }> = ({ accountId }) => {
}
return (
<ul
className={classNames(
'account__header__extra__links',
classes.fieldNumbersWrapper,
)}
>
<li>
<FormattedMessage id='account.posts' defaultMessage='Posts' />
<strong title={intl.formatNumber(account.statuses_count)}>
<ShortNumber value={account.statuses_count} />
</strong>
</li>
<NumberFields>
<NumberFieldsItem
label={<FormattedMessage id='account.posts' defaultMessage='Posts' />}
hint={intl.formatNumber(account.statuses_count)}
>
<ShortNumber value={account.statuses_count} />
</NumberFieldsItem>
<li>
<FormattedMessage id='account.followers' defaultMessage='Followers' />
<NavLink
exact
to={`/@${account.acct}/followers`}
title={intl.formatNumber(account.followers_count)}
>
<ShortNumber value={account.followers_count} />
</NavLink>
</li>
<NumberFieldsItem
label={
<FormattedMessage id='account.followers' defaultMessage='Followers' />
}
hint={intl.formatNumber(account.followers_count)}
link={`/@${account.acct}/followers`}
>
<ShortNumber value={account.followers_count} />
</NumberFieldsItem>
<li>
<FormattedMessage id='account.following' defaultMessage='Following' />
<NavLink
exact
to={`/@${account.acct}/following`}
title={intl.formatNumber(account.following_count)}
>
<ShortNumber value={account.following_count} />
</NavLink>
</li>
<NumberFieldsItem
label={
<FormattedMessage id='account.following' defaultMessage='Following' />
}
hint={intl.formatNumber(account.following_count)}
link={`/@${account.acct}/following`}
>
<ShortNumber value={account.following_count} />
</NumberFieldsItem>
<li>
<FormattedMessage id='account.joined_short' defaultMessage='Joined' />
<strong title={intl.formatDate(account.created_at)}>
{createdThisYear ? (
<FormattedDateWrapper
value={account.created_at}
month='short'
day='2-digit'
/>
) : (
<FormattedDateWrapper value={account.created_at} year='numeric' />
)}
</strong>
</li>
</ul>
<NumberFieldsItem
label={
<FormattedMessage id='account.joined_short' defaultMessage='Joined' />
}
hint={intl.formatDate(account.created_at)}
>
{createdThisYear ? (
<FormattedDateWrapper
value={account.created_at}
month='short'
day='2-digit'
/>
) : (
<FormattedDateWrapper value={account.created_at} year='numeric' />
)}
</NumberFieldsItem>
</NumberFields>
);
};