Load and save style from style api

package.json

@@ -32,7 +32,8 @@
     "react-height": "^2.1.1",
     "react-icons": "^2.2.1",
     "react-motion": "^0.4.4",
-    "rebass": "^0.3.1"
+    "rebass": "^0.3.1",
+    "request": "^2.79.0"
   },
   "babel": {
     "presets": [

src/apistore.js

@@ -0,0 +1,42 @@
+import request from 'request'
+import style from './style.js'
+
+// Empty style is always used if no style could be restored or fetched
+export const emptyStyle = style.ensureMetadataExists(style.fromJSON({
+		version: 8,
+		sources: {},
+		layers: [],
+}))
+
+export class ApiStyleStore {
+  latestStyle(cb) {
+    if(this.latestStyleId) {
+      request('http://localhost:8000/styles/' + this.latestStyleId, (error, response, body) => {
+        cb(JSON.parse(body))
+      })
+    } else {
+      request('http://localhost:8000/styles', (error, response, body) => {
+        if (!error && response.statusCode == 200) {
+          const styleIds = JSON.parse(body);
+          this.latestStyleId = styleIds[0];
+          request('http://localhost:8000/styles/' + this.latestStyleId, (error, response, body) => {
+            cb(style.fromJSON(JSON.parse(body)))
+          })
+        }
+      })
+    }
+  }
+
+  // Save current style replacing previous version
+  save(mapStyle) {
+    const id = mapStyle.get('id')
+    request.put({
+      url: 'http://localhost:8000/styles/' + id,
+      json: true,
+      body: style.toJSON(mapStyle)
+    }, (error, response, body) => {
+     console.log('Saved style');
+    })
+    return mapStyle
+  }
+}

src/app.jsx

@@ -9,7 +9,8 @@ import Fixed from 'rebass/dist/Fixed'
 import { Map } from './map.jsx'
 import {Toolbar} from './toolbar.jsx'
 import style from './style.js'
-import { loadDefaultStyle, SettingsStore, StyleStore } from './stylestore.js'
+import { loadDefaultStyle, SettingsStore } from './stylestore.js'
+import { emptyStyle, ApiStyleStore } from './apistore.js'
 import { WorkspaceDrawer } from './workspace.jsx'
 
 import theme from './theme.js'
@@ -23,16 +24,22 @@ export default class App extends React.Component {
 
 	constructor(props) {
 		super(props)
-		this.styleStore = new StyleStore()
+		this.styleStore = new ApiStyleStore()
 		this.settingsStore = new SettingsStore()
 		this.state = {
 			accessToken: this.settingsStore.accessToken,
 			workContext: "layers",
-			currentStyle: this.styleStore.latestStyle(),
+      currentStyle: emptyStyle
 		}
+
+    this.styleStore.latestStyle(mapStyle => {
+      this.onStyleUpload(mapStyle)
+    })
+    /*
 		if(this.state.currentStyle.get('layers').size === 0) {
 			loadDefaultStyle(mapStyle => this.onStyleUpload(mapStyle))
 		}
+    */
 	}
 
 	onReset() {
@@ -62,6 +69,7 @@ export default class App extends React.Component {
 	onStyleSave() {
 		const snapshotStyle = this.state.currentStyle.set('modified', new Date().toJSON())
 		this.setState({ currentStyle: snapshotStyle })
+    console.log('Save')
 		this.styleStore.save(snapshotStyle)
 	}
 

src/map.jsx

@@ -12,14 +12,15 @@ export class Map extends React.Component {
 	}
 
 	componentWillReceiveProps(nextProps) {
-		const tokenChanged = nextProps.accessToken !== MapboxGl.accessToken
+		const hasTokenChanged = nextProps.accessToken !== MapboxGl.accessToken
+    MapboxGl.accessToken = nextProps.accessToken
 
 		// If the id has changed a new style has been uplaoded and
 		// it is safer to do a full new render
 		// TODO: might already be handled in diff algorithm?
 		const mapIdChanged = this.props.mapStyle.get('id') !== nextProps.mapStyle.get('id')
 
-		if(mapIdChanged || tokenChanged) {
+		if(mapIdChanged || hasTokenChanged) {
 			this.state.map.setStyle(style.toJSON(nextProps.mapStyle))
 			return
 		}

webpack.config.js

@@ -62,7 +62,9 @@ module.exports = {
 		}]
 	},
 	node: {
-		fs: "empty"
+		fs: "empty",
+    net: 'empty',
+    tls: 'empty'
 	},
 	devServer: {
 		contentBase: "./public",