mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Updated DeleteTagConfirmModal to be a functional component
This commit is contained in:
parent
cd1f186e28
commit
656b68d422
2 changed files with 41 additions and 68 deletions
|
@ -3,64 +3,45 @@ import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
|
|||
import PropTypes from 'prop-types';
|
||||
import { tagDeleteType } from '../reducers/tagDelete';
|
||||
|
||||
export default class DeleteTagConfirmModal extends React.Component {
|
||||
static propTypes = {
|
||||
tag: PropTypes.string.isRequired,
|
||||
toggle: PropTypes.func.isRequired,
|
||||
isOpen: PropTypes.bool.isRequired,
|
||||
deleteTag: PropTypes.func,
|
||||
tagDelete: tagDeleteType,
|
||||
tagDeleted: PropTypes.func,
|
||||
};
|
||||
|
||||
doDelete = async () => {
|
||||
const { tag, toggle, deleteTag } = this.props;
|
||||
const propTypes = {
|
||||
tag: PropTypes.string.isRequired,
|
||||
toggle: PropTypes.func.isRequired,
|
||||
isOpen: PropTypes.bool.isRequired,
|
||||
deleteTag: PropTypes.func,
|
||||
tagDelete: tagDeleteType,
|
||||
tagDeleted: PropTypes.func,
|
||||
};
|
||||
|
||||
const DeleteTagConfirmModal = ({ tag, toggle, isOpen, deleteTag, tagDelete, tagDeleted }) => {
|
||||
const doDelete = async () => {
|
||||
await deleteTag(tag);
|
||||
this.tagWasDeleted = true;
|
||||
tagDeleted(tag);
|
||||
toggle();
|
||||
};
|
||||
handleOnClosed = () => {
|
||||
if (!this.tagWasDeleted) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { tagDeleted, tag } = this.props;
|
||||
return (
|
||||
<Modal toggle={toggle} isOpen={isOpen} centered>
|
||||
<ModalHeader toggle={toggle}>
|
||||
<span className="text-danger">Delete tag</span>
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
Are you sure you want to delete tag <b>{tag}</b>?
|
||||
{tagDelete.error && (
|
||||
<div className="p-2 mt-2 bg-danger text-white text-center">
|
||||
Something went wrong while deleting the tag :(
|
||||
</div>
|
||||
)}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<button className="btn btn-link" onClick={toggle}>Cancel</button>
|
||||
<button className="btn btn-danger" disabled={tagDelete.deleting} onClick={doDelete}>
|
||||
{tagDelete.deleting ? 'Deleting tag...' : 'Delete tag'}
|
||||
</button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
tagDeleted(tag);
|
||||
};
|
||||
DeleteTagConfirmModal.propTypes = propTypes;
|
||||
|
||||
componentDidMount() {
|
||||
this.tagWasDeleted = false;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { tag, toggle, isOpen, tagDelete } = this.props;
|
||||
|
||||
return (
|
||||
<Modal toggle={toggle} isOpen={isOpen} centered onClosed={this.handleOnClosed}>
|
||||
<ModalHeader toggle={toggle}>
|
||||
<span className="text-danger">Delete tag</span>
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
Are you sure you want to delete tag <b>{tag}</b>?
|
||||
{tagDelete.error && (
|
||||
<div className="p-2 mt-2 bg-danger text-white text-center">
|
||||
Something went wrong while deleting the tag :(
|
||||
</div>
|
||||
)}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<button className="btn btn-link" onClick={toggle}>Cancel</button>
|
||||
<button
|
||||
className="btn btn-danger"
|
||||
disabled={tagDelete.deleting}
|
||||
onClick={() => this.doDelete()}
|
||||
>
|
||||
{tagDelete.deleting ? 'Deleting tag...' : 'Delete tag'}
|
||||
</button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default DeleteTagConfirmModal;
|
||||
|
|
|
@ -25,8 +25,7 @@ describe('<DeleteTagConfirmModal />', () => {
|
|||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.unmount();
|
||||
deleteTag.mockReset();
|
||||
tagDeleted.mockReset();
|
||||
jest.resetAllMocks();
|
||||
});
|
||||
|
||||
it('asks confirmation for provided tag to be deleted', () => {
|
||||
|
@ -56,14 +55,16 @@ describe('<DeleteTagConfirmModal />', () => {
|
|||
expect(delBtn.text()).toEqual('Deleting tag...');
|
||||
});
|
||||
|
||||
it('deletes tag modal when btn is clicked', () => {
|
||||
it('deletes tag modal when btn is clicked', async () => {
|
||||
wrapper = createWrapper({ error: false, deleting: true });
|
||||
const footer = wrapper.find(ModalFooter);
|
||||
const delBtn = footer.find('.btn-danger');
|
||||
|
||||
delBtn.simulate('click');
|
||||
await delBtn.simulate('click');
|
||||
expect(deleteTag).toHaveBeenCalledTimes(1);
|
||||
expect(deleteTag).toHaveBeenCalledWith(tag);
|
||||
expect(tagDeleted).toHaveBeenCalledTimes(1);
|
||||
expect(tagDeleted).toHaveBeenCalledWith(tag);
|
||||
});
|
||||
|
||||
it('does no further actions when modal is closed without deleting tag', () => {
|
||||
|
@ -71,16 +72,7 @@ describe('<DeleteTagConfirmModal />', () => {
|
|||
const modal = wrapper.find(Modal);
|
||||
|
||||
modal.simulate('closed');
|
||||
expect(deleteTag).not.toHaveBeenCalled();
|
||||
expect(tagDeleted).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('notifies tag to be deleted when modal is closed after deleting tag', () => {
|
||||
wrapper = createWrapper({ error: false, deleting: false });
|
||||
const modal = wrapper.find(Modal);
|
||||
|
||||
wrapper.instance().tagWasDeleted = true;
|
||||
modal.simulate('closed');
|
||||
expect(tagDeleted).toHaveBeenCalledTimes(1);
|
||||
expect(tagDeleted).toHaveBeenCalledWith(tag);
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue