Refactor DisplayName component to make it closer to upstream

app/javascript/flavours/glitch/components/display_name.js

@@ -1,18 +1,22 @@
-//  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';
+
+export default class DisplayName extends React.PureComponent {
+
+  static propTypes = {
+    account: ImmutablePropTypes.map,
+    className: PropTypes.string,
+    inline: PropTypes.bool,
+    localDomain: PropTypes.string,
+    others: ImmutablePropTypes.list,
+    handleClick: PropTypes.func,
+  };
+
+  render() {
+    const { account, className, inline, localDomain, others, onAccountClick } = this.props;
 
-//  The component.
-export default function DisplayName ({
-  account,
-  className,
-  inline,
-  localDomain,
-  others,
-  onAccountClick,
-}) {
     const computedClass = classNames('display-name', { inline }, className);
 
     if (!account) return null;
@@ -60,14 +64,6 @@ export default function DisplayName ({
         {suffix}
       </span>
     );
-}
+  }
 
-//  Props.
-DisplayName.propTypes = {
-  account: ImmutablePropTypes.map,
-  className: PropTypes.string,
-  inline: PropTypes.bool,
-  localDomain: PropTypes.string,
-  others: ImmutablePropTypes.list,
-  handleClick: PropTypes.func,
-};
+}