~cytrogen/masto-fe

9818f342735d1765baa281aaeeab2f60b8d049fe — fusagiko / takayamaki 2 years ago 5bc8e2d
Rewrite Domain component as function component (#24896)

3 files changed, 43 insertions(+), 44 deletions(-)

D app/javascript/mastodon/components/domain.jsx
A app/javascript/mastodon/components/domain.tsx
M app/javascript/mastodon/containers/domain_container.jsx
D app/javascript/mastodon/components/domain.jsx => app/javascript/mastodon/components/domain.jsx +0 -43
@@ 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);

A app/javascript/mastodon/components/domain.tsx => app/javascript/mastodon/components/domain.tsx +42 -0
@@ 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);

M app/javascript/mastodon/containers/domain_container.jsx => app/javascript/mastodon/containers/domain_container.jsx +1 -1
@@ 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({