moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Convert display-name to TS

This commit is contained in:
Kevin Brown 2022-05-13 12:12:19 -04:00
parent 78b7752ac0
commit 6bf0d5847b
No known key found for this signature in database
GPG Key ID: 350938C3CB01A603
15 changed files with 65 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/soapbox/components/__tests__/display_name.test.js
View File

@ -3,7 +3,7 @@ import React from 'react';
import { normalizeAccount } from 'soapbox/normalizers';
import { render, screen } from '../../jest/test-helpers';
import DisplayName from '../display_name';
import DisplayName from '../display-name';
describe('<DisplayName />', () => {
it('renders display name + account name', () => {

51
app/soapbox/components/display-name.tsx Normal file
View File

@ -0,0 +1,51 @@
import * as React from 'react';
import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
import { useSoapboxConfig } from 'soapbox/hooks';
import { getAcct } from '../utils/accounts';
import Icon from './icon';
import RelativeTimestamp from './relative_timestamp';
import VerificationBadge from './verification_badge';
import type { Account } from 'soapbox/types/entities';
interface IDisplayName {
account: Account
withDate?: boolean
}
const DisplayName: React.FC<IDisplayName> = ({ account, children, withDate = false }) => {
const { displayFqn = false } = useSoapboxConfig();
const { created_at: createdAt, verified } = account;
const joinedAt = createdAt ? (
<div className='account__joined-at'>
<Icon src={require('@tabler/icons/icons/clock.svg')} />
<RelativeTimestamp timestamp={createdAt} />
</div>
) : null;
const displayName = (
<span className='display-name__name'>
<bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>
{verified && <VerificationBadge />}
{withDate && joinedAt}
</span>
);
const suffix = (<span className='display-name__account'>@{getAcct(account, displayFqn)}</span>);
return (
<span className='display-name' data-testid='display-name'>
<HoverRefWrapper accountId={account.get('id')} inline>
{displayName}
</HoverRefWrapper>
{suffix}
{children}
</span>
);
};
export default DisplayName;

85
app/soapbox/components/display_name.js
View File

@ -1,85 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
import { displayFqn } from 'soapbox/utils/state';
import { getAcct } from '../utils/accounts';
import Icon from './icon';
import RelativeTimestamp from './relative_timestamp';
import VerificationBadge from './verification_badge';
const mapStateToProps = state => {
return {
displayFqn: displayFqn(state),
};
};
export default @connect(mapStateToProps)
class DisplayName extends React.PureComponent {
static propTypes = {
account: ImmutablePropTypes.record.isRequired,
displayFqn: PropTypes.bool,
others: ImmutablePropTypes.list,
children: PropTypes.node,
withDate: PropTypes.bool,
};
static defaultProps = {
withDate: false,
}
render() {
const { account, displayFqn, others, children, withDate } = this.props;
let displayName, suffix;
const verified = account.get('verified');
const createdAt = account.get('created_at');
const joinedAt = createdAt ? (
<div className='account__joined-at'>
<Icon src={require('@tabler/icons/icons/clock.svg')} />
<RelativeTimestamp timestamp={createdAt} />
</div>
) : null;
if (others?.size > 1) {
displayName = others.take(2).map(a => (
<span className='display-name__name' key={a.get('id')}>
<bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} /></bdi>
{verified && <VerificationBadge />}
{withDate && joinedAt}
</span>
)).reduce((prev, cur) => [prev, ', ', cur]);
if (others.size - 2 > 0) {
suffix = `+${others.size - 2}`;
}
} else {
displayName = (
<span className='display-name__name'>
<bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>
{verified && <VerificationBadge />}
{withDate && joinedAt}
</span>
);
suffix = <span className='display-name__account'>@{getAcct(account, displayFqn)}</span>;
}
return (
<span className='display-name' data-testid='display-name'>
<HoverRefWrapper accountId={account.get('id')} inline>
{displayName}
</HoverRefWrapper>
{suffix}
{children}
</span>
);
}
}

2
app/soapbox/features/account_timeline/components/moved_note.tsx
View File

@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
import { NavLink } from 'react-router-dom';
import AvatarOverlay from 'soapbox/components/avatar_overlay';
import DisplayName from 'soapbox/components/display_name';
import DisplayName from 'soapbox/components/display-name';
import Icon from 'soapbox/components/icon';
import type { Account as AccountEntity } from 'soapbox/types/entities';

2
app/soapbox/features/aliases/components/account.js
View File

@ -7,7 +7,7 @@ import { connect } from 'react-redux';
import { addToAliases } from 'soapbox/actions/aliases';
import Avatar from 'soapbox/components/avatar';
import DisplayName from 'soapbox/components/display_name';
import DisplayName from 'soapbox/components/display-name';
import IconButton from 'soapbox/components/icon_button';
import { makeGetAccount } from 'soapbox/selectors';
import { getFeatures } from 'soapbox/utils/features';

2
app/soapbox/features/birthdays/account.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import Avatar from 'soapbox/components/avatar';
import DisplayName from 'soapbox/components/display_name';
import DisplayName from 'soapbox/components/display-name';
import Icon from 'soapbox/components/icon';
import Permalink from 'soapbox/components/permalink';
import { useAppSelector } from 'soapbox/hooks';

2
app/soapbox/features/chats/components/chat.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { FormattedMessage } from 'react-intl';
import Avatar from 'soapbox/components/avatar';
import DisplayName from 'soapbox/components/display_name';
import DisplayName from 'soapbox/components/display-name';
import Icon from 'soapbox/components/icon';
import emojify from 'soapbox/features/emoji/emoji';
import { useAppSelector } from 'soapbox/hooks';

2
app/soapbox/features/directory/components/account_card.js
View File

@ -8,7 +8,7 @@ import { connect } from 'react-redux';
import { getSettings } from 'soapbox/actions/settings';
import Avatar from 'soapbox/components/avatar';
import DisplayName from 'soapbox/components/display_name';
import DisplayName from 'soapbox/components/display-name';
import Permalink from 'soapbox/components/permalink';
import RelativeTimestamp from 'soapbox/components/relative_timestamp';
import { Text } from 'soapbox/components/ui';

2
app/soapbox/features/follow_recommendations/components/account.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import Avatar from 'soapbox/components/avatar';
import DisplayName from 'soapbox/components/display_name';
import DisplayName from 'soapbox/components/display-name';
import Permalink from 'soapbox/components/permalink';
import ActionButton from 'soapbox/features/ui/components/action_button';
import { useAppSelector } from 'soapbox/hooks';

2
app/soapbox/features/follow_requests/components/account_authorize.tsx
View File

@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux';
import { authorizeFollowRequest, rejectFollowRequest } from 'soapbox/actions/accounts';
import Avatar from 'soapbox/components/avatar';
import DisplayName from 'soapbox/components/display_name';
import DisplayName from 'soapbox/components/display-name';
import IconButton from 'soapbox/components/icon_button';
import Permalink from 'soapbox/components/permalink';
import { useAppSelector } from 'soapbox/hooks';

2
app/soapbox/features/list_adder/components/account.js
View File

@ -5,7 +5,7 @@ import { injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import Avatar from '../../../components/avatar';
import DisplayName from '../../../components/display_name';
import DisplayName from '../../../components/display-name';
import { makeGetAccount } from '../../../selectors';
const makeMapStateToProps = () => {

2
app/soapbox/features/list_editor/components/account.js
View File

@ -7,7 +7,7 @@ import { connect } from 'react-redux';
import { removeFromListEditor, addToListEditor } from '../../../actions/lists';
import Avatar from '../../../components/avatar';
import DisplayName from '../../../components/display_name';
import DisplayName from '../../../components/display-name';
import IconButton from '../../../components/icon_button';
import { makeGetAccount } from '../../../selectors';

2
app/soapbox/features/notifications/components/follow_request.js
View File

@ -5,7 +5,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl } from 'react-intl';
import Avatar from 'soapbox/components/avatar';
import DisplayName from 'soapbox/components/display_name';
import DisplayName from 'soapbox/components/display-name';
import IconButton from 'soapbox/components/icon_button';
import Permalink from 'soapbox/components/permalink';

2
app/soapbox/features/reply_mentions/account.js
View File

@ -7,7 +7,7 @@ import { connect } from 'react-redux';
import { fetchAccount } from 'soapbox/actions/accounts';
import { addToMentions, removeFromMentions } from 'soapbox/actions/compose';
import Avatar from 'soapbox/components/avatar';
import DisplayName from 'soapbox/components/display_name';
import DisplayName from 'soapbox/components/display-name';
import IconButton from 'soapbox/components/icon_button';
import { makeGetAccount } from 'soapbox/selectors';

2
app/soapbox/features/scheduled_statuses/components/scheduled_status.js
View File

@ -6,7 +6,7 @@ import { Link, NavLink } from 'react-router-dom';
import AttachmentThumbs from 'soapbox/components/attachment_thumbs';
import Avatar from 'soapbox/components/avatar';
import DisplayName from 'soapbox/components/display_name';
import DisplayName from 'soapbox/components/display-name';
import RelativeTimestamp from 'soapbox/components/relative_timestamp';
import StatusContent from 'soapbox/components/status_content';
import StatusReplyMentions from 'soapbox/components/status_reply_mentions';