Progress

app/javascript/gabsocial/components/modal/mute_modal.js

@@ -1,40 +1,34 @@
-import { injectIntl, defineMessages } from 'react-intl';
-import { closeModal } from '../../actions/modal';
-import { muteAccount } from '../../actions/accounts';
-import { toggleHideNotifications } from '../../actions/mutes';
-import ToggleSwitch from '../toggle_switch';
-import Button from '../button';
+import { injectIntl, defineMessages } from 'react-intl'
+import { makeGetAccount } from '../../selectors'
+import { closeModal } from '../../actions/modal'
+import { muteAccount } from '../../actions/accounts'
+import ConfirmationModal from './confirmation_modal'
 
 const messages = defineMessages({
+  title: { id: 'mute_title', defaultMessage: 'Mute {name}' },
   muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
-  hideNotifications: { id: 'mute_modal.hide_notifications', defaultMessage: 'Hide notifications from this user?' },
-  cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
-  confirm: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
-});
+  mute: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
+})
+
+const mapStateToProps = (state, { accountId }) => {
+  const getAccount = makeGetAccount()
 
-const mapStateToProps = state => {
   return {
-    isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
-    account: state.getIn(['mutes', 'new', 'account']),
-    notifications: state.getIn(['mutes', 'new', 'notifications']),
-  };
-};
+    account: getAccount(state, accountId),
+  }
+}
 
 const mapDispatchToProps = dispatch => {
   return {
     onConfirm(account, notifications) {
-      dispatch(muteAccount(account.get('id'), notifications));
+      dispatch(closeModal())
+      dispatch(muteAccount(account.get('id'), notifications))
     },
-
     onClose() {
-      dispatch(closeModal());
+      dispatch(closeModal())
     },
-
-    onToggleNotifications() {
-      dispatch(toggleHideNotifications());
-    },
-  };
-};
+  }
+}
 
 export default
 @connect(mapStateToProps, mapDispatchToProps)
@@ -42,64 +36,39 @@ export default
 class MuteModal extends PureComponent {
 
   static propTypes = {
-    isSubmitting: PropTypes.bool.isRequired,
     account: PropTypes.object.isRequired,
-    notifications: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired,
     onConfirm: PropTypes.func.isRequired,
-    onToggleNotifications: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
-  };
-
-  componentDidMount() {
-    this.button.focus();
   }
 
   handleClick = () => {
-    this.props.onClose();
-    this.props.onConfirm(this.props.account, this.props.notifications);
+    this.props.onConfirm(this.props.account)
   }
 
-  handleCancel = () => {
-    this.props.onClose();
+  handleClose = () => {
+    this.props.onClose()
   }
 
-  setRef = (c) => {
-    this.button = c;
-  }
+  render() {
+    const { account, intl } = this.props
 
-  toggleNotifications = () => {
-    this.props.onToggleNotifications();
-  }
-
-  render () {
-    const { account, notifications, intl } = this.props;
+    const title = intl.formatMessage(messages.title, {
+      name: !!account ? account.get('acct') : '',
+    })
+    const message = intl.formatMessage(messages.muteMessage, {
+      name: !!account ? account.get('acct') : '',
+    })
 
     return (
-      <div className='modal-root__modal mute-modal'>
-        <div className='mute-modal__container'>
-          <p>
-            {intl.formatMessage(messages.muteMessage, { name: <strong>@{account.get('acct')}</strong> })}
-          </p>
-          <div>
-            <label htmlFor='mute-modal__hide-notifications-checkbox'>
-              {intl.formatMessage(messages.hideNotifications)}
-              {' '}
-              <ToggleSwitch id='mute-modal__hide-notifications-checkbox' checked={notifications} onChange={this.toggleNotifications} />
-            </label>
-          </div>
-        </div>
-
-        <div className='mute-modal__action-bar'>
-          <Button onClick={this.handleCancel} className='mute-modal__cancel-button'>
-            {intl.formatMessage(messages.cancel)}
-          </Button>
-          <Button onClick={this.handleClick} ref={this.setRef}>
-            {intl.formatMessage(messages.confirm)}
-          </Button>
-        </div>
-      </div>
-    );
+      <ConfirmationModal
+        title={title}
+        message={message}
+        confirm={intl.formatMessage(messages.mute)}
+        onClose={this.handleClose}
+        onConfirm={this.handleClick}
+      />
+    )
   }
 
 }