Rewrite Domain component as function component (#24896)

app/javascript/mastodon/components/domain.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import IconButton from './icon_button';
-import { defineMessages, injectIntl } from 'react-intl';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-const messages = defineMessages({
-  unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unblock domain {domain}' },
-});
-
-class Account extends ImmutablePureComponent {
-
-  static propTypes = {
-    domain: PropTypes.string,
-    onUnblockDomain: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleDomainUnblock = () => {
-    this.props.onUnblockDomain(this.props.domain);
-  };
-
-  render () {
-    const { domain, intl } = this.props;
-
-    return (
-      <div className='domain'>
-        <div className='domain__wrapper'>
-          <span className='domain__domain-name'>
-            <strong>{domain}</strong>
-          </span>
-
-          <div className='domain__buttons'>
-            <IconButton active icon='unlock' title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={this.handleDomainUnblock} />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
-
-export default injectIntl(Account);

app/javascript/mastodon/components/domain.tsx

@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+import IconButton from './icon_button';
+import { InjectedIntl, defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  unblockDomain: {
+    id: 'account.unblock_domain',
+    defaultMessage: 'Unblock domain {domain}',
+  },
+});
+
+type Props = {
+  domain: string;
+  onUnblockDomain: (domain: string) => void;
+  intl: InjectedIntl;
+};
+const _Domain: React.FC<Props> = ({ domain, onUnblockDomain, intl }) => {
+  const handleDomainUnblock = useCallback(() => {
+    onUnblockDomain(domain);
+  }, [domain, onUnblockDomain]);
+
+  return (
+    <div className='domain'>
+      <div className='domain__wrapper'>
+        <span className='domain__domain-name'>
+          <strong>{domain}</strong>
+        </span>
+
+        <div className='domain__buttons'>
+          <IconButton
+            active
+            icon='unlock'
+            title={intl.formatMessage(messages.unblockDomain, { domain })}
+            onClick={handleDomainUnblock}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Domain = injectIntl(_Domain);

app/javascript/mastodon/containers/domain_container.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { blockDomain, unblockDomain } from '../actions/domain_blocks';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import Domain from '../components/domain';
+import { Domain } from '../components/domain';
 import { openModal } from '../actions/modal';
 
 const messages = defineMessages({