Use vm functions for deleting sounds and costumes

src/containers/costume-tab.jsx

@@ -23,28 +23,25 @@ class CostumeTab extends React.Component {
         this.state = {selectedCostumeIndex: 0};
     }
 
+    componentWillReceiveProps (nextProps) {
+        const {
+            editingTarget,
+            sprites,
+            stage
+        } = nextProps;
+
+        const target = editingTarget && sprites[editingTarget] ? sprites[editingTarget] : stage;
+        if (target && target.costumes && this.state.selectedCostumeIndex > target.costumes.length - 1) {
+            this.setState({selectedCostumeIndex: target.costumes.length - 1});
+        }
+    }
+
     handleSelectCostume (costumeIndex) {
         this.setState({selectedCostumeIndex: costumeIndex});
     }
 
     handleDeleteCostume (costumeIndex) {
-        // @todo the VM should handle all of this logic
-        const {editingTarget} = this.props.vm;
-
-        if (costumeIndex === editingTarget.currentCostume) {
-            editingTarget.setCostume(costumeIndex - 1);
-        }
-
-        editingTarget.sprite.costumes = editingTarget.sprite.costumes
-            .slice(0, costumeIndex)
-            .concat(editingTarget.sprite.costumes.slice(costumeIndex + 1));
-        this.props.vm.runtime.requestTargetsUpdate(editingTarget);
-        // @todo not sure if this is getting redrawn correctly
-        this.props.vm.runtime.requestRedraw();
-
-        this.setState({
-            selectedCostumeIndex: this.state.selectedCostumeIndex % editingTarget.sprite.costumes.length
-        });
+        this.props.vm.deleteCostume(costumeIndex);
     }
 
     render () {

src/containers/sound-tab.jsx

@@ -23,6 +23,20 @@ class SoundTab extends React.Component {
         this.state = {selectedSoundIndex: 0};
     }
 
+    componentWillReceiveProps (nextProps) {
+        const {
+            editingTarget,
+            sprites,
+            stage
+        } = nextProps;
+
+        const target = editingTarget && sprites[editingTarget] ? sprites[editingTarget] : stage;
+
+        if (target && target.sounds && this.state.selectedSoundIndex > target.sounds.length - 1) {
+            this.setState({selectedSoundIndex: target.sounds.length - 1});
+        }
+    }
+
     handleSelectSound (soundIndex) {
         const sound = this.props.vm.editingTarget.sprite.sounds[soundIndex];
         this.props.vm.editingTarget.audioPlayer.playSound(sound.md5);
@@ -30,17 +44,7 @@ class SoundTab extends React.Component {
     }
 
     handleDeleteSound (soundIndex) {
-        // @todo the VM should handle all of this logic
-        const {editingTarget} = this.props.vm;
-        editingTarget.sprite.sounds = editingTarget.sprite.sounds
-            .slice(0, soundIndex)
-            .concat(editingTarget.sprite.sounds.slice(soundIndex + 1));
-        this.props.vm.emitTargetsUpdate();
-        this.props.vm.runtime.requestRedraw();
-
-        this.setState({
-            selectedSoundIndex: this.state.selectedSoundIndex % editingTarget.sprite.sounds.length
-        });
+        this.props.vm.deleteSound(soundIndex);
     }
 
     render () {