diff --git a/app/javascript/flavours/glitch/components/display_name.js b/app/javascript/flavours/glitch/components/display_name.js
index 7f6ef5a5da..7626fb25ca 100644
--- a/app/javascript/flavours/glitch/components/display_name.js
+++ b/app/javascript/flavours/glitch/components/display_name.js
@@ -1,73 +1,69 @@
-// Package imports.
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
-// The component.
-export default function DisplayName ({
- account,
- className,
- inline,
- localDomain,
- others,
- onAccountClick,
-}) {
- const computedClass = classNames('display-name', { inline }, className);
+export default class DisplayName extends React.PureComponent {
- if (!account) return null;
+ static propTypes = {
+ account: ImmutablePropTypes.map,
+ className: PropTypes.string,
+ inline: PropTypes.bool,
+ localDomain: PropTypes.string,
+ others: ImmutablePropTypes.list,
+ handleClick: PropTypes.func,
+ };
- let displayName, suffix;
+ render() {
+ const { account, className, inline, localDomain, others, onAccountClick } = this.props;
- let acct = account.get('acct');
+ const computedClass = classNames('display-name', { inline }, className);
- if (acct.indexOf('@') === -1 && localDomain) {
- acct = `${acct}@${localDomain}`;
- }
+ if (!account) return null;
+
+ let displayName, suffix;
- if (others && others.size > 0) {
- displayName = others.take(2).map(a => (
- onAccountClick(a.get('id'), e)}
- title={`@${a.get('acct')}`}
- >
-
-
-
-
- )).reduce((prev, cur) => [prev, ', ', cur]);
+ let acct = account.get('acct');
- if (others.size - 2 > 0) {
- displayName.push(` +${others.size - 2}`);
+ if (acct.indexOf('@') === -1 && localDomain) {
+ acct = `${acct}@${localDomain}`;
}
- suffix = (
- onAccountClick(account.get('id'), e)}>
- @{acct}
-
+ if (others && others.size > 0) {
+ displayName = others.take(2).map(a => (
+ onAccountClick(a.get('id'), e)}
+ title={`@${a.get('acct')}`}
+ >
+
+
+
+
+ )).reduce((prev, cur) => [prev, ', ', cur]);
+
+ if (others.size - 2 > 0) {
+ displayName.push(` +${others.size - 2}`);
+ }
+
+ suffix = (
+ onAccountClick(account.get('id'), e)}>
+ @{acct}
+
+ );
+ } else {
+ displayName = ;
+ suffix = @{acct};
+ }
+
+ return (
+
+ {displayName}
+ {inline ? ' ' : null}
+ {suffix}
+
);
- } else {
- displayName = ;
- suffix = @{acct};
}
- return (
-
- {displayName}
- {inline ? ' ' : null}
- {suffix}
-
- );
}
-
-// Props.
-DisplayName.propTypes = {
- account: ImmutablePropTypes.map,
- className: PropTypes.string,
- inline: PropTypes.bool,
- localDomain: PropTypes.string,
- others: ImmutablePropTypes.list,
- handleClick: PropTypes.func,
-};