diff --git a/app/javascript/flavours/glitch/components/domain.jsx b/app/javascript/flavours/glitch/components/domain.jsx deleted file mode 100644 index 85ebdbde93..0000000000 --- a/app/javascript/flavours/glitch/components/domain.jsx +++ /dev/null @@ -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); diff --git a/app/javascript/flavours/glitch/components/domain.tsx b/app/javascript/flavours/glitch/components/domain.tsx new file mode 100644 index 0000000000..6cb8f7b8ff --- /dev/null +++ b/app/javascript/flavours/glitch/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); diff --git a/app/javascript/flavours/glitch/containers/domain_container.jsx b/app/javascript/flavours/glitch/containers/domain_container.jsx index 8a8ba1df12..419d5d29f5 100644 --- a/app/javascript/flavours/glitch/containers/domain_container.jsx +++ b/app/javascript/flavours/glitch/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({