107 lines
3.1 KiB
TypeScript
107 lines
3.1 KiB
TypeScript
import { FormattedMessage, FormattedNumber } from 'react-intl';
|
|
|
|
import { NavLink } from 'react-router-dom';
|
|
import type { NavLinkProps } from 'react-router-dom';
|
|
|
|
import InfoIcon from '@/material-icons/400-24px/info.svg?react';
|
|
import { Icon } from 'flavours/glitch/components/icon';
|
|
import type { Account } from 'flavours/glitch/models/account';
|
|
|
|
const isStatusesPageActive: NavLinkProps['isActive'] = (match, location) => {
|
|
if (!match) {
|
|
return false;
|
|
}
|
|
return !/\/(followers|following)\/?$/.exec(location.pathname);
|
|
};
|
|
|
|
export const ActionBar: React.FC<{ account: Account }> = ({ account }) => {
|
|
if (account.suspended) {
|
|
return (
|
|
<div>
|
|
<div className='account__disclaimer'>
|
|
<Icon id='info-circle' icon={InfoIcon} />
|
|
<FormattedMessage
|
|
id='account.suspended_disclaimer_full'
|
|
defaultMessage='This user has been suspended by a moderator.'
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
let extraInfo = null;
|
|
|
|
if (account.get('acct') !== account.get('username')) {
|
|
extraInfo = (
|
|
<div className='account__disclaimer'>
|
|
<Icon id='info-circle' icon={InfoIcon} />
|
|
<div>
|
|
<FormattedMessage
|
|
id='account.disclaimer_full'
|
|
defaultMessage="Information below may reflect the user's profile incompletely."
|
|
/>{' '}
|
|
<a target='_blank' rel='noopener' href={account.get('url')}>
|
|
<FormattedMessage
|
|
id='account.view_full_profile'
|
|
defaultMessage='View full profile'
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{extraInfo}
|
|
|
|
<div className='account__action-bar'>
|
|
<div className='account__action-bar-links'>
|
|
<NavLink
|
|
isActive={isStatusesPageActive}
|
|
activeClassName='active'
|
|
className='account__action-bar__tab'
|
|
to={`/@${account.get('acct')}`}
|
|
>
|
|
<FormattedMessage id='account.posts' defaultMessage='Posts' />
|
|
<strong>
|
|
<FormattedNumber value={account.get('statuses_count')} />
|
|
</strong>
|
|
</NavLink>
|
|
|
|
<NavLink
|
|
exact
|
|
activeClassName='active'
|
|
className='account__action-bar__tab'
|
|
to={`/@${account.get('acct')}/following`}
|
|
>
|
|
<FormattedMessage id='account.follows' defaultMessage='Follows' />
|
|
<strong>
|
|
<FormattedNumber value={account.get('following_count')} />
|
|
</strong>
|
|
</NavLink>
|
|
|
|
<NavLink
|
|
exact
|
|
activeClassName='active'
|
|
className='account__action-bar__tab'
|
|
to={`/@${account.get('acct')}/followers`}
|
|
>
|
|
<FormattedMessage
|
|
id='account.followers'
|
|
defaultMessage='Followers'
|
|
/>
|
|
<strong>
|
|
{account.get('followers_count') < 0 ? (
|
|
'-'
|
|
) : (
|
|
<FormattedNumber value={account.get('followers_count')} />
|
|
)}
|
|
</strong>
|
|
</NavLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|