Restructure and rename components

src/components/App.jsx

@@ -0,0 +1,169 @@
+import React from 'react'
+import { saveAs } from 'file-saver'
+
+import Drawer from 'rebass/dist/Drawer'
+import Container from 'rebass/dist/Container'
+import Block from 'rebass/dist/Block'
+import Fixed from 'rebass/dist/Fixed'
+
+import MapboxGlMap from './map/MapboxGlMap.jsx'
+import OpenLayers3Map from './map/OpenLayers3Map.jsx'
+import LayerList from './layers/LayerList.jsx'
+import LayerEditor from './layers/LayerEditor.jsx'
+import Toolbar from './Toolbar.jsx'
+
+import style from '../libs/style.js'
+import { loadDefaultStyle, SettingsStore, StyleStore } from '../libs/stylestore.js'
+import { ApiStyleStore } from '../libs/apistore.js'
+import LayerWatcher from '../libs/layerwatcher.js'
+
+import theme from '../config/rebass.js'
+import colors from '../config/colors.js'
+
+export default class App extends React.Component {
+  static childContextTypes = {
+    rebass: React.PropTypes.object,
+    reactIconBase: React.PropTypes.object
+  }
+
+  constructor(props) {
+    super(props)
+    this.layerWatcher = new LayerWatcher()
+    this.styleStore = new ApiStyleStore()
+    this.styleStore.supported(isSupported => {
+      if(!isSupported) {
+        console.log('Falling back to local storage for storing styles')
+        this.styleStore = new StyleStore()
+      }
+      this.styleStore.latestStyle(mapStyle => this.onStyleUpload(mapStyle))
+    })
+
+    this.settingsStore = new SettingsStore()
+    this.state = {
+      accessToken: this.settingsStore.accessToken,
+      mapStyle: style.emptyStyle,
+      selectedLayerId: null,
+    }
+  }
+
+  onReset() {
+    this.styleStore.purge()
+    loadDefaultStyle(mapStyle => this.onStyleUpload(mapStyle))
+  }
+
+  getChildContext() {
+    return {
+      rebass: theme,
+      reactIconBase: { size: 20 }
+    }
+  }
+
+  onStyleDownload() {
+    const mapStyle = style.toJSON(this.state.mapStyle)
+    const blob = new Blob([JSON.stringify(mapStyle, null, 4)], {type: "application/json;charset=utf-8"});
+    saveAs(blob, mapStyle.id + ".json");
+    this.onStyleSave()
+  }
+
+  onStyleUpload(newStyle) {
+    const savedStyle = this.styleStore.save(newStyle)
+    this.setState({ mapStyle: savedStyle })
+  }
+
+  onStyleSave() {
+    const snapshotStyle = this.state.mapStyle.set('modified', new Date().toJSON())
+    this.setState({ mapStyle: snapshotStyle })
+    console.log('Save')
+    this.styleStore.save(snapshotStyle)
+  }
+
+  onStyleChanged(newStyle) {
+    this.setState({ mapStyle: newStyle })
+  }
+
+  onAccessTokenChanged(newToken) {
+    this.settingsStore.accessToken = newToken
+    this.setState({ accessToken: newToken })
+  }
+
+  onLayersChanged(changedLayers) {
+    const changedStyle = this.state.mapStyle.set('layers', changedLayers)
+    this.onStyleChanged(changedStyle)
+  }
+
+  onLayerChanged(layer) {
+    console.log('layer changed', layer)
+    const layers = this.state.mapStyle.get('layers')
+    const changedLayers = layers.set(layer.get('id'), layer)
+    this.onLayersChanged(changedLayers)
+  }
+
+  onLayerChanged(layer) {
+    const changedStyle = this.state.mapStyle.setIn(['layers', layer.get('id')], layer)
+    this.onStyleChanged(changedStyle)
+  }
+
+  mapRenderer() {
+    const mapProps = {
+      mapStyle: this.state.mapStyle,
+      accessToken: this.state.accessToken,
+      onMapLoaded: (map) => {
+        this.layerWatcher.map = map
+      }
+    }
+    const renderer = this.state.mapStyle.getIn(['metadata', 'maputnik:renderer'], 'mbgljs')
+    if(renderer === 'ol3') {
+      return  <OpenLayers3Map {...mapProps} />
+    } else {
+      return  <MapboxGlMap {...mapProps} />
+    }
+  }
+
+  onLayerSelected(layerId) {
+    this.setState({ selectedLayerId: layerId })
+  }
+
+  render() {
+    const selectedLayer = this.state.mapStyle.getIn(['layers', this.state.selectedLayerId], null)
+    return <div style={{ fontFamily: theme.fontFamily, color: theme.color, fontWeight: 300 }}>
+      <Toolbar
+        mapStyle={this.state.mapStyle}
+        onStyleChanged={this.onStyleChanged.bind(this)}
+        onStyleSave={this.onStyleSave.bind(this)}
+        onStyleUpload={this.onStyleUpload.bind(this)}
+        onStyleDownload={this.onStyleDownload.bind(this)}
+      />
+      <div style={{
+        position: 'absolute',
+        bottom: 0,
+        height: "100%",
+        top: 50,
+        left: 0,
+        zIndex: 100,
+        width: 180,
+        overflow: "hidden",
+        backgroundColor: colors.gray
+      }}>
+        <LayerList
+          onLayersChanged={this.onLayersChanged.bind(this)}
+          onLayerSelected={this.onLayerSelected.bind(this)}
+          layers={this.state.mapStyle.get('layers')}
+        />
+      </div>
+      <div style={{
+        position: 'absolute',
+        bottom: 0,
+        height: "100%",
+        top: 50,
+        left: 180,
+        zIndex: 100,
+        width: 300,
+        backgroundColor: colors.gray}
+      }>
+      {selectedLayer && <LayerEditor layer={selectedLayer} onLayerChanged={this.onLayerChanged.bind(this)} sources={this.layerWatcher.sources} vectorLayers={this.layerWatcher.vectorLayers}/>}
+      </div>
+      {this.mapRenderer()}
+    </div>
+  }
+}
+