Fixed: Deleting from Manage Episodes modal

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 {
+    this.setState({ isConfirmDeleteModalOpen: true });
-      onDeleteSelectedPress
+  }
-    } = this.props;
 
-    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 {
           <div className={styles.leftButtons}>
             {
               showDelete ?
-                <Button
+                <SpinnerButton
                   className={styles.deleteButton}
                   kind={kinds.DANGER}
+                  isSpinning={isDeleting}
                   isDisabled={!selectedIds.length || !!withoutEpisodeFileIdRowsSelected.length}
-                  onPress={onModalClose}
+                  onPress={this.onDeleteSelectedPress}
                 >
                   Delete
-                </Button> :
+                </SpinnerButton> :
                 null
             }
 
@@ -471,6 +492,16 @@ class InteractiveImportModalContent extends Component {
           real={false}
           onModalClose={this.onSelectModalClose}
         />
+
+        <ConfirmModal
+          isOpen={isConfirmDeleteModalOpen}
+          kind={kinds.DANGER}
+          title="Delete Selected Episode Files"
+          message={'Are you sure you want to delete the selected episode files?'}
+          confirmLabel="Delete"
+          onConfirm={this.onConfirmDelete}
+          onCancel={this.onConfirmDeleteModalClose}
+        />
       </ModalContent>
     );
   }
@@ -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,

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContentConnector.js

@@ -40,8 +40,14 @@ function isSameEpisodeFile(file, originalFile) {
 function createMapStateToProps() {
   return createSelector(
     createClientSideCollectionSelector('interactiveImport'),
-    (interactiveImport) => {
+    (state) => state.episodeFiles.isDeleting,
-      return interactiveImport;
+    (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) => {