From b61596b1a759e0c99e7146658f11db5c841fa143 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Mon, 22 Jul 2019 23:10:05 -0400
Subject: [PATCH] Added confirmation to compose modal on close if has text
Added to modal_root if modal type is compose
Added to compose_modal
Fixes: #51
---
.../gabsocial/components/modal_root.js | 53 +++++++++++++++++--
.../features/ui/components/compose_modal.js | 22 +++++++-
2 files changed, 68 insertions(+), 7 deletions(-)
diff --git a/app/javascript/gabsocial/components/modal_root.js b/app/javascript/gabsocial/components/modal_root.js
index ef115657..fcc6278d 100644
--- a/app/javascript/gabsocial/components/modal_root.js
+++ b/app/javascript/gabsocial/components/modal_root.js
@@ -1,11 +1,37 @@
import React from 'react';
import PropTypes from 'prop-types';
+import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
+import { connect } from 'react-redux';
+import { openModal } from '../actions/modal';
+import { cancelReplyCompose } from '../actions/compose';
-export default class ModalRoot extends React.PureComponent {
+const messages = defineMessages({
+ confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
+});
+
+const mapStateToProps = state => ({
+ composeText: state.getIn(['compose', 'text']),
+});
+
+const mapDispatchToProps = (dispatch) => ({
+ onOpenModal(type, opts) {
+ dispatch(openModal(type, opts));
+ },
+ onCancelReplyCompose() {
+ dispatch(cancelReplyCompose());
+ }
+});
+
+class ModalRoot extends React.PureComponent {
static propTypes = {
children: PropTypes.node,
onClose: PropTypes.func.isRequired,
+ onOpenModal: PropTypes.func.isRequired,
+ onCancelReplyCompose: PropTypes.func.isRequired,
+ intl: PropTypes.object.isRequired,
+ composeText: PropTypes.string,
+ type: PropTypes.string,
};
state = {
@@ -17,10 +43,26 @@ export default class ModalRoot extends React.PureComponent {
handleKeyUp = (e) => {
if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
&& !!this.props.children) {
- this.props.onClose();
+ this.handleOnClose();
}
}
+ handleOnClose = () => {
+ const { onOpenModal, composeText, onClose, intl, type, onCancelReplyCompose } = this.props;
+
+ if (composeText && type == 'COMPOSE') {
+ onOpenModal('CONFIRM', {
+ message: ,
+ confirm: intl.formatMessage(messages.confirm),
+ onConfirm: () => onCancelReplyCompose(),
+ onCancel: () => onOpenModal('COMPOSE'),
+ });
+ }
+ else {
+ this.props.onClose();
+ }
+ };
+
componentDidMount () {
window.addEventListener('keyup', this.handleKeyUp, false);
}
@@ -63,7 +105,7 @@ export default class ModalRoot extends React.PureComponent {
}
render () {
- const { children, onClose } = this.props;
+ const { children } = this.props;
const { revealed } = this.state;
const visible = !!children;
@@ -76,11 +118,12 @@ export default class ModalRoot extends React.PureComponent {
return (
-
+
this.handleOnClose()} />
{children}
);
}
-
}
+
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ModalRoot));
diff --git a/app/javascript/gabsocial/features/ui/components/compose_modal.js b/app/javascript/gabsocial/features/ui/components/compose_modal.js
index 638cdb0d..865bdec3 100644
--- a/app/javascript/gabsocial/features/ui/components/compose_modal.js
+++ b/app/javascript/gabsocial/features/ui/components/compose_modal.js
@@ -8,14 +8,18 @@ import Avatar from '../../../components/avatar';
import ImmutablePureComponent from 'react-immutable-pure-component';
import ComposeFormContainer from '../../compose/containers/compose_form_container';
import IconButton from 'gabsocial/components/icon_button';
+import { openModal } from '../../../actions/modal';
+import { cancelReplyCompose } from '../../../actions/compose';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
+ confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
});
const mapStateToProps = state => {
return {
account: state.getIn(['accounts', me]),
+ composeText: state.getIn(['compose', 'text']),
};
};
@@ -25,14 +29,28 @@ class ComposeModal extends ImmutablePureComponent {
account: ImmutablePropTypes.map,
intl: PropTypes.object.isRequired,
onClose: PropTypes.func.isRequired,
+ composeText: PropTypes.string,
+ dispatch: PropTypes.func.isRequired,
};
onClickClose = () => {
- this.props.onClose('COMPOSE');
+ const {composeText, dispatch, onClose, intl} = this.props;
+
+ if (composeText) {
+ dispatch(openModal('CONFIRM', {
+ message:
,
+ confirm: intl.formatMessage(messages.confirm),
+ onConfirm: () => dispatch(cancelReplyCompose()),
+ onCancel: () => dispatch(openModal('COMPOSE')),
+ }));
+ }
+ else {
+ onClose('COMPOSE');
+ }
};
render () {
- const { intl, onClose, account } = this.props;
+ const { intl, account } = this.props;
return (