ProfilePreview: convert to TSX

app/soapbox/features/edit_profile/components/profile_preview.js

@@ -1,46 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
-
-import StillImage from 'soapbox/components/still_image';
-import VerificationBadge from 'soapbox/components/verification_badge';
-import { getAcct } from 'soapbox/utils/accounts';
-import { displayFqn } from 'soapbox/utils/state';
-
-const mapStateToProps = state => ({
-  displayFqn: displayFqn(state),
-});
-
-const ProfilePreview = ({ account, displayFqn }) => (
-  <div className='card h-card'>
-    <Link to={`/@${account.get('acct')}`}>
-      <div className='card__img'>
-        <StillImage alt='' src={account.get('header')} />
-      </div>
-      <div className='card__bar'>
-        <div className='avatar'>
-          <StillImage alt='' className='u-photo' src={account.get('avatar')} width='48' height='48' />
-        </div>
-        <div className='display-name'>
-          <span style={{ display: 'none' }}>{account.get('username')}</span>
-          <bdi>
-            <strong className='emojify p-name'>
-              {account.get('display_name')}
-              {account.get('verified') && <VerificationBadge />}
-            </strong>
-          </bdi>
-          <span>@{getAcct(account, displayFqn)}</span>
-        </div>
-      </div>
-    </Link>
-  </div>
-);
-
-ProfilePreview.propTypes = {
-  account: ImmutablePropTypes.record,
-  displayFqn: PropTypes.bool,
-};
-
-export default connect(mapStateToProps)(ProfilePreview);

app/soapbox/features/edit_profile/components/profile_preview.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import StillImage from 'soapbox/components/still_image';
+import VerificationBadge from 'soapbox/components/verification_badge';
+import { useSoapboxConfig } from 'soapbox/hooks';
+
+import type { Account } from 'soapbox/types/entities';
+
+interface IProfilePreview {
+  account: Account,
+}
+
+/** Displays a preview of the user's account, including avatar, banner, etc. */
+const ProfilePreview: React.FC<IProfilePreview> = ({ account }) => {
+  const { displayFqn } = useSoapboxConfig();
+
+  return (
+    <div className='card h-card'>
+      <Link to={`/@${account.acct}`}>
+        <div className='card__img'>
+          <StillImage alt='' src={account.header} />
+        </div>
+        <div className='card__bar'>
+          <div className='avatar'>
+            <StillImage alt='' className='u-photo' src={account.avatar} width='48' height='48' />
+          </div>
+          <div className='display-name'>
+            <span style={{ display: 'none' }}>{account.username}</span>
+            <bdi>
+              <strong className='emojify p-name'>
+                {account.display_name}
+                {account.verified && <VerificationBadge />}
+              </strong>
+            </bdi>
+            <span>@{displayFqn ? account.fqn : account.acct}</span>
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+};
+
+export default ProfilePreview;