diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js b/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js index ac98c70f5..4ac8b89c4 100644 --- a/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js +++ b/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContent.js @@ -7,6 +7,7 @@ import selectAll from 'Utilities/Table/selectAll'; import toggleSelected from 'Utilities/Table/toggleSelected'; import { align, icons, kinds, scrollDirections } from 'Helpers/Props'; import Button from 'Components/Link/Button'; +import SpinnerButton from 'Components/Link/SpinnerButton'; import Icon from 'Components/Icon'; import LoadingIndicator from 'Components/Loading/LoadingIndicator'; import SelectInput from 'Components/Form/SelectInput'; @@ -14,6 +15,7 @@ import Menu from 'Components/Menu/Menu'; import MenuButton from 'Components/Menu/MenuButton'; import MenuContent from 'Components/Menu/MenuContent'; import SelectedMenuItem from 'Components/Menu/SelectedMenuItem'; +import ConfirmModal from 'Components/Modal/ConfirmModal'; import ModalContent from 'Components/Modal/ModalContent'; import ModalHeader from 'Components/Modal/ModalHeader'; import ModalBody from 'Components/Modal/ModalBody'; @@ -126,10 +128,23 @@ class InteractiveImportModalContent extends Component { invalidRowsSelected: [], withoutEpisodeFileIdRowsSelected: [], selectModalOpen: null, - columns: instanceColumns + columns: instanceColumns, + isConfirmDeleteModalOpen: false }; } + componentDidUpdate(prevProps) { + const { + isDeleting, + deleteError, + onModalClose + } = this.props; + + if (!isDeleting && prevProps.isDeleting && !deleteError) { + onModalClose(); + } + } + // // Control @@ -170,13 +185,16 @@ class InteractiveImportModalContent extends Component { } onDeleteSelectedPress = () => { - const { - onDeleteSelectedPress - } = this.props; + this.setState({ isConfirmDeleteModalOpen: true }); + } - const selected = this.getSelectedIds(); + onConfirmDelete = () => { + this.setState({ isConfirmDeleteModalOpen: false }); + this.props.onDeleteSelectedPress(this.getSelectedIds()); + } - onDeleteSelectedPress(selected); + onConfirmDeleteModalClose = () => { + this.setState({ isConfirmDeleteModalOpen: false }); } onImportSelectedPress = () => { @@ -231,6 +249,7 @@ class InteractiveImportModalContent extends Component { sortDirection, importMode, interactiveImportErrorMessage, + isDeleting, onSortPress, onModalClose } = this.props; @@ -241,7 +260,8 @@ class InteractiveImportModalContent extends Component { selectedState, invalidRowsSelected, withoutEpisodeFileIdRowsSelected, - selectModalOpen + selectModalOpen, + isConfirmDeleteModalOpen } = this.state; const selectedIds = this.getSelectedIds(); @@ -375,14 +395,15 @@ class InteractiveImportModalContent extends Component {
{ showDelete ? - : + : null } @@ -471,6 +492,16 @@ class InteractiveImportModalContent extends Component { real={false} onModalClose={this.onSelectModalClose} /> + + ); } @@ -495,6 +526,8 @@ InteractiveImportModalContent.propTypes = { sortKey: PropTypes.string, sortDirection: PropTypes.string, interactiveImportErrorMessage: PropTypes.string, + isDeleting: PropTypes.bool.isRequired, + deleteError: PropTypes.object, onSortPress: PropTypes.func.isRequired, onFilterExistingFilesChange: PropTypes.func.isRequired, onImportModeChange: PropTypes.func.isRequired, diff --git a/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContentConnector.js b/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContentConnector.js index 5213687a2..3599dd81a 100644 --- a/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContentConnector.js +++ b/frontend/src/InteractiveImport/Interactive/InteractiveImportModalContentConnector.js @@ -40,8 +40,14 @@ function isSameEpisodeFile(file, originalFile) { function createMapStateToProps() { return createSelector( createClientSideCollectionSelector('interactiveImport'), - (interactiveImport) => { - return interactiveImport; + (state) => state.episodeFiles.isDeleting, + (state) => state.episodeFiles.deleteError, + (interactiveImport, isDeleting, deleteError) => { + return { + ...interactiveImport, + isDeleting, + deleteError + }; } ); } @@ -148,7 +154,20 @@ class InteractiveImportModalContentConnector extends Component { } onDeleteSelectedPress = (selected) => { - // TODO: Delete selected (if they have episode IDs) + const { + items, + dispatchDeleteEpisodeFiles + } = this.props; + + const episodeFileIds = items.reduce((acc, item) => { + if (selected.indexOf(item.id) > -1 && item.episodeFileId) { + acc.push(item.episodeFileId); + } + + return acc; + }, []); + + dispatchDeleteEpisodeFiles({ episodeFileIds }); } onImportSelectedPress = (selected, importMode) => {