Convert display-name to TS

app/soapbox/components/__tests__/display_name.test.js

@@ -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', () => {

app/soapbox/components/display-name.tsx

@@ -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;

app/soapbox/components/display_name.js

@@ -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>
-    );
-  }
-
-}

app/soapbox/features/account_timeline/components/moved_note.tsx

@@ -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';

app/soapbox/features/aliases/components/account.js

@@ -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';

app/soapbox/features/birthdays/account.tsx

@@ -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';

app/soapbox/features/chats/components/chat.tsx

@@ -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';

app/soapbox/features/directory/components/account_card.js

@@ -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';
@@ -82,4 +82,4 @@ class AccountCard extends ImmutablePureComponent {
     );
   }
 
-}
+}

app/soapbox/features/follow_recommendations/components/account.tsx

@@ -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';

app/soapbox/features/follow_requests/components/account_authorize.tsx

@@ -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';

app/soapbox/features/list_adder/components/account.js

@@ -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 = () => {

app/soapbox/features/list_editor/components/account.js

@@ -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';
 

app/soapbox/features/notifications/components/follow_request.js

@@ -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';
 

app/soapbox/features/reply_mentions/account.js

@@ -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';
 

app/soapbox/features/scheduled_statuses/components/scheduled_status.js

@@ -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';