87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
import { useCallback, useMemo } from 'react';
|
|
import type { FC } from 'react';
|
|
|
|
import { FormattedMessage, useIntl } from 'react-intl';
|
|
|
|
import { openModal } from '@/mastodon/actions/modal';
|
|
import { useAccount } from '@/mastodon/hooks/useAccount';
|
|
import { useAppDispatch } from '@/mastodon/store';
|
|
|
|
import { FormattedDateWrapper } from '../formatted_date';
|
|
import { NumberFields, NumberFieldsItem } from '../number_fields';
|
|
import { ShortNumber } from '../short_number';
|
|
|
|
import classes from './styles.module.scss';
|
|
|
|
export const AccountNumberFields: FC<{ accountId: string }> = ({
|
|
accountId,
|
|
}) => {
|
|
const intl = useIntl();
|
|
const account = useAccount(accountId);
|
|
const createdThisYear = useMemo(
|
|
() => account?.created_at.includes(new Date().getFullYear().toString()),
|
|
[account?.created_at],
|
|
);
|
|
|
|
const dispatch = useAppDispatch();
|
|
const showJoinModal = useCallback(() => {
|
|
dispatch(
|
|
openModal({ modalType: 'ACCOUNT_JOIN_DATE', modalProps: { accountId } }),
|
|
);
|
|
}, [accountId, dispatch]);
|
|
|
|
if (!account) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<NumberFields className={classes.numberFields}>
|
|
<NumberFieldsItem
|
|
label={
|
|
<FormattedMessage id='account.followers' defaultMessage='Followers' />
|
|
}
|
|
hint={intl.formatNumber(account.followers_count)}
|
|
link={`/@${account.acct}/followers`}
|
|
>
|
|
<ShortNumber value={account.followers_count} />
|
|
</NumberFieldsItem>
|
|
|
|
<NumberFieldsItem
|
|
label={
|
|
<FormattedMessage id='account.following' defaultMessage='Following' />
|
|
}
|
|
hint={intl.formatNumber(account.following_count)}
|
|
link={`/@${account.acct}/following`}
|
|
>
|
|
<ShortNumber value={account.following_count} />
|
|
</NumberFieldsItem>
|
|
|
|
<NumberFieldsItem
|
|
label={<FormattedMessage id='account.posts' defaultMessage='Posts' />}
|
|
hint={intl.formatNumber(account.statuses_count)}
|
|
>
|
|
<ShortNumber value={account.statuses_count} />
|
|
</NumberFieldsItem>
|
|
|
|
<NumberFieldsItem
|
|
label={
|
|
<FormattedMessage id='account.joined_short' defaultMessage='Joined' />
|
|
}
|
|
hint={intl.formatDate(account.created_at)}
|
|
>
|
|
<button type='button' onClick={showJoinModal}>
|
|
{createdThisYear ? (
|
|
<FormattedDateWrapper
|
|
value={account.created_at}
|
|
month='short'
|
|
day='2-digit'
|
|
/>
|
|
) : (
|
|
<FormattedDateWrapper value={account.created_at} year='numeric' />
|
|
)}
|
|
</button>
|
|
</NumberFieldsItem>
|
|
</NumberFields>
|
|
);
|
|
};
|