diff --git a/src/components/App.jsx b/src/components/App.jsx index 0d7da24c..8eefa321 100644 --- a/src/components/App.jsx +++ b/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' diff --git a/src/libs/apistore.js b/src/libs/apistore.js index 4f201140..4a185762 100644 --- a/src/libs/apistore.js +++ b/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.') } } diff --git a/src/libs/stylestore.js b/src/libs/stylestore.js index 0413acfc..160a115a 100644 --- a/src/libs/stylestore.js +++ b/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