Refactor manual fetch and use xhr instead

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();

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();

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
 };