diff --git a/src/containers/stage-selector.jsx b/src/containers/stage-selector.jsx index 1edff7780..08ffd3730 100644 --- a/src/containers/stage-selector.jsx +++ b/src/containers/stage-selector.jsx @@ -12,6 +12,7 @@ import DragConstants from '../lib/drag-constants'; import DropAreaHOC from '../lib/drop-area-hoc.jsx'; import {emptyCostume} from '../lib/empty-assets'; import sharedMessages from '../lib/shared-messages'; +import {fetchCode} from '../lib/backpack-api'; import StageSelectorComponent from '../components/stage-selector/stage-selector.jsx'; @@ -101,8 +102,7 @@ class StageSelector extends React.Component { name: dragInfo.payload.name }, this.props.id); } else if (dragInfo.dragType === DragConstants.BACKPACK_CODE) { - fetch(dragInfo.payload.bodyUrl) - .then(response => response.json()) + fetchCode(dragInfo.payload.bodyUrl) .then(blocks => { this.props.vm.shareBlocksToTarget(blocks, this.props.id); this.props.vm.refreshWorkspace(); diff --git a/src/containers/target-pane.jsx b/src/containers/target-pane.jsx index b210ad35f..97c2849b3 100644 --- a/src/containers/target-pane.jsx +++ b/src/containers/target-pane.jsx @@ -19,6 +19,7 @@ import {handleFileUpload, spriteUpload} from '../lib/file-uploader.js'; import sharedMessages from '../lib/shared-messages'; import {emptySprite} from '../lib/empty-assets'; import {highlightTarget} from '../reducers/targets'; +import {fetchSprite, fetchCode} from '../lib/backpack-api'; class TargetPane extends React.Component { constructor (props) { @@ -166,8 +167,7 @@ class TargetPane extends React.Component { } else if (dragInfo.dragType === DragConstants.BACKPACK_SPRITE) { // TODO storage does not have a way of loading zips right now, and may never need it. // So for now just grab the zip manually. - fetch(dragInfo.payload.bodyUrl) - .then(response => response.arrayBuffer()) + fetchSprite(dragInfo.payload.bodyUrl) .then(sprite3Zip => this.props.vm.addSprite(sprite3Zip)); } else if (targetId) { // Something is being dragged over one of the sprite tiles or the backdrop. @@ -189,12 +189,11 @@ class TargetPane extends React.Component { }, targetId); } else if (dragInfo.dragType === DragConstants.BACKPACK_SOUND) { this.props.vm.addSound({ - md5: dragInfo.payload.body, + md5: dragInfo.payload.bodiy, name: dragInfo.payload.name }, targetId); } else if (dragInfo.dragType === DragConstants.BACKPACK_CODE) { - fetch(dragInfo.payload.bodyUrl) - .then(response => response.json()) + fetchCode(dragInfo.payload.bodyUrl) .then(blocks => { this.props.vm.shareBlocksToTarget(blocks, targetId); this.props.vm.refreshWorkspace(); diff --git a/src/lib/backpack-api.js b/src/lib/backpack-api.js index 4a6f7f6b2..33e329925 100644 --- a/src/lib/backpack-api.js +++ b/src/lib/backpack-api.js @@ -73,6 +73,22 @@ const deleteBackpackObject = ({ }); }); +// Two types of backpack items are not retreivable through storage +// code, as json and sprite3 as arraybuffer zips. +const fetchAs = responseType => uri => new Promise((resolve, reject) => { + xhr({uri, responseType}, (error, response) => { + if (error || response.statusCode !== 200) { + return reject(); + } + return resolve(response.body); + }); +}); + +// These two helpers allow easy fetching of backpack code and sprite zips +// Use the curried fetchAs here so the consumer does not worry about XHR responseTypes +const fetchCode = fetchAs('json'); +const fetchSprite = fetchAs('arraybuffer'); + export { getBackpackContents, saveBackpackObject, @@ -80,5 +96,7 @@ export { costumePayload, soundPayload, spritePayload, - codePayload + codePayload, + fetchCode, + fetchSprite };