From 6bf0d5847b6be949cbe521ce0d2ca3f127bdeed4 Mon Sep 17 00:00:00 2001
From: Kevin Brown <chevinbrown@gmail.com>
Date: Fri, 13 May 2022 12:12:19 -0400
Subject: [PATCH] Convert display-name to TS

---
 .../components/__tests__/display_name.test.js |  2 +-
 app/soapbox/components/display-name.tsx       | 51 +++++++++++
 app/soapbox/components/display_name.js        | 85 -------------------
 .../components/moved_note.tsx                 |  2 +-
 .../features/aliases/components/account.js    |  2 +-
 app/soapbox/features/birthdays/account.tsx    |  2 +-
 .../features/chats/components/chat.tsx        |  2 +-
 .../directory/components/account_card.js      |  4 +-
 .../components/account.tsx                    |  2 +-
 .../components/account_authorize.tsx          |  2 +-
 .../features/list_adder/components/account.js |  2 +-
 .../list_editor/components/account.js         |  2 +-
 .../components/follow_request.js              |  2 +-
 .../features/reply_mentions/account.js        |  2 +-
 .../components/scheduled_status.js            |  2 +-
 15 files changed, 65 insertions(+), 99 deletions(-)
 create mode 100644 app/soapbox/components/display-name.tsx
 delete mode 100644 app/soapbox/components/display_name.js

diff --git a/app/soapbox/components/__tests__/display_name.test.js b/app/soapbox/components/__tests__/display_name.test.js
index 00e175d40..6d0a05ed5 100644
--- a/app/soapbox/components/__tests__/display_name.test.js
+++ b/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', () => {
diff --git a/app/soapbox/components/display-name.tsx b/app/soapbox/components/display-name.tsx
new file mode 100644
index 000000000..d27d0efc7
--- /dev/null
+++ b/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;
diff --git a/app/soapbox/components/display_name.js b/app/soapbox/components/display_name.js
deleted file mode 100644
index 141988697..000000000
--- a/app/soapbox/components/display_name.js
+++ /dev/null
@@ -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>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/account_timeline/components/moved_note.tsx b/app/soapbox/features/account_timeline/components/moved_note.tsx
index 6e901252d..0ba6d8da5 100644
--- a/app/soapbox/features/account_timeline/components/moved_note.tsx
+++ b/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';
diff --git a/app/soapbox/features/aliases/components/account.js b/app/soapbox/features/aliases/components/account.js
index 38bce11bb..8d0ccfbe3 100644
--- a/app/soapbox/features/aliases/components/account.js
+++ b/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';
diff --git a/app/soapbox/features/birthdays/account.tsx b/app/soapbox/features/birthdays/account.tsx
index 94b7e08a6..eea3266e2 100644
--- a/app/soapbox/features/birthdays/account.tsx
+++ b/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';
diff --git a/app/soapbox/features/chats/components/chat.tsx b/app/soapbox/features/chats/components/chat.tsx
index afb1d9df8..8e10a2f91 100644
--- a/app/soapbox/features/chats/components/chat.tsx
+++ b/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';
diff --git a/app/soapbox/features/directory/components/account_card.js b/app/soapbox/features/directory/components/account_card.js
index 83a48b256..1db12c96a 100644
--- a/app/soapbox/features/directory/components/account_card.js
+++ b/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 {
     );
   }
 
-}
\ No newline at end of file
+}
diff --git a/app/soapbox/features/follow_recommendations/components/account.tsx b/app/soapbox/features/follow_recommendations/components/account.tsx
index 8ba56b497..3371a971f 100644
--- a/app/soapbox/features/follow_recommendations/components/account.tsx
+++ b/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';
diff --git a/app/soapbox/features/follow_requests/components/account_authorize.tsx b/app/soapbox/features/follow_requests/components/account_authorize.tsx
index cd46f7817..ff66df26b 100644
--- a/app/soapbox/features/follow_requests/components/account_authorize.tsx
+++ b/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';
diff --git a/app/soapbox/features/list_adder/components/account.js b/app/soapbox/features/list_adder/components/account.js
index 014f3ac22..184339572 100644
--- a/app/soapbox/features/list_adder/components/account.js
+++ b/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 = () => {
diff --git a/app/soapbox/features/list_editor/components/account.js b/app/soapbox/features/list_editor/components/account.js
index 8054bb52f..e73a465ca 100644
--- a/app/soapbox/features/list_editor/components/account.js
+++ b/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';
 
diff --git a/app/soapbox/features/notifications/components/follow_request.js b/app/soapbox/features/notifications/components/follow_request.js
index 2bf25131b..4c386227e 100644
--- a/app/soapbox/features/notifications/components/follow_request.js
+++ b/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';
 
diff --git a/app/soapbox/features/reply_mentions/account.js b/app/soapbox/features/reply_mentions/account.js
index 1ef60ddf6..b9bf62d51 100644
--- a/app/soapbox/features/reply_mentions/account.js
+++ b/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';
 
diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status.js b/app/soapbox/features/scheduled_statuses/components/scheduled_status.js
index f5efdd406..4b3a890b0 100644
--- a/app/soapbox/features/scheduled_statuses/components/scheduled_status.js
+++ b/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';