Change $http to fetch

app/layers/addLayerDirective.js

@@ -25,8 +25,6 @@ function addLayers(layerSvc, stateSvc) {
           for (let x = 0; x < configLayerArray.length; x++) {
             searchLayerArray = searchLayerArray.filter(item => item !== configLayerArray[x]);
           }
-
-
           if(searchLayerArray.length < 1) {
             const errorDiv = document.getElementById("noResults");
             errorDiv.innerHTML = "<i class='glyphicon glyphicon-exclamation-sign'> </i> You have added all available layers.";

app/layers/layerSvc.js

@@ -1,6 +1,6 @@
 import PubSub from "pubsub-js";
 
-function layerSvc($http, appConfig, MapManager, stateSvc) {
+function layerSvc(appConfig, MapManager, stateSvc) {
   const layerStyleTimeStamps = {};
   const svc = {};
 
@@ -165,10 +165,12 @@ function layerSvc($http, appConfig, MapManager, stateSvc) {
     const url = `${
       appConfig.servers[0].host
     }/api/layers/?name__icontains=${searchValue}`;
-    return new Promise(resolve => {
-      $http.get(url).then(response => {
+
+    return fetch(url)
+      .then(resp => resp.json())
+      .then(data => {
         const searchObjects = [];
-        const objects = response.data.objects;
+        const objects = data.objects;
 
         for (let i = 0; i < objects.length; i += 1) {
           if (objects[i].alternate) {
@@ -185,9 +187,8 @@ function layerSvc($http, appConfig, MapManager, stateSvc) {
             });
           }
         }
-        resolve(searchObjects);
+        return searchObjects;
       });
-    });
   };
 
   svc.getLayerParam = (query, param) => {
@@ -202,18 +203,21 @@ function layerSvc($http, appConfig, MapManager, stateSvc) {
     return urlJson[param];
   };
 
-  svc.getRemoteServiceUrl = name =>
-    new Promise(res => {
-      $http.get(`/layers/${name}/remote`).then(r => {
-        const containsQuery = r.data.indexOf("?") > -1;
-        const url = containsQuery ? r.data.split("?")[0] : r.data;
-        const query = containsQuery ? r.data.split("?")[1] : false;
-        const params = {
-          map: svc.getLayerParam(query, "map")
-        };
-        res({ url, params });
-      });
+  svc.getRemoteServiceUrl = name => {
+    Promise(res => {
+      fetch(`/layers/${name}/remote`)
+        .then(resp => resp.json())
+        .then(data => {
+          const containsQuery = data.data.indexOf("?") > -1;
+          const url = containsQuery ? data.data.split("?")[0] : data.data;
+          const query = containsQuery ? data.data.split("?")[1] : false;
+          const params = {
+            map: svc.getLayerParam(query, "map")
+          };
+          res({ url, params });
+        });
     });
+  };
 
   svc.getLegendUrl = layer => {
     let url = null;

app/map/mapManager.js

@@ -1,7 +1,6 @@
 import PubSub from "pubsub-js";
 
 function MapManager(
-  $http,
   appConfig,
   stStoryMapBuilder,
   stEditableLayerBuilder,

app/state/stateSvc.js

@@ -3,7 +3,7 @@ import MinimalConfig from "app/state/MinimalConfig";
 import headerSvc from "app/ui/headerSvc";
 import locationSvc from "app/ui/locationSvc";
 
-function stateSvc($http, configSvc) {
+function stateSvc(configSvc) {
   const svc = {};
   svc.currentChapter = null;
   svc.previousChapter = null;
@@ -158,13 +158,12 @@ function stateSvc($http, configSvc) {
    * @param storyID The mapstory id.
    */
   svc.fetchComponentsFromAPI = storyID =>
-    $http({
-      url: `/api/mapstories/${storyID}`,
-      method: "GET"
-    }).then(data => {
-      PubSub.publish("updateStorypins", data.data.chapters);
-      PubSub.publish("updateStoryframes", data.data.chapters);
-    });
+    fetch(`/api/mapstories/${storyID}`)
+      .then(resp => resp.json())
+      .then(data => {
+        PubSub.publish("updateStorypins", data.chapters);
+        PubSub.publish("updateStoryframes", data.chapters);
+      });
 
   /**
    * Event responder for Init has finished.
@@ -307,14 +306,12 @@ function stateSvc($http, configSvc) {
 
   svc.initConfig();
 
-  svc.getCategories = () => {
-    $http({
-      url: "/api/categories/",
-      method: "GET"
-    }).then(data => {
-      svc.categories = data.data.objects;
-    });
-  };
+  svc.getCategories = () =>
+    fetch("/api/categories/")
+      .then(response => response.json())
+      .then(data => {
+        svc.categories = data.objects;
+      });
 
   svc.getCategories();
 
@@ -423,10 +420,13 @@ function stateSvc($http, configSvc) {
         });
     });
 
-  svc.generateStoryThumbnail = storyID =>
-    $http({
-      url: `/story/${storyID}/generate_thumbnail`,
-      method: "POST"
+  svc.generateStoryThumbnail = storyId =>
+    fetch(`/story/${storyId}/generate_thumbnail`, {
+      method: "POST",
+      headers: {
+        "X-CSRFToken": window.mapstory.composer.config.csrfToken
+      },
+      credentials: "same-origin"
     });
 
   svc.publish = () => {

app/style/styleService.js

@@ -17,8 +17,7 @@ function styleService(
     }
 
     const layerName = layer.get("name");
-    const styleName =
-      layer.get("styleName") || window.getStyleName(layerName);
+    const styleName = layer.get("styleName") || window.getStyleName(layerName);
     const mapID = stateSvc.config.id;
 
     if (mapID) {
@@ -37,9 +36,10 @@ function styleService(
       });
     }
 
-
     // if there is no map id, check if there is a style in the state service
-    const layerStyle = stateSvc.config.chapters[stateSvc.getChapterIndex()].layers.find(item => item.styleName === styleName);
+    const layerStyle = stateSvc.config.chapters[
+      stateSvc.getChapterIndex()
+    ].layers.find(item => item.styleName === styleName);
 
     if (layerStyle) {
       const newStyle = layerStyle.styleConfig.style;
@@ -113,56 +113,57 @@ function styleService(
         );
         const csrfToken = $cookies.getAll().csrftoken;
         // @TODO: Use GET request to verify existence of style before POST
-        $http({
-          url: `/gs/rest/styles?name=${style.name}`,
+
+        fetch(`/gs/rest/styles?name=${style.name}`, {
           method: "POST",
-          data: xml,
+          body: xml,
           headers: {
             "Content-Type": "application/vnd.ogc.sld+xml; charset=UTF-8",
             "X-CSRFToken": csrfToken,
             "X-Requested-With": "XMLHttpRequest"
           }
-        }).then(
-          (result) => {
+        }).then(response => {
+          if (response.status === 403 || response.status === 500) {
+            fetch(`/gs/rest/styles/${style.name}.xml`, {
+              method: "PUT",
+              body: xml,
+              headers: {
+                "Content-Type": "application/vnd.ogc.sld+xml; charset=UTF-8",
+                "X-CSRFToken": window.mapstory.composer.config.csrfToken,
+                "X-Requested-With": "XMLHttpRequest"
+              }
+            }).then(putResponse => {
+              layerSource.updateParams({
+                _dc: new Date().getTime(),
+                _olSalt: Math.random(),
+                STYLES: style.name
+              });
+              stateSvc.updateLayerStyle(layerName, style.name, {
+                style,
+                version: "1.0"
+              });
+            });
+          } else {
             layerSource.updateParams({
               _dc: new Date().getTime(),
               _olSalt: Math.random(),
               STYLES: style.name
             });
-            stateSvc.updateLayerStyle(layerName, style.name, {style, version: "1.0"});
-          },
-          (response) => {
-            if (response.status === 403 || response.status === 500) {
-              $http
-                .put(`/gs/rest/styles/${  style.name  }.xml`, xml, {
-                  headers: {
-                    "Content-Type":
-                      "application/vnd.ogc.sld+xml; charset=UTF-8",
-                    "X-CSRFToken": csrfToken,
-                    "X-Requested-With": "XMLHttpRequest"
-                  }
-                })
-                .then((result) => {
-                  layerSource.updateParams({
-                    _dc: new Date().getTime(),
-                    _olSalt: Math.random(),
-                    STYLES: style.name
-                  });
-                  stateSvc.updateLayerStyle(layerName, style.name, {style, version: "1.0"});
-                });
-            }
-            // called asynchronously if an error occurs
-            // or server returns response with an error status.
+            stateSvc.updateLayerStyle(layerName, style.name, {
+              style,
+              version: "1.0"
+            });
           }
-        );
+        });
 
         if (mapID) {
           fetch(`/style/${mapID}/${styleName}`, {
             method: "POST",
-            body: JSON.stringify({style, version: "1.0"}),
+            body: JSON.stringify({ style, version: "1.0" }),
             headers: {
               "X-CSRFToken": window.mapstory.composer.config.csrfToken
-            }});
+            }
+          });
         }
       }
     }

karma.config.js

@@ -12,7 +12,7 @@ module.exports = config => {
     reporters: ["mocha"],
     port: 9876,
     colors: true,
-    logLevel: browserMode ? config.LOG_DEBUG : config.LOG_INFO,
+    logLevel: browserMode ? config.LOG_DEBUG : config.LOG_DISABLE,
     autoWatch: false,
     browsers: browserMode ? ["Chrome"] : ["PhantomJS"],
     singleRun: !browserMode,

package.json

@@ -74,7 +74,8 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "pubsub-js": "^1.6.0",
-    "story-tools": "./deps/story-tools"
+    "story-tools": "./deps/story-tools",
+    "whatwg-fetch": "^3.0.0"
   },
   "repository": "https://github.com/MapStory/story-tools-composer",
   "author": "Darin Acosta <darinjacosta@gmail.com>",

webpack.config.js

@@ -51,7 +51,7 @@ module.exports = {
     ]
   },
   entry: {
-    app: ["babel-polyfill", "./app/app.js"],
+    app: ["whatwg-fetch", "babel-polyfill", "./app/app.js"],
     style: "./style/style.js",
     vendor: [
       "angular",