Add deleteting via context menu

src/components/backpack/backpack.jsx

@@ -17,7 +17,7 @@ const dragTypeMap = {
     sprite: DragConstants.BACKPACK_SPRITE
 };
 
-const Backpack = ({contents, dragOver, dropAreaRef, error, expanded, loading, onToggle}) => (
+const Backpack = ({contents, dragOver, dropAreaRef, error, expanded, loading, onToggle, onDelete}) => (
     <div className={styles.backpackContainer}>
         <div
             className={styles.backpackHeader}
@@ -43,7 +43,10 @@ const Backpack = ({contents, dragOver, dropAreaRef, error, expanded, loading, on
             )}
         </div>
         {expanded ? (
-            <div className={styles.backpackList}>
+            <div
+                className={styles.backpackList}
+                ref={dropAreaRef}
+            >
                 {error ? (
                     <div className={styles.statusMessage}>
                         <FormattedMessage
@@ -67,7 +70,6 @@ const Backpack = ({contents, dragOver, dropAreaRef, error, expanded, loading, on
                                 className={classNames(styles.backpackListInner, {
                                     [styles.dragOver]: dragOver
                                 })}
-                                ref={dropAreaRef}
                             >
                                 {contents.map(item => (
                                     <SpriteSelectorItem
@@ -76,10 +78,12 @@ const Backpack = ({contents, dragOver, dropAreaRef, error, expanded, loading, on
                                         details={item.name}
                                         dragPayload={item}
                                         dragType={dragTypeMap[item.type]}
+                                        id={item.id}
                                         key={item.id}
                                         name={item.type}
                                         selected={false}
                                         onClick={noop}
+                                        onDeleteButtonClick={onDelete}
                                     />
                                 ))}
                             </div>
@@ -111,6 +115,7 @@ Backpack.propTypes = {
     error: PropTypes.bool,
     expanded: PropTypes.bool,
     loading: PropTypes.bool,
+    onDelete: PropTypes.func,
     onToggle: PropTypes.func
 };
 

src/containers/backpack.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import bindAll from 'lodash.bindall';
 import BackpackComponent from '../components/backpack/backpack.jsx';
-import {getBackpackContents, saveBackpackObject, soundPayload, costumePayload} from '../lib/backpack-api';
+import {getBackpackContents, saveBackpackObject, deleteBackpackObject, soundPayload, costumePayload} from '../lib/backpack-api';
 import DragConstants from '../lib/drag-constants';
 
 import {connect} from 'react-redux';
@@ -14,6 +14,7 @@ class Backpack extends React.Component {
         bindAll(this, [
             'handleDrop',
             'handleToggle',
+            'handleDelete',
             'refreshContents',
             'setRef'
         ]);
@@ -84,6 +85,14 @@ class Backpack extends React.Component {
             }))
             .then(this.refreshContents);
     }
+    handleDelete (id) {
+        deleteBackpackObject({
+            host: this.props.host,
+            token: this.props.token,
+            username: this.props.username,
+            id: id
+        }).then(this.refreshContents);
+    }
     refreshContents () {
         if (this.props.token && this.props.username) {
             this.setState({loading: true, error: false});
@@ -114,6 +123,7 @@ class Backpack extends React.Component {
                 error={this.state.error}
                 expanded={this.state.expanded}
                 loading={this.state.loading}
+                onDelete={this.handleDelete}
                 onToggle={this.props.host ? this.handleToggle : null}
             />
         );

src/lib/backpack-api.js

@@ -49,9 +49,28 @@ const saveBackpackObject = ({
     });
 });
 
+const deleteBackpackObject = ({
+    host,
+    username,
+    token,
+    id
+}) => new Promise((resolve, reject) => {
+    xhr({
+        method: 'DELETE',
+        uri: `${host}${username}/${id}`,
+        headers: {'x-token': token}
+    }, (error, response) => {
+        if (error || response.statusCode !== 200) {
+            return reject();
+        }
+        return resolve(response.body);
+    });
+});
+
 export {
     getBackpackContents,
     saveBackpackObject,
+    deleteBackpackObject,
     costumePayload,
     soundPayload
 };