matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ProfileStats: convert to TSX

Browse Source
This commit is contained in:
Alex Gleason
2022-04-29 20:41:14 -05:00
parent 0127d282e2
commit 2702f3fd70
2 changed files with 56 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
app/soapbox/features/ui/components/profile_stats.js
View File

@ -1,63 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { injectIntl, defineMessages } from 'react-intl';
import { NavLink } from 'react-router-dom';
import { shortNumberFormat } from 'soapbox/utils/numbers';
import { HStack, Text } from '../../../components/ui';
const messages = defineMessages({
followers: { id: 'account.followers', defaultMessage: 'Followers' },
follows: { id: 'account.follows', defaultMessage: 'Follows' },
});
export default @injectIntl
class ProfileStats extends React.PureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
account: ImmutablePropTypes.record.isRequired,
className: PropTypes.string,
onClickHandler: PropTypes.func,
}
render() {
const { intl } = this.props;
const { account, onClickHandler } = this.props;
if (!account) {
return null;
}
const acct = account.get('acct');
return (
<HStack alignItems='center' space={3}>
<NavLink to={`/@${acct}/followers`} onClick={onClickHandler} title={intl.formatNumber(account.get('followers_count'))}>
<HStack alignItems='center' space={1}>
<Text theme='primary' weight='bold' size='sm'>
{shortNumberFormat(account.get('followers_count'))}
</Text>
<Text weight='bold' size='sm'>
{intl.formatMessage(messages.followers)}
</Text>
</HStack>
</NavLink>
<NavLink to={`/@${acct}/following`} onClick={onClickHandler} title={intl.formatNumber(account.get('following_count'))}>
<HStack alignItems='center' space={1}>
<Text theme='primary' weight='bold' size='sm'>
{shortNumberFormat(account.get('following_count'))}
</Text>
<Text weight='bold' size='sm'>
{intl.formatMessage(messages.follows)}
</Text>
</HStack>
</NavLink>
</HStack>
);
}
}

56
app/soapbox/features/ui/components/profile_stats.tsx Normal file
View File

@ -0,0 +1,56 @@
import React from 'react';
import { useIntl, defineMessages } from 'react-intl';
import { NavLink } from 'react-router-dom';
import { shortNumberFormat } from 'soapbox/utils/numbers';
import { HStack, Text } from '../../../components/ui';
import type { Account } from 'soapbox/types/entities';
const messages = defineMessages({
followers: { id: 'account.followers', defaultMessage: 'Followers' },
follows: { id: 'account.follows', defaultMessage: 'Follows' },
});
interface IProfileStats {
account: Account | undefined,
onClickHandler?: React.MouseEventHandler,
}
/** Display follower and following counts for an account. */
const ProfileStats: React.FC<IProfileStats> = ({ account, onClickHandler }) => {
const intl = useIntl();
if (!account) {
return null;
}
return (
<HStack alignItems='center' space={3}>
<NavLink to={`/@${account.acct}/followers`} onClick={onClickHandler} title={intl.formatNumber(account.followers_count)}>
<HStack alignItems='center' space={1}>
<Text theme='primary' weight='bold' size='sm'>
{shortNumberFormat(account.followers_count)}
</Text>
<Text weight='bold' size='sm'>
{intl.formatMessage(messages.followers)}
</Text>
</HStack>
</NavLink>
<NavLink to={`/@${account.acct}/following`} onClick={onClickHandler} title={intl.formatNumber(account.following_count)}>
<HStack alignItems='center' space={1}>
<Text theme='primary' weight='bold' size='sm'>
{shortNumberFormat(account.following_count)}
</Text>
<Text weight='bold' size='sm'>
{intl.formatMessage(messages.follows)}
</Text>
</HStack>
</NavLink>
</HStack>
);
};
export default ProfileStats;