Change mute, block and domain block confirmations in web UI (#29576)

app/javascript/mastodon/features/ui/components/block_modal.jsx

@@ -1,100 +1,87 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
+import { useCallback } from 'react';
 
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
-import { connect } from 'react-redux';
+import { useDispatch } from 'react-redux';
 
-import { blockAccount } from '../../../actions/accounts';
-import { closeModal } from '../../../actions/modal';
-import { initReport } from '../../../actions/reports';
-import { Button } from '../../../components/button';
-import { makeGetAccount } from '../../../selectors';
+import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
+import BlockIcon from '@/material-icons/400-24px/block.svg?react';
+import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react';
+import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
+import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
+import { blockAccount } from 'mastodon/actions/accounts';
+import { closeModal } from 'mastodon/actions/modal';
+import { Button } from 'mastodon/components/button';
+import { Icon } from 'mastodon/components/icon';
 
-const makeMapStateToProps = () => {
-  const getAccount = makeGetAccount();
+export const BlockModal = ({ accountId, acct }) => {
+  const dispatch = useDispatch();
 
-  const mapStateToProps = state => ({
-    account: getAccount(state, state.getIn(['blocks', 'new', 'account_id'])),
-  });
+  const handleClick = useCallback(() => {
+    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
+    dispatch(blockAccount(accountId));
+  }, [dispatch, accountId]);
 
-  return mapStateToProps;
-};
+  const handleCancel = useCallback(() => {
+    dispatch(closeModal({ modalType: undefined, ignoreFocus: false }));
+  }, [dispatch]);
 
-const mapDispatchToProps = dispatch => {
-  return {
-    onConfirm(account) {
-      dispatch(blockAccount(account.get('id')));
-    },
+  return (
+    <div className='modal-root__modal safety-action-modal'>
+      <div className='safety-action-modal__top'>
+        <div className='safety-action-modal__header'>
+          <div className='safety-action-modal__header__icon'>
+            <Icon icon={BlockIcon} />
+          </div>
 
-    onBlockAndReport(account) {
-      dispatch(blockAccount(account.get('id')));
-      dispatch(initReport(account));
-    },
-
-    onClose() {
-      dispatch(closeModal({
-        modalType: undefined,
-        ignoreFocus: false,
-      }));
-    },
-  };
-};
-
-class BlockModal extends PureComponent {
-
-  static propTypes = {
-    account: PropTypes.object.isRequired,
-    onClose: PropTypes.func.isRequired,
-    onBlockAndReport: PropTypes.func.isRequired,
-    onConfirm: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleClick = () => {
-    this.props.onClose();
-    this.props.onConfirm(this.props.account);
-  };
-
-  handleSecondary = () => {
-    this.props.onClose();
-    this.props.onBlockAndReport(this.props.account);
-  };
-
-  handleCancel = () => {
-    this.props.onClose();
-  };
-
-  render () {
-    const { account } = this.props;
-
-    return (
-      <div className='modal-root__modal block-modal'>
-        <div className='block-modal__container'>
-          <p>
-            <FormattedMessage
-              id='confirmations.block.message'
-              defaultMessage='Are you sure you want to block {name}?'
-              values={{ name: <strong>@{account.get('acct')}</strong> }}
-            />
-          </p>
+          <div>
+            <h1><FormattedMessage id='block_modal.title' defaultMessage='Block user?' /></h1>
+            <div>@{acct}</div>
+          </div>
         </div>
 
-        <div className='block-modal__action-bar'>
-          <Button onClick={this.handleCancel} className='block-modal__cancel-button'>
+        <div className='safety-action-modal__bullet-points'>
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={CampaignIcon} /></div>
+            <div><FormattedMessage id='block_modal.they_will_know' defaultMessage="They can see that they're blocked." /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={VisibilityOffIcon} /></div>
+            <div><FormattedMessage id='block_modal.they_cant_see_posts' defaultMessage="They can't see your posts and you won't see theirs." /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={AlternateEmailIcon} /></div>
+            <div><FormattedMessage id='block_modal.you_wont_see_mentions' defaultMessage="You won't see posts that mentions them." /></div>
+          </div>
+
+          <div>
+            <div className='safety-action-modal__bullet-points__icon'><Icon icon={ReplyIcon} /></div>
+            <div><FormattedMessage id='block_modal.they_cant_mention' defaultMessage="They can't mention or follow you." /></div>
+          </div>
+        </div>
+      </div>
+
+      <div className='safety-action-modal__bottom'>
+        <div className='safety-action-modal__actions'>
+          <button onClick={handleCancel} className='link-button'>
             <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
-          </Button>
-          <Button onClick={this.handleSecondary} className='confirmation-modal__secondary-button'>
-            <FormattedMessage id='confirmations.block.block_and_report' defaultMessage='Block & Report' />
-          </Button>
-          <Button onClick={this.handleClick} autoFocus>
+          </button>
+
+          <Button onClick={handleClick}>
             <FormattedMessage id='confirmations.block.confirm' defaultMessage='Block' />
           </Button>
         </div>
       </div>
-    );
-  }
+    </div>
+  );
+};
 
-}
+BlockModal.propTypes = {
+  accountId: PropTypes.string.isRequired,
+  acct: PropTypes.string.isRequired,
+};
 
-export default connect(makeMapStateToProps, mapDispatchToProps)(injectIntl(BlockModal));
+export default BlockModal;