From 8f03486e20e9b91b7991d2c8c6715109017c86b1 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Tue, 19 Jun 2018 16:52:29 -0400
Subject: [PATCH] Add deleteting via context menu
---
src/components/backpack/backpack.jsx | 11 ++++++++---
src/containers/backpack.jsx | 12 +++++++++++-
src/lib/backpack-api.js | 19 +++++++++++++++++++
3 files changed, 38 insertions(+), 4 deletions(-)
diff --git a/src/components/backpack/backpack.jsx b/src/components/backpack/backpack.jsx
index 0d64307b7..0f7b0b89f 100644
--- a/src/components/backpack/backpack.jsx
+++ b/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
};
diff --git a/src/containers/backpack.jsx b/src/containers/backpack.jsx
index 8bf57d6f9..2d986fbe1 100644
--- a/src/containers/backpack.jsx
+++ b/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}
/>
);
diff --git a/src/lib/backpack-api.js b/src/lib/backpack-api.js
index 3b1a55e15..9a2b19e95 100644
--- a/src/lib/backpack-api.js
+++ b/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
};
--
GitLab