Update sources if they change

src/components/App.jsx

@@ -20,9 +20,9 @@ import LayerWatcher from '../libs/layerwatcher'
 export default class App extends React.Component {
   constructor(props) {
     super(props)
-    this.layerWatcher = new LayerWatcher()
     this.styleStore = new ApiStyleStore()
     this.revisionStore = new RevisionStore()
+
     this.styleStore.supported(isSupported => {
       if(!isSupported) {
         console.log('Falling back to local storage for storing styles')
@@ -34,7 +34,14 @@ export default class App extends React.Component {
     this.state = {
       mapStyle: style.emptyStyle,
       selectedLayerIndex: 0,
+      sources: {},
+      vectorLayers: {},
     }
+
+    this.layerWatcher = new LayerWatcher({
+      onSourcesChange: v => this.setState({ sources: v }),
+      onVectorLayersChange: v => this.setState({ vectorLayers: v })
+    })
   }
 
   componentDidMount() {
@@ -146,7 +153,7 @@ export default class App extends React.Component {
     if(renderer === 'ol3') {
       return <OpenLayers3Map {...mapProps} />
     } else if(renderer === 'inspection') {
-      return  <InspectionMap {...mapProps} sources={this.layerWatcher.sources} />
+      return  <InspectionMap {...mapProps} sources={this.state.sources} />
     } else {
       return  <MapboxGlMap {...mapProps} />
     }
@@ -164,7 +171,7 @@ export default class App extends React.Component {
 
     const toolbar = <Toolbar
       mapStyle={this.state.mapStyle}
-      sources={this.layerWatcher.sources}
+      sources={this.state.sources}
       onStyleChanged={this.onStyleChanged.bind(this)}
       onStyleOpen={this.onStyleChanged.bind(this)}
       onStyleDownload={this.onStyleDownload.bind(this)}
@@ -179,8 +186,8 @@ export default class App extends React.Component {
 
     const layerEditor = selectedLayer ? <LayerEditor
       layer={selectedLayer}
-      sources={this.layerWatcher.sources}
-      vectorLayers={this.layerWatcher.vectorLayers}
+      sources={this.state.sources}
+      vectorLayers={this.state.vectorLayers}
       highlightLayer={metadata['maputnik:highlighted_layer'] ? true : false}
       onLayerChanged={this.onLayerChanged.bind(this)}
       onLayerIdChange={this.onLayerIdChange.bind(this)}

src/components/fields/SpecField.jsx

@@ -45,7 +45,6 @@ export default class SpecField extends React.Component {
       name: this.props.fieldName,
       onChange: newValue => this.props.onChange(this.props.fieldName, newValue)
     }
-    console.log(this.props.fieldName, this.props.fieldSpec.type)
     switch(this.props.fieldSpec.type) {
       case 'number': return (
         <NumberInput

src/components/layers/LayerEditor.jsx

@@ -169,7 +169,6 @@ export default class LayerEditor extends React.Component {
   }
 
   render() {
-    console.log(this.props)
     const layerType = this.props.layer.type
     const layoutGroups = layout[layerType].groups.filter(group => {
       return !(this.props.layer.type === 'background' && group.type === 'source')

src/components/modals/AddModal.jsx

@@ -24,16 +24,26 @@ class AddModal extends React.Component {
 
   constructor(props) {
     super(props)
-
-    console.log('sources', this.props.sources)
     this.state = {
       type: 'fill',
       id: '',
-      //source: Object.keys(this.props.sources)[0],
-      //'source-layer': this.props.sources[0][0]
+    }
+
+    if(props.sources.length > 0) {
+      this.state.source = Object.keys(this.props.sources)[0]
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    const sourceIds = Object.keys(nextProps.sources)
+    if(!this.state.source && sourceIds.length > 0) {
+      this.setState({
+        source: sourceIds[0],
+      })
+    }
+  }
+
+
   render() {
     return <Modal
       isOpen={this.props.isOpen}