From 2cc40554160b44ac4d65b41a146ba90f570f1b3c Mon Sep 17 00:00:00 2001 From: lukasmartinelli Date: Sat, 10 Sep 2016 16:26:39 +0200 Subject: [PATCH] Support setting access token --- src/app.jsx | 16 ++++++++++++++-- src/map.jsx | 9 ++++++--- src/settings.jsx | 10 +++++++++- src/stylestore.js | 28 +++++++++++++++++++--------- src/workspace.jsx | 4 ++++ 5 files changed, 52 insertions(+), 15 deletions(-) diff --git a/src/app.jsx b/src/app.jsx index 9f80c6b..f28214b 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -5,7 +5,7 @@ import { Drawer, Container, Block, Fixed } from 'rebass' import {Map} from './map.jsx' import {Toolbar} from './toolbar.jsx' import { StyleManager } from './style.js' -import { StyleStore } from './stylestore.js' +import { SettingsStore, StyleStore } from './stylestore.js' import { WorkspaceDrawer } from './workspace.jsx' import theme from './theme.js' @@ -19,7 +19,9 @@ export default class App extends React.Component { constructor(props) { super(props) this.styleStore = new StyleStore() + this.settingsStore = new SettingsStore() this.state = { + accessToken: this.settingsStore.accessToken, workContext: "layers", currentStyle: this.styleStore.latestStyle(), } @@ -62,6 +64,11 @@ export default class App extends React.Component { this.setState({ workContext: "layers", }) } + onAccessTokenChanged(newToken) { + this.settingsStore.accessToken = newToken + this.setState({ accessToken: newToken }) + } + render() { return
+ -
} } diff --git a/src/map.jsx b/src/map.jsx index 126e59f..9dd52f0 100644 --- a/src/map.jsx +++ b/src/map.jsx @@ -7,13 +7,17 @@ import Immutable from 'immutable' export class Map extends React.Component { static propTypes = { mapStyle: React.PropTypes.instanceOf(Immutable.Map).isRequired, + accessToken: React.PropTypes.string, } componentWillReceiveProps(nextProps) { + const tokenChanged = nextProps.accessToken !== MapboxGl.accessToken + // If the id has changed a new style has been uplaoded and // it is safer to do a full new render const mapIdChanged = this.props.mapStyle.get('id') !== nextProps.mapStyle.get('id') - if(mapIdChanged) { + + if(mapIdChanged || tokenChanged) { this.state.map.setStyle(nextProps.mapStyle.toJS()) return } @@ -36,8 +40,7 @@ export class Map extends React.Component { } componentDidMount() { - //TODO: Read MapboxGL token from settings - MapboxGl.accessToken = "pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w"; + MapboxGl.accessToken = this.props.accessToken const map = new MapboxGl.Map({ container: this.container, diff --git a/src/settings.jsx b/src/settings.jsx index 464dcdb..8c607a0 100644 --- a/src/settings.jsx +++ b/src/settings.jsx @@ -7,7 +7,9 @@ import Immutable from 'immutable' export class SettingsEditor extends React.Component { static propTypes = { mapStyle: React.PropTypes.instanceOf(Immutable.Map).isRequired, - onStyleChanged: React.PropTypes.func.isRequired + onStyleChanged: React.PropTypes.func.isRequired, + accessToken: React.PropTypes.string, + onAccessTokenChanged: React.PropTypes.func } onChange(property, e) { @@ -23,6 +25,12 @@ export class SettingsEditor extends React.Component { + this.props.onAccessTokenChanged(e.target.value)} + /> }