Merge pull request #684 from orangemug/fix/issue-533

Fix for updating available sources cache when updating style

src/components/App.jsx

@@ -440,9 +440,10 @@ export default class App extends React.Component {
       mapStyle: newStyle,
       dirtyMapStyle: dirtyMapStyle,
       errors: mappedErrors,
+    }, () => {
+      this.fetchSources();
     })
 
-    this.fetchSources();
   }
 
   onUndo = () => {
@@ -566,19 +567,19 @@ export default class App extends React.Component {
   }
 
   fetchSources() {
-    const sourceList = {...this.state.sources};
+    const sourceList = {};
 
     for(let [key, val] of Object.entries(this.state.mapStyle.sources)) {
-      if(sourceList.hasOwnProperty(key)) {
-        continue;
-      }
-
+      if(
+        !this.state.sources.hasOwnProperty(key) &&
+        val.type === "vector" &&
+        val.hasOwnProperty("url")
+      ) {
         sourceList[key] = {
           type: val.type,
           layers: []
         };
 
-      if(!this.state.sources.hasOwnProperty(key) && val.type === "vector" && val.hasOwnProperty("url")) {
         let url = val.url;
         try {
           url = normalizeSourceURL(url, MapboxGl.accessToken);
@@ -595,16 +596,17 @@ export default class App extends React.Component {
         fetch(url, {
           mode: 'cors',
         })
-          .then((response) => {
-            return response.json();
-          })
-          .then((json) => {
+        .then(response => response.json())
+        .then(json => {
+
           if(!json.hasOwnProperty("vector_layers")) {
             return;
           }
 
           // Create new objects before setState
-            const sources = Object.assign({}, this.state.sources);
+          const sources = Object.assign({}, {
+            [key]: this.state.sources[key],
+          });
 
           for(let layer of json.vector_layers) {
             sources[key].layers.push(layer.id)
@@ -615,9 +617,12 @@ export default class App extends React.Component {
             sources: sources
           });
         })
-          .catch((err) => {
+        .catch(err => {
           console.error("Failed to process sources for '%s'", url, err);
-          })
+        });
+      }
+      else {
+        sourceList[key] = this.state.sources[key] || this.state.mapStyle.sources[key];
       }
     }
 

src/components/layers/LayerList.jsx

@@ -35,6 +35,8 @@ function findClosestCommonPrefix(layers, idx) {
   return closestIdx
 }
 
+let UID = 0;
+
 // List of collapsible layer editors
 class LayerListContainer extends React.Component {
   static propTypes = {...layerListPropTypes}
@@ -49,6 +51,9 @@ class LayerListContainer extends React.Component {
     this.state = {
       collapsedGroups: {},
       areAllGroupsExpanded: false,
+      keys: {
+        add: UID++,
+      },
       isOpen: {
         add: false,
       }
@@ -57,6 +62,10 @@ class LayerListContainer extends React.Component {
 
   toggleModal(modalName) {
     this.setState({
+      keys: {
+        ...this.state.keys,
+        [modalName]: UID++,
+      },
       isOpen: {
         ...this.state.isOpen,
         [modalName]: !this.state.isOpen[modalName]
@@ -253,6 +262,7 @@ class LayerListContainer extends React.Component {
 
     return <div className="maputnik-layer-list" ref={this.scrollContainerRef}>
       <AddModal
+          key={this.state.keys.add}
           layers={this.props.layers}
           sources={this.props.sources}
           isOpen={this.state.isOpen.add}