Only init websocket if local API

src/components/App.jsx

@@ -29,8 +29,8 @@ export default class App extends React.Component {
       onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, false)
     })
 
-    this.styleStore.supported(isSupported => {
-      if(!isSupported) {
+    this.styleStore.init(err => {
+      if(err) {
         console.log('Falling back to local storage for storing styles')
         this.styleStore = new StyleStore()
       }
@@ -150,11 +150,11 @@ export default class App extends React.Component {
       onDataChange: (e) => {
         this.layerWatcher.analyzeMap(e.map)
       },
-			//TODO: This would actually belong to the layout component
+      //TODO: This would actually belong to the layout component
       style:{
-				top: 40,
-				//left: 500,
-			}
+        top: 40,
+        //left: 500,
+      }
     }
 
     const renderer = metadata['maputnik:renderer'] || 'mbgljs'

src/libs/apistore.js

@@ -7,46 +7,46 @@ const port = '8000'
 const localUrl = `http://${host}:${port}`
 const websocketUrl = `ws://${host}:${port}/ws`
 
-console.log(localUrl, websocketUrl)
 
 export class ApiStyleStore {
   constructor(opts) {
-    if(opts.onLocalStyleChange) {
-      const connection = new ReconnectingWebSocket(websocketUrl)
-      connection.onmessage = function(e) {
-        if(!e.data) return
-        try {
-          console.log('Received style update from API')
-          const updatedStyle = style.ensureStyleValidity(JSON.parse(e.data))
-          opts.onLocalStyleChange(updatedStyle)
-        } catch(err) {
-          console.error('Cannot parse local file ' + e.data)
-        }
-      }
-    }
+    this.onLocalStyleChange = opts.onLocalStyleChange || (() => {})
   }
 
-  supported(cb) {
+  init(cb) {
     request(localUrl + '/styles', (error, response, body) => {
-      cb(error === null)
+      if (!error && body && response.statusCode == 200) {
+        const styleIds = JSON.parse(body)
+        this.latestStyleId = styleIds[0]
+        this.notifyLocalChanges()
+        cb(null)
+      } else {
+        cb(new Error('Can not connect to style API'))
+      }
     })
   }
 
+  notifyLocalChanges() {
+    const connection = new ReconnectingWebSocket(websocketUrl)
+    connection.onmessage = function(e) {
+      if(!e.data) return
+      try {
+        console.log('Received style update from API')
+        const updatedStyle = style.ensureStyleValidity(JSON.parse(e.data))
+        this.onLocalStyleChange(updatedStyle)
+      } catch(err) {
+        console.error('Cannot parse local file ' + e.data)
+      }
+    }
+  }
+
   latestStyle(cb) {
     if(this.latestStyleId) {
       request(localUrl + '/styles/' + this.latestStyleId, (error, response, body) => {
-        cb(JSON.parse(body))
+        cb(style.ensureStyleValidity(JSON.parse(body)))
       })
     } else {
-      request(localUrl + '/styles', (error, response, body) => {
-        if (!error && response.statusCode == 200) {
-          const styleIds = JSON.parse(body);
-          this.latestStyleId = styleIds[0];
-          request(localUrl + '/styles/' + this.latestStyleId, (error, response, body) => {
-            cb(style.ensureStyleValidity(JSON.parse(body)))
-          })
-        }
-      })
+      throw new Error('No latest style available. You need to init the api backend first.')
     }
   }
 

src/libs/stylestore.js

@@ -69,8 +69,8 @@ export class StyleStore {
     this.mapStyles = loadStoredStyles()
   }
 
-  supported(cb) {
-    cb(window.localStorage !== undefined)
+  init(cb) {
+    cb(null)
   }
 
   // Delete entire style history