Add a confirmation dialog when hitting reply and the compose box isn'…

…t empty

Fixes mastodon#878

app/javascript/mastodon/components/status.js

@@ -45,6 +45,7 @@ class Status extends ImmutablePureComponent {
  static propTypes = {
  status: ImmutablePropTypes.map,
  account: ImmutablePropTypes.map,
+ askReplyConfirmation: PropTypes.bool,
  onReply: PropTypes.func,
  onFavourite: PropTypes.func,
  onReblog: PropTypes.func,
@@ -71,6 +72,7 @@ class Status extends ImmutablePureComponent {
  'account',
  'muted',
  'hidden',
+ 'askReplyConfirmation',
  ]
 
  handleClick = () => {
@@ -107,8 +109,9 @@ class Status extends ImmutablePureComponent {
  }
 
  handleHotkeyReply = e => {
+ let { onReply, askReplyConfirmation } = this.props;
  e.preventDefault();
- this.props.onReply(this._properStatus(), this.context.router.history);
+ onReply(this._properStatus(), this.context.router.history, askReplyConfirmation);
  }
 
  handleHotkeyFavourite = () => {

app/javascript/mastodon/components/status_action_bar.js

@@ -65,6 +65,7 @@ class StatusActionBar extends ImmutablePureComponent {
  onPin: PropTypes.func,
  withDismiss: PropTypes.bool,
  intl: PropTypes.object.isRequired,
+ askReplyConfirmation: PropTypes.bool,
  };
 
  // Avoid checking props that are functions (and whose equality will always
@@ -75,7 +76,8 @@ class StatusActionBar extends ImmutablePureComponent {
  ]
 
  handleReplyClick = () => {
- this.props.onReply(this.props.status, this.context.router.history);
+ let { askReplyConfirmation, onReply } = this.props;
+ onReply(this.props.status, this.context.router.history, askReplyConfirmation);
  }
 
  handleShareClick = () => {

app/javascript/mastodon/containers/status_container.js

@@ -36,22 +36,33 @@ const messages = defineMessages({
  redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
  redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favourites and boosts will be lost, and replies to the original post will be orphaned.' },
  blockConfirm: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
+ replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
+ replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
 });
 
 const makeMapStateToProps = () => {
  const getStatus = makeGetStatus();
 
  const mapStateToProps = (state, props) => ({
  status: getStatus(state, props),
+ askReplyConfirmation: state.getIn(['compose', 'text']).trim().length !== 0,
  });
 
  return mapStateToProps;
 };
 
 const mapDispatchToProps = (dispatch, { intl }) => ({
 
- onReply (status, router) {
- dispatch(replyCompose(status, router));
+ onReply (status, router, confirm = false) {
+ if (confirm) {
+ dispatch(openModal('CONFIRM', {
+ message: intl.formatMessage(messages.replyMessage),
+ confirm: intl.formatMessage(messages.replyConfirm),
+ onConfirm: () => dispatch(replyCompose(status, router)),
+ }));
+ } else {
+ dispatch(replyCompose(status, router));
+ }
  },
 
  onModalReblog (status) {

app/javascript/mastodon/features/status/index.js

@@ -54,6 +54,8 @@ const messages = defineMessages({
  revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' },
  hideAll: { id: 'status.show_less_all', defaultMessage: 'Show less for all' },
  detailedStatus: { id: 'status.detailed_status', defaultMessage: 'Detailed conversation view' },
+ replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
+ replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
 });
 
 const makeMapStateToProps = () => {
@@ -98,6 +100,7 @@ const makeMapStateToProps = () => {
  status,
  ancestorsIds,
  descendantsIds,
+ askReplyConfirmation: state.getIn(['compose', 'text']).trim().length !== 0,
  };
  };
 
@@ -119,6 +122,7 @@ class Status extends ImmutablePureComponent {
  ancestorsIds: ImmutablePropTypes.list,
  descendantsIds: ImmutablePropTypes.list,
  intl: PropTypes.object.isRequired,
+ askReplyConfirmation: PropTypes.bool,
  };
 
  state = {
@@ -157,7 +161,16 @@ class Status extends ImmutablePureComponent {
  }
 
  handleReplyClick = (status) => {
- this.props.dispatch(replyCompose(status, this.context.router.history));
+ let { askReplyConfirmation, dispatch, intl } = this.props;
+ if (askReplyConfirmation) {
+ dispatch(openModal('CONFIRM', {
+ message: intl.formatMessage(messages.replyMessage),
+ confirm: intl.formatMessage(messages.replyConfirm),
+ onConfirm: () => dispatch(replyCompose(status, this.context.router.history)),
+ }));
+ } else {
+ dispatch(replyCompose(status, this.context.router.history));
+ }
  }
 
  handleModalReblog = (status) => {